readbud - get paid to read and rate articles
Profile Facebook Twitter
contact
Google Yahoo
bCOMStudio

Minggu, 14 Agustus 2011

blog tutorial

blog tutorial


Popular Post Widget Dengan Animasi

Posted: 14 Aug 2011 01:52 AM PDT

Bismillah, Alhamdulillah. Sudah lama saya sebenarnya ingin jadi Guest Author di Blognya Kang Rohman, baru kali ini ada kesempatan dan diperbolehkan Kang Rohman. Widget kali ini adalah Popular Post Dengan Animasi. Widget sejenis ini sudah lama pernah saya bikin Popular post for blogger menggunakan Json Tetapi Sekarang Blogger telah membuat popular post dari Blogger Stats . Sekarang saya membuat Popular Post Untuk Blogger dengan animasi. Widget ini menggunakan trick saya sebelumnya Recent Post dengan Animasi Menggunakan "simple spy".





Silahkan lihat Demo
Script ini sangat mudah tinggal masukkan Script di bawah ke dalam "Gadget" Blogger
  • Masuk ke Blogger Dashboard dan Pilih Design - Page Elements
  • Klik "Add Gadget" dan pilih "Popular Posts" jumlah popular postingan harus lebih banyak dari 4 (Jika sudah ada gadget ini jangan masukan lagi)
  • Setelah anda mempunyai Popular Post Gadget kemudian klik "Add Gadget" lagi dan pilih "HTML/Javascript"
  • Letakan semua script di bawah ke dalam "Content" dari HTML/Javascript Gadget
  • Selesai, semua otomatis menjadi Popular post mempunyai animasi
Explanation of Popular Post with Animation
<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> 
Jangan copy postingan ini, ini original dalam bahasa inggirs pada New Popular Post for Blogger With Animation


0 komentar:

Posting Komentar

face2face - Facebook Chat!