CARA MEMBUAT ENTRI PUPULER BERGERAK DI BLOGSPOT

Sebagai gambaran tentang Entri Populer blog dengan animasi bergerak dapat dilihat pada blog saya disebelah kanan. Berikut cara pembuatannya.

1. Login ke akun Blogger atau Blogspot lalu masuk ke menu Tata Letak.

2. Sediakan 2 (dua) buah Widget yaitu widget Entri Populer dan widget HTML/JavaScript seperti pada gambar di bawah ini.

3. Widget Entri Populer dapat Anda tambahkan dengan cara klik Tambah Gadget pilih Entri Populer dan ubah settingannya seperti gambar berikut.

4. Widget HTML/JavaScript Anda tambahkan pula dengan cara klik Tambah Gadget lalu pilih HTML/JavaScript kemudian masukkan script di bawah ini pada kotak Konten lihat gambar di bawah.

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

#PopularPosts1 {

overflow:hidden;

margin-top:2px;

padding:0px 0px;

height:400px;

}

#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 5px 0px;

list-style-type:none;

float:none;

height:80px;

overflow: hidden;

background:none;

border:1px solid #ddd;

}

#PopularPosts1 li .item-title {

    color:#A5A9AB;

    font-size:12px;

    margin-bottom:2px;

}

#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:12px;

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"></scrip 

5. Kemudian klik tombol Save, lalu kamu lihat blognya.

Demikian semoga bermanfaat.

Share: