Cara Membuat Widget Popular Post Bergerak

Cara Membuat Widget Popular Post Bergerak Di Blog - Kali ini saya akan membahas tentang Widget Popular Post yang sudah dimodifikasi menjadi bergerak. Widget ini juga lebih efektif dan tidak memakan banyak tempat.

Widget ini akan membuat loading blog sobat sedikit lebih lambat dari biasanya. Popular Post ini juga bisa menggunakan Thumbnail atau Tidak, itu tergantung selera sobat.



Langsung saya To The Point, di bawah ini ada Tutorial untuk membuat widgetnya.

#1. Membuat Widget Popular Post

• Login ke Blogger
• Klik Tata Letak => Tambah Gadget => Entri Populer

#2. Modifikasi Widget Popular Post

• Pada Tata Letak, Klik Tambah Gadget => Edit HTML/Javascript
• Masukkan Kode berikut

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

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
 
}

#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() 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://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

Nah, itu adalah Tutorial untuk Membuat Widget Popular Post Bergerak. Semoga Tutorial ini bisa Bermanfaat untuk sobat.