Memasang Slide Carousel di Blogger

langsung saja cara membuatnya

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. kalian cari kode berikut :

]]></b:skin>

4. kalo udah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut:

 /*----------------------------------------------------
{--------}  carousel slider  {--------}
----------------------------------------------------*/
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;  /*sesuaikan dengan template*/
background:#000000;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 980px;
height: 155px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 2px;
width: 106px;
}

.stepcarousel .panel img{
float: left;
background:#666666;
margin: 0px;
padding:2px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#000000;
}

]]></b:skin>

<script src='http://sites.google.com/site/anchamanproject/CopyjQuery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anchamanproject/CopyStepCarouselViewer.js' type='text/javascript'/>

5. Klik Simpan deh.

Buat nambahin ke widgetnya. langkah-langkahnya :

1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript.
3. Copy Paste kode berikut :

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://sites.google.com/site/anchamanproject/Left-Arrow.png', 30, 60], rightnav: ['http://sites.google.com/site/anchamanproject/Right-Arrow.png', -65, 60]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- Ganti link dengan link kalian -->

<div class="panel">
<a href="URL-ANDA" title="TITLE"> <img src="URL-GAMBAR" width="100" height=" 148" title="TITLE"/></a>
</div>


<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/11/explodemon.html" title="explodemon"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTuxVgspsaZh0eVJ44rMquNTysgPumT9hNIln8oIFJfVg7GB3wvzdE8dwfs-klIosdH83PO29ySso9sjWX_y3VWLMoq2t_iCiyCnBjYf756ocaaxaiFra__U7-M-5eTVt-UTvdkMtsNcZP/s400/t-expdmon.jpg" width="100" height=" 148" title="explodemon"/></a>
</div>

<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/10/pro-evolution-soccer-2012-reloaded.html" title="PES2012"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3aTUhI8rMwVyW1gmaItetMQwLvj7PEIYlt93R2ok8QhEAe4FZNIwlOdQVMw_W81AiepOcu_Gve2rEGK58ym7aHMSZjd7xBInne1DaiQiVKBMoZgIXIJPRkoJYZAjWo9XP07kK6jOhcQOX/s400/2mOvk.jpg" width="100" height=" 148" title="PES2012"/></a>
</div>

<!-- copas code diatas untuk memperbanyak tampilan -->
</div>
</div>

 4. Klik Simpan.

nb:

• widget ini biasanya dipasang di header.kalo susah pasang diheader.pasang atas posting aja,sesuaikan dengan lebar (width) template anda
• untuk menghilangkan fungsi otomatis slider,autostep diganti jadi false,cth : autostep: {enable:false, moveby:1, pause:3000},
• untuk ukuran gambar tampilan jg bs dirubah. pada gadget/widget sesuaikanlah width dan heigth.
• selamat mencoba.trial n error ..............semoga bermanfaat. hehehehe