Cara membuat Widget Popular Post dengan Animasi Atau Bergerak

Sudah biasa membuat Widget Popular post dengan Widget biasa yang anda buat. bagaimana kalau Widget Popular Post menjadi beranimasi atau Bergerak. Widget Popular Post beranimasi juga bermanfaat agar tidak memakan tempat. Bagaimana caranya?, Berikut Caranya:

• Silahkan Masuk ke blogger anda.
• Setelah Masuk, Klik Tata Letak, Jika sudah menambahkan Widget Pupolar Post, dan Jika Belum silahkan untuk menambahkannya. Setelah menambahkan, Add Gadget HTML. Gambar:(1)

                                                                  Gambar:(1)

• Masukan Kode Berikut ini: Gambar:(2)

<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>

                                                                  Gambar:(2)                        

• Setelah memasukan, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG