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

Terima kasih atas komentar anda

Related Posts with Thumbnails

Menu Blog Ini

Buka Semua | Tutup Semua

Dalam Proses, Mohon Tunggu
Sponsored By :Satpol Temanggung.

Info Satpol

Posting Gratis Di Sini


Nama
Email
Judul
Tentang
Kategori
Gambar
Isi
Image Verification
captcha
Please enter the text from the image:
[ Refresh Image ] [ What's This? ]

Powered byEMF Email Form

INSPIRASI

Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service
 
" SILAHKAN KIRIM PESAN MAUPUN KOMENTAR ANDA, AKAN KAMI HARGAI TULISAN ANDA, TERIMA KASIH "

Ikuti beritaku

Kembali lagi ke atas