Trik buat entri populer bergerak

Pasti akan terlihat lebih menarik apabila widget entri populer di blog sobat start-xp terlihat bergerak secara bergantian, start-xp kali ini akan mengulas triknya dan untuk sobat yang pengen nyobain trik ini silakan langsung di praktekin aja ya ..heheheh

1. login ke blogger dan masuk ke menu tatak letak
2. buat 2 buah widget, yang pertama buat widget entri populer dan yang kedua widget html/javascript
                                                                       (lihat gambar)

 

3. pada kolom HTML/javascript masukan kode yang start-xp sediakan dibawah ini 

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

#PopularPosts1 {
overflow:hidden;
margin-top:2px;
padding:0px 0px;
height:310px;
border-bottom: 1px solid #eeeeee;
}
#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:280px;
padding: 5px 5px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:75px;
overflow: hidden;
background:none;
}
#PopularPosts1 li .item-title {
    color:#ffffff;
    font-size:12px;
    margin-bottom: 2px;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#fffff;
font-size:12px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:none;
border:0;
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:12px;
color:#ffffff;
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: 0px;
    -moz-border-radius: 0px;
}
.tags span,
.tags a {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}
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>

4. Simpan dan lihat hasilnya :)