Cara Membuat Popular Post Bergerak Ke Bawah

T, Trik Blogger

Saturday, 8 June 2013

2 Komentar

Nah, untuk kesempatan kali ini saya akan berbagi sebuah Tutorial blog tentang "Cara Membuat Popular post Bergerak ke bawah | Tutorial Blog"  .
dari judulnya ajah pasti sudah tau bukan dengan penggunaan tutorial yang satu ini. yakni supaya Postingan yang populer atau yang sering di kunjungi bisa lebih menghemat tempat. karena akan bergerak ke bawah. sobat bisa melihat contohnya di blog saya ini.

Ikuti langkah-langkah di bawah ini :
1. Pertama sobat harus log-in dulu ke blog
2. kalau sobat sudah log-in. lalu masuk ke menu Tata letak.
3. lalu Click Add Gadget , lalu sobat pilih Entri Populer 

4. Kemudian Pilih kembali Add Gadget, dan sekarang kita pilih HTML/JavaScript
5. Kemudian Copas ( Copy Paste ) kode di bawah ini

<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
}
#PopularPosts1 ul {
width:340px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
width:340px;
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>

6.Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya

KALAU HASILNYA BERBEDA SAMA PUNYA SAYA KARNA SAYA DAH SEDIKIT MERUBAH KODE DI ATAS......

::Semoga Bermanfaat dan Selamat Mencoba::

Sumber ; http://amirfcblog.blogspot.com/2013/04/cara-membuat-popular-post-bergerak-ke.html