Widget Popular Post Menggunakan Scroll

Diposkan oleh Madie Zha on 13 January 2012 at 1:35 PM

Widget Popular Post Menggunakan Scroll | Tutorial Blog

Membuat Widget Popular Post Menggunakan Scroll | Tutorial Blog

Karena beberapa Sobat ada yang bertanya cara Membuat Widget Popular Post Menggunakan Scroll, jadi kali ini saya akan share triknya. Semoga tutorialnya mudah di mengerti dan bisa membantu Sobat yang ingin Membuat Widget Popular Post Menggunakan Scroll.
Ok Sob, berikut caranya :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Widget Popular Post Menggunakan Scroll
  • Beri tanda centang pada Expand Template Widget.
    Widget Popular Post Menggunakan Scroll
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Cari kode
    <div class='widget-content popular-posts'>
    atau
    popular-posts
    atau
    popularposts
    Karena setiap template berbeda, jadi intinya cari kode popular posts yang ada di template Anda.
  • Lalu tambahkan kode
    <div style='overflow:auto; width:ancho; height:200px;'>
    </div>
    Untuk lebih jelasnya perhatikan kode berikut :
    Kode :
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <b:loop values='data:posts' var='post'>
    <div>
    <b:if cond='data:showThumbnails == &quot;false&quot;'>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <!-- (1) No snippet/thumbnail -->
    <a expr:href='data:post.href'><data:post.title/></a>
    <b:else/>
    <!-- (2) Show only snippets -->
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <!-- (3) Show only thumbnails -->
    <div class='item-thumbnail-only'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    </div>
    <div style='clear: both;'/>
    <b:else/>
    <!-- (4) Show snippets and thumbnails -->
    <div class='item-content'>
    <b:if cond='data:post.thumbnail'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    </a>
    </div>
    </b:if>
    <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
    <div class='item-snippet'><data:post.snippet/></div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:if>
    </div>
    </b:loop>
    </div>
    </b:includable>
    </b:widget>
    Ket : <div style='overflow:auto; width:ancho; height:200px;'> dan </div> adalah kode yang di tambahkan.
  • Terakhir klik Save / Simpan Template.
    Widget Popular Post Menggunakan Scroll
    Selesai...
Silakan di coba dan semoga berhasil Membuat Widget Popular Post Menggunakan Scroll.

.:. 19 komentar .:.Post a Comment

  1. thanks infonya, sob. salam persahabatan

    ReplyDelete
  2. berhasil gan, makasih banyak yaa. coba cek gan bener ngga afiev.com

    ReplyDelete

  3. makasih infonya semoga bermanfaat gan

    ReplyDelete
  4. . artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    ReplyDelete
  5. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga sukses...

    ReplyDelete
  6. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete

  7. Informasinya sangat keren....

    ReplyDelete
  8. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  9. . artikel yang sangat menarik dan tentunya sangat membantu saya dalam belajar, makasih banyak ya lam sukses selalu

    ReplyDelete


  10. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  11. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    ReplyDelete
  12. triknya berhasil gan...Tolong cek di blog saya ya. Ditunggu
    http://otobox-blog.blogspot.com

    ReplyDelete
  13. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  14. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom