Cara Menambahkan Scroll Pada Popular Post atau Entri Popular di Blog

Buat sahabat yang blog yang belum tau bagaimana cara menambahkan scroll pada popular post, kali ini saya akan memberikan cara nya :

 
- Login terlebih dahulu mengunakan akun bloger 
- Buatlah Entri Populer/Populer Post dengan menambah Gadget pada sidebar, beri nama dengan "Populer Post" ( bisa diganti sesuai keingian ). 
- Simpan/save. sampai disini anda telah membuat Entri Populer/Populer Post ( tanpa fungsi scroll ) 
- Untuk menambahkan fungsi scroll pada Arsip Sekarang menuju Tata letak >> Edit HTML. Beri tanda centang pada Expand Template Widgets
- Cari Populer Post yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Populer Post”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:


    <b:widget id='PopularPosts1' locked='false' title='Galery Populer' 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;'>
    <div class='widget-content popular-posts'>
    <ul>
    <b:loop values='data:posts' var='post'>
    <li>
    <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>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div></div>
    </b:includable>
    </b:widget>

     
    Letakkan Kode berikut ini <div style='overflow:auto; width:ancho;height:200px;'> sebelum kode <div class='widget-content popular-posts'> Selanjutnya Letakkan Kode </div> berikut Sebelum kode </b:includable>

*NB: Perhatikan tulisan berwarna merah di atas, kode height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan ).  Simpan template dan lihatlah hasilnya. Selamat Mencoba.

5 komentar:

4 Mei 2012 pukul 19.20 Reply To This Comment Ghost blogger... mengatakan...

article is very interesting and fantastic

4 Mei 2012 pukul 22.19 NDY mengatakan...

@Ghost blogger... thanks for your compliment

10 Desember 2012 pukul 12.40 Reply To This Comment Unknown mengatakan...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

Title: Zamrud News
( zamrudnews.blogspot.com )

23 Desember 2012 pukul 21.39 Reply To This Comment Tatik Uc mengatakan...

tips menarik, aku pernah coba yang model gambar tipe galery tapi ga berhasil, jadi ku pake yang biasa aja..( Yusy-Azzahro.blogspot.com)

29 Maret 2013 pukul 07.15 Reply To This Comment Unknown mengatakan...

makasih gan tutornya...berhasil saya pasang

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Tinggalkan jejak Sahabat di Bawah ini. Buat Sahabat yang Mempunyai Blog Insya allah saya kunjungi Balik