Cara Membuat Slideshow Untuk Posting Populer Blog

Bismillah, Alhamdulillah
Sekarang saya membuat widget Popular Post  untuk blogger Menggunakan Slide dari Trik CSS.

Anda dapat melihat demo dari link di bawah ini

Demo

Login ke Dashboard Blogger dan arahkan ke Desaign - Page Element
Klik "Tambah Gadget" dan Pilih "Popular Posts" (Jika sudah ada gadget ini lewati langkah ini)
Setelah Anda memiliki gadget Popular Post "Tambah Gadget" lagi dan pilih "HTML / Javascript"
Masukkan semua di bawah script untuk "Konten" HTML / Javascript Gadget
Jika Anda telah memiliki  jQuery di template anda silahkan hapus dari script saya
Selesai- sekarang  posting populer Anda dengan animasi 

 

 

<style> * { margin: 0; padding: 0; } body { font: 11px Helvetica, Arial, sans-serif; } #wrapper { width: 800px; margin: 60px auto; } #intro { padding-bottom: 10px; } #slider { width: 800px; margin: 0 auto; position: relative; border: 10px solid #ccc; } .scroll { overflow: hidden; width: 800px; margin: 0 auto; position: relative; } .scrollContainer { position: relative; } .scrollContainer div.panel { padding: 10px; width: 274px; height: 318px; } #left-shadow { position: absolute; top: 0; left: 0; width: 12px; bottom: 0; background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y; } #right-shadow { position: absolute; top: 0; right: 0; width: 12px; bottom: 0; background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y; } .inside { padding: 10px; border: 1px solid #999; } .inside img { display: block; border: 1px solid #666; margin: 0 0 10px 0; width: 250px; } .inside h2 { font-weight: normal; color: #111; font-size: 16px; margin: 0 0 8px 0; } .inside p { font-size: 11px; color: #ccc; } a { color: #999; text-decoration: none; border-bottom: 1px dotted #ccc; } a:hover { border-bottom: 1px solid #999; } .scrollButtons { position: absolute; top: 127px; cursor: pointer; } .scrollButtons.left { left: -45px; } .scrollButtons.right { right: -45px; } .hide { display: none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

Selesai... silahkan mencoba..!!

Artikel Terkait Lainnya :