Cara Buat Popular Post Widget Bergerak

Blogger widget: macam mana cara nak buat popular post bergerak di sebelah bahagian sidebar kiri  atau kanan blog saudara (ianya bergerak dari atas ke bawah) ia kelihatan lebih dinamik dan menarik

Langkah 1. Login masuk akaun blogger, pilih  Dashboard > Layout > Add Gadget > Popular Posts seperti gambar di bawah :

Langkah 2.
Login masuk akaun blogger, selepas tu pilih 
Dashboard > Layout > Add Gadget > HTML/Javascript ,
selepas tu copy & paste semua kod di bawah pada HTML/Javascript,


***Nota penting : Sila rujuk gambarajah di atas.

<style type="text/css" media="screen">

#PopularPosts1 {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:400px;

}

#PopularPosts1 ul {

width:340px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#PopularPosts1 li {

width:340px;

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>

Langkah 3.
klik butang Save. 
O.K dah selesai, sekarang anda boleh preview blog untuk lihat hasilnya, selamat mencuba.

Follow BB di Google+ sekiranya anda mendapati tutorial ini membantu, dan jangan lupa share dengan rakan blogger yang lain, selamat mencuba.