Cara membuat widget popular post berjalan

Tidak Ada Tanggapan

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 :

1. Masuk ke Blog
2. Pilih Rancangan
3. Tambah Gadget "Entri Popular" ( Jika gadget entri popular/ popular post sudah ) langsung saja menuju>
4. Tambah Gadget "HTML java scrip"
5. Copy kode di bawah ini dan paste pada gadget HTML java scrip tadi

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

Bottom of Form

Selanjutnya simpan template dan lihat hasilnya.
Demikian cara membuat popular post berjalan untuk menambah tampilan blog anda lebih menarik