Cara membuat popular post bergerak | Ini menjadi hal yang
menarik bagi saya penulis blog ini pada postingan ini, kenapa? Tadi saya
jalan2 alis blog walking kesana kemari dan melihat sebuah blog dengan
widget popular postnya bisa bergerak sesuai dengan scroll mouse, popular
postnya bergerak naik turun, pokoknya manis dech, dan mantap sangat,
maka pada kali ini saya ingin berbagi
Cara membuat popular post bergerak keatas post ini untuk sahabat-sahabat blogspot semuanya.
Sebenarnya cara membuat popular post memang sudah ada dan disediakan
oleh blogger sendiri, namun masih kurang maknyos, karena bentuk dan
motidnya yang biasa-biasa saja, tidak bisa bergerak naik turun :).
disini kita akan mengulas tentang
cara membuat popular post bergerak. ayo kita simak dengan seksama.
Berikut langkah-langkah atau cara membuat popular post bergerak keatas
1. Login ke blog dulu, kemudian anda masuk ke DESAIN --> TATA LETAK
2. Sudah! kemudian tambah widget = klik gadget
3. Pilih entri popular, centang semua kotak
4. Simpan/SAVE
Apabila Gadget sudah terpasang kemudian klik Desain-Template yang
posisinya dibawah Tata Letak. Kemudian klik Edit HTML, jangan lupa
centang Expand widget.
Setelah langkah diatas, kemudian selanjutnya Cara membuat popular post
bergerak pada blogspot adalah dengan mencari kode berikut:
Sobat Cari kode berikut:
<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 class='widget-content popular-posts'>
<ul>
Sudah ketemu, kemudian letakkan kode berikut setelah kode diatas.
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.
</marquee>
LIHAT HASIL PERPADUAN KODENYA, SEPERTI DIBAWAH INI
<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 class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up'
height='140' onmouseout='this.start()' onmouseover='this.stop()'
scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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 == "false"'>
<!-- (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>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>
Kalau anda menggantikan tinggi gadget, silakan anda gantikan kode warna
hijau diatas. Silakan anda ber expressi, semoga berhasil. Untuk
selanjutnya silakan kita diskusi dibawah ini. Thank
Postingan
