Membuat Image Slider Carousel di Blog

Kali ini saya bikin postingan Keren neh... "Bikin Image Slider". Image slider adalah bla.. bla.. blah... males njelasinnya,, kalo pengen tau apa itu Image slidder coba deh lihat di halaman blog saya,, keren kan.?... tenang aja tu gambarnya bisa diubah sesuka otak anda,, saya dapet Trik ini dari http://lorongilmu.blogspot.com/ 
Langsung aja deh.....


Langkah 1
Login ke Blogger 


Langkah 2
Klik Rancangan > Elemen Laman > Tambah Gaget


Langkah 3
Copy Paste ko dibawah ini.:

<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: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJ6fyvY2lu-HUPoqYEFGa4m1GCR8LlHLoBYrzYsqG2xVm3d0liE2l80a8w9Om1gCRDJh146nCnp2-A3VkKxmuumGLRDcgfG98KmBqXcQVi-Nbsk8E-NNPcCtgbdJKArUmglhY-GSGj-Oq/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHEIJyaWbYluX-hUrS4thg7UlqaHoexoN_xXWThw5D_cdXFV7EC_-H96ZzbMgT8Xnns4u4pT3eP2vM26NSeXtJ7XpYyCO1dogthhaMrNCKUhPqxVWaekRafNinISwAaELPQO8-8ncm4h39/', -55, 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="http://lorongilmu.blogspot.com/2011/06/free-ebook-wireless-kungfu-networking.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ08op2I_n2o2yPQFVmVenpioz0FVkAk7-A0RVx-viAdlv5wtizajRf_D7rOIMpxY4Fl5XVsZ4Z0mmvGusZIZPb-0vqD3yz5o-TnHQnE5NsaqunPaYgxYK5tyFAriKghlQMqzb4N6RdyE/s1600/1.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-1.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_GBiv9_iRQEvi3Qcszds-tm8nQ-rYZc0emXvK9faeM5nkvSK9LC0hfjSZcltNuV6Myv38Xn_eHay7AgYjt2Tv6uU5DExFNc-K4MuQCN1hnZimGZ5cJ-uX5oghbmgCpVJca9TLe-tfzY/s320/2.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-2.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4ietPpgBPKRE9m3KsXlPJCoQbggR_9nLkwLkRdRk7xSxQiQtqri14ZoheObl8h49AaauNk2EgFhEppHRKGQLKJBt6jYwGEnZUelIC4Jwak1BwloyXEtaryBCdhR37Bnz_iYBIaj7JaQ/s320/3.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-pembobol-kartu-kredit.html">
<img src="http://3.bp.blogspot.com/-BNod3fYuxhk/TezHfbaFRtI/AAAAAAAAAS0/kGF49ZtSjkU/s320/4.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-panduan-lengkap-memakai.html">
<img src="http://3.bp.blogspot.com/-BzeCtYoUfhE/TezWWgKA3HI/AAAAAAAAATA/LfY0cT86OO8/s320/6.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-chip-spesial-networking.html">
<img src="http://1.bp.blogspot.com/-CJtJtGc1Sfs/TezdIhq-ScI/AAAAAAAAATE/NuiexuEifmg/s320/7.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-tutorial-windows-server-2003.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsPWUhghKVmld2plnuNFCXAQYayWDvoymd1ISdnio4KOudTLLR0JZmNZxiI9lYfk7CnA7QbspCvpnF1ZO4Tn6AeGxwqxrLHU8meTHfce117jqDlbuXKcTCQjxQbZ64OoWzi4ARaOYSv0/s1600/8.jpeg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-beginning-microsoft-visual.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eCJ5vOM-qMc7-mIDeH_ybPdJfzgRj51TBBBucSvZWzRrg_g-IUKGVmNtfLX3mXAPLhW3iORrE0azXzDY6ZevSMM3REpxNe6fpRJ42hDx5xaeIBfh0CD9_LuoTkvy_VCBt1lN67bq8bI/s1600/8.jpg" width="100px" height="135px" /></a>
</div>


</div>
</div>


Langkah 4
Klik Simpan..  


Langkah 5
Klik edit HTML, Lalu cari kode ]]></b:skin>, Lalu tambahkan kode dibawah ini tepat diatas kode  ]]></b:skin> :


.carousel{
         float:left;
         margin: 0;
         padding:0px;
         }

 .carousel .widget {
         width: 720px;
         background:#c4d5ec;
         margin: 0;
         padding:0;
 }

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

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

 .stepcarousel .panel{
      float: left;
      overflow: hidden;
      margin: 5px 20px 5px 0px;
      width: 140px;
 }

 .stepcarousel .panel img{
      float: left;
      background:#940f04;
      margin: 5px;
      padding:5px;
      border:1px solid #ccc;
 }

 .stepcarousel .panel img:hover{
      background:#ffffff;
      }
.quickedit{display:none}

#under_header{
opacity: 100;

 }


Langkah 6
Jika sudah,  Copy kode dibawah ini tepat di bawah kode ]]></b:skin>


<script src='http://lorong-ilmu.googlecode.com/files/gallery1.js' type='text/javascript'/>
<script src='http://lorong-ilmu.googlecode.com/files/gallery2.js' type='text/javascript'/>

Langkah 7
Klik save. dan lihat hasilnya.... :)


Keterangan:
Ganti kode berwarna Merah dengan link gambar anda
Dan ganti kode berwana Biru dengan Link yang bersangkutan dengan gambar




Selamat mencoba.... :)