Monday, 17 August 2015

Cara Membuat Popular Post Bergerak Dengan Mudah Dan Bagus

Kali ini Saya akan Memberikan Tips Cara membuat Popular Post Bergerak Kebawah  Dengan Mudah dan bagus.
Popular post merupakan Artikel yang sering di baca pada blogger. sudah menjadi tradisi popular post ini selalu di pasang nya di kanan atau dikiri dibawah sebuah postingan sesuai keinginan para blogger.
Diantara fariasi widget popular post yang sering ditampilkan adalah dengan memasang Kode HTML/javascript agar popular post bisa berjalan kebawah seperti blog saya ini lihat saja di sebelah kanan mu. hehe bagus kan.
hal itu akan menjadi blog kita lebih menarik di pandang nya oleh para pengunjung.



Cara membuat agar widget popular berjalan kebawah ini cukup mudah bro . Cara yang saya terapkan ini hanya dengan menanmbah kode HTML tanpa mengedit template yang cukup ribet untuk pengolahannya.

langsung saja ini caranya :
  • Masuk Ke Blog 
  • Pilih Rancangan
  • Tambah Gadget HTML/Javascript
  • Copas Kode Dibawah Ini

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


  • Kemudian Simpan Selesai

Itu cara Membuat Popular Post Bergerak Dengan Mudah Dan bagus semoga Bermanfaat ..


bagikan ke :
twitter.png facebook.png google-plus.png linkedin.png yahoo.png

No comments:

Post a Comment