Widget Popular Posts Dengan Efek Animasi Spy -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Widget Popular Posts Dengan Efek Animasi Spy, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger JQuery, Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Popular Posts, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Widget Popular Posts Dengan Efek Animasi Spy
link : Widget Popular Posts Dengan Efek Animasi Spy
Gambar dibawah ini

Widget Popular Posts Dengan Efek Animasi Spy

Sebelumnya saya pernah mengetengahkan tutorial cara membuat widget recent posts dengan animasi spy, kali ini kita akan menambahkan animasi yang sama tapi pada widget yang berbeda yaitu pada widget popular posts.

Widget Popular posts ini sama dengan widget recent posts yang terdahulu, menggunakan script JQuery dan resource dari master blogger indonesia Abu Farhan.

Untuk lebih jelasnya silahkan lihat demo widget popular posts dengan efek animasi spy ini dengan mengklik button berikut:

View Demo  

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!

Demikianlah Artikel Widget Popular Posts Dengan Efek Animasi Spy

Sekianlah artikel Widget Popular Posts Dengan Efek Animasi Spy kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Widget Popular Posts Dengan Efek Animasi Spy dengan alamat link https://trikmitos.blogspot.com/2012/11/widget-popular-posts-dengan-efek.html