Cara Membuat Recent Post dengan Slide Bundaran

Sebelum nya sudah Saya jelaskan Bagaimana Cara Membuat Recent Post Berdasarkan Label dan Thumbnail . Kali ini masih berhubungan dengan Recent Post, tapi tampilan slide nya berbentuk bundaran atau berputar secara otomatis.

Ok, sekarang mari Ikuti Langkah-langkah Cara Membuat Recent Post dengan Slide Bundaran seperti yang Saya jelaskan di bawah ini:

Langkah 1:

1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
3. Jangann lupa klik ‘Expand Widget Templates’
4. Cari kode ]]></b:skin>

Letakkan kode dibawah ini diatas langkah Kode pada langkah no.4

/* START
--------------------------------------------------------------------
Roundabout Content Slider using jQuery for blogger
By http://ahmad-roni.blogspot.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://ahmad-roni.blogspot.com
--------------------------------------------------------------------
Roundabout
*/

Langkah 2:
Cari kode </body>
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 3:
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://ahmad-roni.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Note: Ganti tulisan warna orange dengan yang Anda inginkan.

Langkah 4:
Semoga Berhasil dan bermamfaat...


Sumber: www.abu-farhan.com