Membuat recent post slide show kesamping

Salah satu plugins dari Jquery yang terkenal adalah Roundabout, di mana plugins ini membuat tiga content kita bisa slider secara otomatis. Plugins ini mengubah struktur elemen HTML statis menjadi berputar macam piring putar.

Nah, dalam kesempatan kali ini aku hendak membagikan kepada kalian bagaimana caranya plugins Roundabout ini compatible di template blogspot.

Tampilannya nanti seperti di bawah ini.

Roundabout Slider - VeroMons.com

1. Langkah 1 : membenamkan CSS Style

Login ke Blogger Dashboard dan navigate ke Layout > Edit Html
Klik kotak "checkbox" Expand Widget Templates, dan temukan kode berikut: ]]></b:skin>
Di atasnya sisipkan kode di bawah ini:

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

2. Langkah 2 : Membenamkan kode Javascript

Cari kode berikut: </body>
Benamkan kode di bawah ini sebelum kode di atas.

<!-- 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>

3. Langkah 3 : Membenamkan kode di Widget / Gadget

Design -> klik “Add a Gadget” -> HTML/JavaScript.

<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://niatingsun.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>