- LogIn ke akun blogger.
- Setelah masuk dasbor, Pilih Rancangan/Design.
- Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu �edit elemen�.
- Beri centang pada kotak �Expand Widget Templates�.
- Tekan CTRL + F di keyboard, masukkan kata kunci ]]></b:skin> ke dalam kotak find.
- Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]></b:skin>.
#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;}
- Selanjutnya carilah kode </body>. Copy Script code berikut dan letakkan tepat di atas kode </body>.
<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>
- Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu �Rancangan�, atau dalam blog versi English �Design�. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda �+� pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.
<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://voa-junior.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
- Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.