Membuat Widget Image Slide Otomatis pada Blog

Bagi anda yang menyukai hal-hal yang berbau SLIDER, anda juga bisa coba cara yang satu ini. Caranya lumayan membuat pusing bagi para NEWBIE seperti kita. Tapi tenang saja, selama anda telaten, nanti hasilnya akan 100%. InsyaAllah. =P


Gambar di atas adalah contoh sebagian yang saya ambil. Di gambar itu ada letak icon panah yang ketika anda klik, langsung menggeser ke gambar yang lain. Dan enaknya, anda bisa menambah jumlah gambar/image yang mau anda pasang. Di samping itu, walaupun anda tidak mengklik icon panahnya, gambar akan bergerak sendiri (Otomatis). Nah, apakah anda tertarik? Jika iya, mari baca tutorialnya di sini:

1. Login ke akun blog anda
2. Masuk ke Rancangan
3. Tambahkan GADGET HTML/Javascript
4. Masukkan script di bawah ini ke dalam GADGET
<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://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png', 30, 60 ], rightnav: ['http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png', -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="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>


<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>
Kode berwarna MERAH ganti dengan nama URL yang anda tuju. Kode berwarna UNGU ganti dengan URL gambar anda. Dan kode yang berwarna BIRU ganti dengan tulisan sesuai dengan kemauan anda, misalnya "Klik Di Sini Untuk Membuka" atau sebagainya.

5. Setelah itu SAVE GADGET, Eiiiiitttss!!! Jangan lega dulu! Masih ada lagi tutornya. Hehe.  Masuk ke EDIT HTML.
6. Gunakan Ctrl-F untuk menemukan kode ]]></b:skin>
7. Jika sudah ketemu, masukkan kode di bawah ini di atas kode nomer 6:
 .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;

 }
Kode-kode anga yang berwarna MERAH bisa anda ubah sesuai dengan ukuran blog anda.

8. Sabar ya? Hehe. Masih ada kode lagi nih. Tambahkan kode di bawah ini di bawah kode nomer 6:
<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'/>

9. Nah, jika sudah semuanya, SAVE TEMPLATE, lalu lihat hasilnya.

GOODLUCK

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.