Widget Popular Post

Widget Popular Posts Dengan Efek Animasi Spy

Widget Popular posts ini sama dengan widget recent posts
Nah jika anda tertarik untuk membuat widget popular posts dengan animasi spy, silahkan ikuti tahap pembuatannya:

• Login ke akun anda
• Pada menu tata letak >> tambahkan gadget popular posts seperti image berikut:

• Kemudian klik tambah gadget lagi >> pilih HTML/JavaScript >> Salin dan tempel kode berikut pada form yang tampil

  <style type="text/css" media="screen">
  #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>

• Sehingga posisi widget seperti image atau screen shoot berikut;

• Simpan dan lihat hasilnya pada blog anda!

Demikian tutorial menambhakan widget popular posts dengan efek animasi spy pada blog, Semoga bermanfaat.
Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

• Widget Popular Posts Dengan Efek Marquee
• Widget Popular Posts Dengan Efek Spinning dan Zooming
• Widget Popular Posts Dengan Efek Border dan Background Color

Selamat berkreasi!

Tentang Penulis

SISWONO. Adalah Operator Sekolah di Kecamatan Kroya. Semua tulisan disini berdasarkan pengalaman pribadi dan juga sharing dari blog lain. Maaf jika ada Kesalahan Dalam Menulis Artikel Mohon Di Maklumi.
Follow aku di Twitter, Facebook atau di Halaman FB

Posted in: SCRIPT