Cara Membuat Artikel Populer Lebih Menarik

Artikel Populer atau Popular Posts Today pada blog kita penting keberadaanya untuk memantau artikel apa saja yang populer atau yang paling banyak di baca di blog kita. Namun tidak menjadi kebanggan bila Artikel Populer itu cuma artikel Uh Ah. Nach..,bagaimana caranya Membuat Widget Entri Populer Tampil Lebih Menarik daripada sekedar bawaan bloggernya yang terlihat kaku?

Artikel Populer atau Popular Posts Today untuk tampil lebih menarik, bisa kita usahakan dengan menambahkan kode animasi untuk bisa bergulir dan menambah background pada img. Tentu sebelumnya sobat haruslah memasang Widget Popular Post bawaan blogger terlebih dahulu  Membuat Artikel Populer sungguh sangat mudah.

Langkah yang harus sobat ikuti untuk membuat Artikel Populer atau Popular Posts Today tampil menarik adalah seperti dibawah ini:

Login di Akun Blogger sobat

Lari ke Design

Pilih Page element

Lalu klik Add a gadget

Tambahkan  HTML/JavaScript

Lalu Copy paste-kan  code yang ada didalam textarea.di bawah ini,lalu Save Gadget:

<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #PopularPosts1 li .item-title { color:#A5A9AB; font-size:1em; margin-bottom:0.5em; } #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:10px; 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><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><br /> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').simpleSpy(); }); </script><br /> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Selamat mencoba, semoga bermanfaat dan tentunya Widget Entri Populer blog sobat Tampil Lebih Menarik.

Sumber:
Abu Farhan

Penulis : Raihan Marie Ramadhan ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara Membuat Artikel Populer Lebih Menarik ini dipublish oleh Raihan Marie Ramadhan pada hari Sunday, April 29, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 9 komentar: di postingan Cara Membuat Artikel Populer Lebih Menarik