Cara membuat Popular Post bergerak di Blog

Published by Byrdty Kamis, 14 Mei 2015

Cara membuat popular post bergerak di Blog

Cara mempercantik Blog dengan cara membuat Popular post bergerak di Blog

bayu-tutor.-Setelah kemarin saya membagikan cara membuat gambar membesar saat di arahkan cursor,kali ini saya akan membagikan cara membuat popular post bergerak atau berjalan di blog.Popular post atau bahasa Indonesianya Postingan populer ini merupakan salah satu widget untuk mempercantik blog.

Langsung saja ikuti cara nya di bawah ini.

1. Masuk ke Blog kalian dulu pastinya
2. Pilih situs mana yang akan di beri widget ini
3. Pilih Tata Letak di menu
4. Klik Tambahkan Gadget
5. Pilih HTML/JavaScript
6. Copy dan Pastekan di HTML/JavaScript di bagian Tata Letak

Kode.

<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>

Lalu tekan Simpan dan Lihat hasilnya.
Cukup sekian yang dapat saya bagikan,semoga bermanfaat.Apabila ada yang perlu ditanyakan Insyaallah saya akan membantu.