Recent post sangat berfungsi agar pengunjung dapat mengetahui, postingan-postingan terbaru atau artikel yang terakhir kita posting, Biasanya recentpost akan muncul secara vertikal , nah kali ini kita akan membahas cara membuat recent post yang unik yaitu Recent post slide show kesamping(horizontal).
Ikuti aja cara-cara berikut, artikel ini saya dapat dari Abu-farhan.com.
Langkah Pertama dan yang paling utama
- Masuk akun blogger lalu pilih menu Rancangan > Edit Html
- Jangann lupa klik ‘Expand Widget Templates’
- Cari kode ]]></b:skin>
Letakkan kode dibawah ini diatas kode ]]></b:skin
/* START -------------------------------------------------------------------- Roundabout Content Slider using jQuery for blogger By http://www.abu-farhan.com -------------------------------------------------------------------- Roundabout */#featured {margin:10px 0 30px 0;} #folio_scroller_container {margin-top:35px; margin-bottom:40px; height:auto;} #folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;} .roundabout-holder {list-style:none; width:400px; height:250px; margin:0px auto;} .roundabout-moveable-item {font-size:12px!important; /* Resize Image*/ height:180px; width:350px; /*-------------*/ cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;} .roundabout-moveable-item img {height:100%; width:100%; background-color:#FFFFFF; margin:0;} .roundabout-in-focus {cursor:auto;} .roundabout-in-focus:hover {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;} .roundabout-holder span {display:none; font-size:12px;} .roundabout-in-focus:hover span {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; } .roundabout a:active, .roundabout a:focus, .roundabout a:visited {outline:none; text-decoration:none;} .roundabou li {margin:0} a img {border:none; outline:0;} /* END -------------------------------------------------------------------- Roundabout Content Slider using jQuery By http://www.abu-farhan.com -------------------------------------------------------------------- Roundabout */
Langkah ke 2
1. Cari kode </body>
2. Letakkan kode dibawah ini diatas kode </body>
<!-- jQuery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/> <script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jQuery(document).ready(function($) { var interval; $('#featured ul') .roundabout({ duration: 600 } ) .hover( function() { // oh no, it's the cops! clearInterval(interval); }, function() { // false alarm: PARTY! interval = startAutoPlay(); } ); // let's get this party started interval = startAutoPlay(); }); function startAutoPlay() { return setInterval(function() { jQuery('#featured ul').roundabout_animateToNextChild(); }, 5000); } </script>
Langkah ke 3
Masuk menu Rancangan -> Elemen laman-> “Add a Gadget” -> HTML/JavaScript .
Kemudian masukkan kode dibawah ini :
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript"> var numposts_gal = 6; var random_posts = false; </script> <script src="http://rizkyguna1blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
*Catatan
Gani tulisan http://rizkyguna1blogspot.com sesuai alamat URL anda
Semoga berhasil...
11 komentar:
terima kasih banyak infonya kawan, udah seminggu saya googling kesana kemari mencari trik seperti ini, thanks......
Di aku ko gak bisa y?
apa ada setting khusus di pengaturan feed?
saya sagant berterimakasih sekali gan, akhirnya sayembara saya berbuah hasil, cari sana-sini yg pas utk blog saya, dan yg ini "klop" timkasih gan
nggak jalan scriptnya
MANTAP SOOOB.. KUNJUNGAN NYA BALIK ( DITUNGGU)
mantapppppp, kunjungan baliknya gan http://estu-djati.blogspot.com
ok thx sob triknya. :)
mantap mas
jelek banget, norak widget nya
patut dicoba
ga work gan :/
Posting Komentar
Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)