[Tutorial] Cara membuat popular post bergerak dari atas ke bawah

-[Tutorial]  Cara membuat popular post bergerak dari atas ke bawah

Salam sukses untuk sobat-sobat sekalian.
Semoga tetap menjaga harapan dan cita-citan untuk menjadikan hidup lebih bermakna. :D

Dalam kesempatan kali ini, ana ingin berbagi Tips mengenai Cara membuat popular post bergerak dari atas ke bawah. Tips ini sangat manjur untuk menarik pembaca dalam membaca artikelnya. Karena dapat memberikan efek yang berbeda dari biasanya sekaligus memberitahu secara tidak langsung kepada pembaca  bahwa artikel tersebut merupakan artikel yang sering dibaca. Lihat contoh pada Homepage blog ini. :D
Tertarik untuk memasangnya??

Langsung aja bersama-sama kita mengulasnya mengenai Cara membuat popular post bergerak dari atas ke bawah.





1. Seperti biasa Logni ke dasbor sobat.
2. Pilih TATA LETAK 
3.Tambahkan Gedget "Entri Populer"

entri-popular

4. Tambahkan Gedget "HTML Java Script"

postingan yang 
sering dibaca


5. Copy kode dibawah ini pada Gadget  "HTML Java Script" yang ditambahkan 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>

=================================
6. Simpan perubahannya dan lihat hasilnya.

Demikian Cara membuat popular post bergerak dari atas ke bawah semoga artikel ini dapat bermanfaat dan berguna dalam mempercantik isi dari blog sobat.
Semoga bermanfaat. :D

Rujukan : Catatan bang Jefri.

Salam Sukses....

Share this

Related Posts

Previous
Next Post »

5 comments

Write comments
Anonim
20 November 2012 01.42 delete

Thanks gan,, akan saya coba saya terapkan di blog sayaaaa.......di tuggu juga di http://moza-xo.blogspot.com

Reply
avatar
11 Maret 2013 05.20 delete

sob pengen perkecil ukuran lebar widget itu gimana !!??? template blog ane gak bisa ubah ukurannya

Reply
avatar
27 April 2013 06.08 delete

terima kasih artikelnya sangat bermanfaat buat saya yang pemula ini :)

Reply
avatar
30 April 2013 06.54 delete

ok,,,thanks kawan buat tutorial nya...

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon