Cara Membuat Entri Populer Dengan Efek Slide Pada Blog

Seperti postingan yang sebelum-sebelumnya mengenai berbagai cara kita agar blog yang kita buat menarik, untuk kesempatan kali ini kita juga akan masih membahas cara memperindah blog. Pada kesempatan kali ini kami akan sampaikan bagaimana cara membuat entri populer bisa bergerak sehingga pengunjung bisa melihat entri populer di blog kita satu persatu.

Terus bagaimana caranya? Berikut kami sampaikan bagaimana entri populer di blog kita bisa bergerak.

1.       Masuk ke akun blogger anda. Pada dasbor pilih tata letak

2.       Kemudian pilih tambahkan gadget

3.       Selanjutnya pilih Entri populer, ketika muncul kota konfigurasikan entri populer pilih simpan

4.       Kemudian tambahkan gadget lagi pilih Html / Java Script

5.       Kemudian masukkan kode script di bawah ini

<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:2px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:280px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:280px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:none; border:1px solid #ddd; } #PopularPosts1 li .item-title { color:#A5A9AB; font-size:12px; margin-bottom:2px; } #PopularPosts1 li .item-title a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #PopularPosts1 li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } #PopularPosts1 li .item-snippet { overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:12px; color:#262B2F; padding:0px 0px; margin:0px 0px; } #PopularPosts1 .item-snippet a, #PopularPosts1 .item-snippet a:visited { color:#3E4548; text-decoration: none; } #PopularPosts1 .spyWrapper { height: 100%; overflow: hidden; position: relative; } #PopularPosts1 { -webkit-border-radius: 5px; -moz-border-radius: 5px; } .tags span, .tags a { -webkit-border-radius: 8px; -moz-border-radius: 8px; } a img { border: 0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').simpleSpy(); }); </script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></scrip >

6.    Pastekan kode ke atas ke kotak Html / Java Script

7.       Kemudian pilih simpan dan lihat hasilnya di blog anda.

Demikian postingan kali ini, meskipun singkat mudah-mudahan bermanfaat.