Cara Paling Mudah Buat Widget Artikel Terpopuler dengan Animasi ( Cara 2 )

Masih seputar upaya mempercantik blog, salah satunya dengan cara  memasang widget Artikel Terpopular seperti pada posting cara buat widget argtikel terpopuler yang lalu. Namun cara yang dilakukan lumayan ribet karena harus mengedit template kita. Nah kali ini caranya sangat mudah karena tidak perlu edit template yaitu cukup menambahkan script dari Kang Rohman pada add gaget.  Berikut langkah2 membuatnya :

• Login ke Blogger Dasbor - Page Element
• Tambahkan 1 buah widget Entri Popular pada salah satu sidebar anda dan save (lihat gambar di bawah)

• Setelah anda menambahkan widget Entri Popular lalu klik "Add Gadget" lagi dan pilih "HTML/Javascript"
• Letakan semua script di bawah ini ke dalam "Content" dari HTML/Javascript 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>
<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"></script>

•  Kemudian klik save, dan aturlah posisi gadget tersebut tepat diatas gadget popular post yang sudah dibuat tadi dengan cara mendrag gadgetnya seperti pada gambar dibawah ini kemudian klik save.

 


Selesai dech, mudahkan??

Selamat mencoba dech.

Sumber Kang Rohman