Dalam Belajar Komputer Melalui Internet saya mau share cara membuat Popular Post bergerak ke atas, contohnya dapat dilihat di blog ini. mungkin bagi para blogger membuat popular post sudah pada tau dan sudah ga asing lagi karena memang sudah disediakan di menu tambah widget, namun itu masih dalam tampilan biasa atau tidak bergerak. Nah, pada kesempatan ini saya akan memberikan trik agar popular post tersebut jadi bergerak. Caranya sebagai berikut:
- Bagi yang belum pasang widgetnya pertama-tama biasa masuk ke Desain - Tata Letak
- Kemudian klik tambah gadget.
- Lalu pilih Entri Populer centang semua kotak
- Simpan.
Kemudian klik Edit HTML - lanjutkan dan jangan lupa centang tanda Expand Template Widge.
Setelah itu cari kode:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>Kemudian tambahkan kode dibawah ini setelahnya
<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%'>setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.
</marquee>Sehingga hasil akhirnya seperti ini :
Catatan :<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>
Untuk Merubah Tinggi Gadget dan Kecepatannya silahkan ganti kode yang berwarna merahSimpan Template anda dan lihat hasilnya
Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Popular Post bergerak di blogspot kali ini, semoga bermanfaat bagi Anda.
DAPATKAN ARTIKEL VIA EMAIL
Dipublish oleh :
Abdul Kohar - Jatinangor Rating 5
terima kasih infonya, langsung praktek ne
BalasHapusthanks kak..:D
BalasHapuswew keren bisa gerak2
BalasHapusthanks gan
gan gmana caranya bikin widget kaya di atas yang super hemat di satu kotakin ada popular post, coment,visitor, kasih tau dong, thankss..
BalasHapuskunjungan balik yaa http://biosaefful.blogspot.com
baca di http://azzam10.blogspot.com/2012/07/cara-membuat-tab-view-di-sidebar-blog.html
Hapusmakasih mas, kunjungan baliknya dong mas :)
BalasHapusterimakasih mas bro.... tutorialnya sangat membantu....
BalasHapussaya coba dulu mas.. thanks infonya ya
BalasHapusmakasih atas informasinya gan ...
BalasHapus:cxz baguss..... kunjungan balik ya gan
BalasHapus