Membuat efek Slider di Popular Post

Wah sudah lama ni nggak ngeposting tentang tutorial blogging. Nah kali ini saya sempet-sempetin dah buat posting tutorial blogging. Untuk yang saya posting kali ini adalah Cara Pasang efek Slider di Popular Pos, dan untuk cara pasangnya pun sangat mudah mau tau caraya?Ikuti saja langkah-langkahnya di bawah ini.

Masuk ke Blogger Dashboard dan Pilih Design - Page Elements.
Klik Add Gadget dan pilih Popular Posts jumlah popular postingan harus lebih dari 4 (Jika sudah ada gadget ini jangan masukan lagi).
Setelah kamu mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih HTML/Javascript
Letakan semua script di bawah ke dalam Content dari Gadget HTML/Javascript.
Selesai, semua otomatis menjadi Popular post mempunyai animasi slider.

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

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) 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://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

-Silahkan di coba jika ada kesuliatan bisa komentar dibawah ini.!

Membuat efek Slider di Popular Post

Selasa, 23 Oktober 2012 | 0 komentar

Recent Post

Recent Category