Tips Mengubah Tampilan Popular Post Agar Lebih Keren

Dengan memodifikasi tampilan popular post menjadi lebih keren maka akan lebih menarik pengunjung untuk meliat artikel terpopular di blog anda, dan hal ini bisa juga untuk meningkatkan pageview blog anda.

Bukan hanya bisa untuk menarik perhatian pengunjung, karena tampilan popular post yang keren juga bisa untuk menambah blog anda semakin keren dipandang mata, dan juga hal ini bisa agar pengunjung betah berlama-lama di blog anda. Ok Disini saya membagikan 2 macam popular post silahkan anda gunakan yang menurut anda menarik.

Popular Post 1

Cara memasang di Blog :

• Pastikan Sobat Telah Login di Blogger Sobat dan Pastikan telah memasang Widget Popular Post bawaan Blogger.
• Klik Tap Template di Bawah Tata letak
• Klik Edit HTML
• Cari Kode ]]></b:skin>
• Atau Tekan Tombol CTRL + F Tulis Kode Ini :  ]]></b:skin>
• Setelah Ketemu Copy Letakkan Script di bawah ini di Atas Kode ]]></b:skin>

.popular-posts ul{padding-left:0px; font:9px Arial;} .popular-posts ul li{background:#FFF url(http://www.seocips.com/) no-repeat scroll 5px 10px; list-style-type:none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border:1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px} .popular-posts ul li:hover{border:1px solid #6BB5FF} .popular-posts ul li a:hover{text-decoration:none} .popular-posts .item-thumbnail img {border-radius:10px; }

• Simpan Template dan Lihat hasilnya.

Popular Post 2

Ini adalah css popularpost untuk mengubah tampilan popularpost di blognya sobat. 

Popular Post 3D

Berikut ini adalah cara memasangnya di blog:

• Di Blog Blogger Anda. Pastikan widget popullarpost standar Blogger terpasang ditemplate anda. kemudian...
• Pilih Tata Letak => Tambah Gadget => HTML/JavaScript.
• Copy paste kode dibawah ini pada HTML/JavaScript.

<style type="text/css"> .cube { width: 200px; height: 200px;}
a img { border: none; }
#linksCube img {
a img { border: none; } #linksCube img { width: 100%; height: 100%; }
</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://seocipscompost3d.googlecode.com/svn/seocips-popuar3d"></script> <script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});
</script> <script type="text/javascript" src="https://sites.google.com/site/seocips/seocips-script/popular-post-3d.js"></script>
</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://seocipscompost3d.googlecode.com/svn/seocips-popuar3d"></script> <script type="text/javascript" charset="utf-8"> $(function () {     $('.popular-posts ul').abupopularcube(); }); </script> <script type="text/javascript" src="https://sites.google.com/site/seocips/seocips-script/popular-post-3d.js"></script> 

Keterangan :

Silahkan ubah kode yang berwarna di atas sesuai dengan tinggi lebarnya template sobat, untuk kode warna hijau di atas adalah untuk mengatur besarnya gambar di widget popular post tersebut. Simpan template dan Lihat hasilnya.