Ilmu MUFA: Populer Post berjalan kebawah Code HTML Java Scrip

Popular post merupakan artikel yang sering dibaca pada sebuah blog. sudah menjadi tradisi popular post ini biasanya ditampilkan di sebelah kanan atau kiri atau di bawah sebuah postingan sesuai selera masing-masing. Diantara fariasi widget popular post yang sering ditampilkan adalah dengan memasang kode HTML/Java Scipt agar popular post bisa berjalan kebawah seperti pada blog saya ini. Hal ini tentu akan meambah tampilan blog kita menjadi lebih menarik.

cara membuat agar widget popular post berjalan ini cukup mudah. Cara yang saya terapkan ini hanya degan menambah kode HTML tanpa mengedit template yang cukup ribet pengolahannya.

Berikut caranya :

Masuk ke Blog

Pilih Rancangan

Tambah Gadget "Entri Popular" ( Jika gadget entri popular/ popular post sudah ) langsung saja menuju ketahap selanjutnya.

Tambah Gadget "HTML java scrip"

Copy kode di bawah ini dan paste pada gadget HTML java scrip tadi

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

#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://bangjefri-code.googlecode.com/files/popularpost.js" type="text/javascript"></script>

Selanjutnya simpan template dan lihat hasilnya.
Mudah bukan...
Selamat mencobanya...