Mempercantik Popular Post

Popular Post dengan Slide ke Bawah

Tampilan widget yang biasa biasa aja pasti membosankan kan, baik bagi para pengunjung dan designer bloggernya pasti kurang puas. Solusinya adalah memberi tampilan indah pada widget kita.. emm


Widget yang akan saya rangkum sekarang adalah popular post, dimana entri yang kita tulis paling banyak dikunjungi oleh para pecinta ilmu online. Dengan tampilan slide widget nya yang kebawah, dan tampilan kotaknya yang pastinya pas untuk memperindah design blog para agan agan blogger.

Kelihatanya menarik kan. Banyak para sahabat blogger yang menyukai tampilan seperti ini, karena widget seperti ini selain simple juga menarik perhatian para sahabat sahabat yang berkunjung ke blog umak.

Langkah langkah menambahkanya adalah :
1. Login ke www.blogger.com, lalu sign in dengan akun kalian heb
2. Pilih salah satu blog jika blog umak banyak, kalau cuma satu aja lewati langkah ini
3. Pilih Tata Letak, dan akan tampil halaman seperti di bawah ini

4. Pilih Add widget ( Tambah Widget )

5. Scrool kebawah dan temukan HTML/JavaScript

6. Nah setelah itu tambahkan Script seperti di bawah ini :


<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #585858; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:85px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:65px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://permathicblog.googlecode.com/files/Slideshow%20Postingan.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 20;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>


7. Klik save ( simpan ), dan Lihat Blog untuk lihat hasilnya..

Jika umak kurang puas edit dan utak atik sendiri yah

salam sahabat blogger
Yoke