Membuat Gallery Image Step carousel

Iseng iseng nulis tutorial ahhh..(sambil nunggu scanner bener lagi..baru deh bisa post design lagi..abis scannernya rusak(instalannya), sedangkan banyak design saya yang belum saya scan..hehe..gini jadinya..hehe), ok semua....hari ini aq posting tutorial tentang "image gallery step carousel viewer" yang aku adaptasikan dari dynamicdrive (sebuah website yang menyajikan css+js untuk web). Tutorial ini aq tulis dan aq coba setelah melihat blog athletes-sports.blogspot.com blog milik Gdpermana  yang dihiasi gallery step carousel di bagian atas postingannya, dan ternyata template yang dia pakai adalah template hasil kreasi Kang Rohman    jadi deh aq langsung manuju blog kang rohman dan download template serupa untuk melihat rahasia kode apa yang ada di balik gallery step carousel. dan setelah ditelusuri html template tersebut aq menemukan kode yang aneh yang biasanya tidak ada di html template standar dan ternyata kode itu adalah kode kode css+js milik dynamicdrive (langganan aq belajar css+js) langsung deh aq menuju web Dynamicdrive dan langsung menemukan kode yang aq cariii ( horreeee...akhirnya ketemu juga..ujung ujungnya dioper ke dynamicdrive juga...). sebenarnya Dynamicdrive sudah menjelaskan tutorial ini lengkap dan jelas dalam bahasa inggris, tapi kekurangan mereka yaitu tidak menjelaskan bagaimana caranya meyisipkan kode kode css+js tersebut ke dalam page script blog, jadi deh aq praktekkan di blogku dengan mata yang sudah  ngantuk(waktu itu saya buatnya malem jam 3an sekalian blogkamling). untuk membuat step carousel, template anda harus sudah ada widget/kolom persis dibawah header seperti template punyaku ini...caranya mudah berikut scriptnya :

1. login dulu ke blogger anda 
2. klik tata letak 
3. klik edit html 
4. klik "expand template widget"
5. Cari kode ]]></b:skin>. 
6. Copy paste kode berikut persis di atas kode  ]]></b:skin>.

.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}
.adscolumn .widget{
}

7. Lihat ke bagian bawah, lalu cari kode berikut :
 
<div id='main-wrapper'>

8. Copy paste kode berikut persis di atas kode <div id='main-wrapper'>

<b:section class='adscolumn' id='adscolumn' preferred='yes'/>

9. Klik tombol SIMPAN TEMPLATE

Ok..langkah diatas adalah langkah membuat elemen persis dibawah header, coba anda clik tata letak, lalu elemen halaman sudah adakah elemen halaman tersebut dibawah header yang nantinya jadi seperrti ini :

Nah yang dilingkari brush hitam itulah yang disebut elemen percis dibawah header..(maaf lingkarannya pletat pletot..hehe)
Ok sekarang lanjut,,sekarang kita mulai masuk untuk membuat step carousel, sekarang anda kembali ke edit html. cari kode  ]]></b:skin> kemudian paste kode css berikut ini diatas kode ]]></b:skin>

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

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

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

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

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

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

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

berikutnya kita langsung masuk ke kode javascriptnya,  sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.

jquery-1.2.6.pack.js  (klik kanan, open link in new tab)
stepcarousel.js    (klik kanan, open link in new tab)

nah, sudah lihat bagaimana kode javascriptnya..?, jangan dipikirkankan..!!!, copy ajah langsung lalu paste kode javascript tersebut diatas kode </head>

nah selesai sudah penyisipan kode di page html, kalau anda belum yakin jangan langsung save tuh kode...lihat dulu kebenarannya dengan mengklik "pratinjau", setelah yakin tidak ada kesalahan, baru anda langsung save.

eits,,belum selesai sobat,,,sekarang kita langsung menuju tata letak, lalu elemen halaman dan klik tambah gatdet di kolom elemen halaman dibawah header yang baru saja kita tambahkan, nih saya kasih lihat lagi gambarnya :
gimana..sudah jelas kan,,? nah lalu pilih html/javascript, kronologisnya gini nih..
  • Tata letak

  • Elemen halaman

  • Tambah gatget

  • Html/Javascript

  • lalu masukkan kode berikut 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: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.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">

    <!-- change the links with your own links -->

    <div class="panel">
    <a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-rumanian.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
    </div>


    <div class="panel">
    <a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-chinese.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_945981278l.jpg"/></a>
    </div>

    <div class="panel">
    <a href="http://fajardesign.blogspot.com/2008/10/vampire-hunter-eghyptian.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_401707626l.jpg"/></a>
    </div>

    <div class="panel">
    <a href="http://fajardesign.blogspot.com/2009/01/perempuan-solo.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_556499958l.jpg"/></a>
    </div>

    </div>
    </div>

  • perhatikan kode berwarna hijau dan biru diatas, untuk yang berwarna biru ganti dengan link gambar    anda..dan untuk gambar hijau ganti dengan link gambar yang menghubungkan gambar tersebut ke artikel yang anda tulis.

  • catatan: kode seperti dibawah ini bisa anda tambahkan sesuai selera anda 


  • <div class="panel">
    <a href="http://fajardesign.blogspot.com/2009/01/perempuan-solo.html"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_556499958l.jpg"/></a>
    </div>

  • (biasanya blog yang berisi kumpulan design, template, dan gallery gambar akan sangat membutuhkannya untuk menampung gambar mereka dalam satu gallery..seperti blogku ini..hehe)

  • ok sudah selesai simpan hasil pekerjaan anda dan lihat blog anda ...

  • sebenarnya widget ini bisa disimpan dimanapun selain di bawah header..namun pada umumnya widget ini disimpan tepat dibawah header...
    selamat mencoba..

    48 Responses so far.

    1. begitu caranya perlu dicoba juga nih mas, ntar kucoba diblog ku yang satu lagi khusus test template

    2. nice tutorial sob..
      thx banget uda bagi2 ilmunya.. :D :D

    3. gaban says:

      manstab bro
      keep posting

    4. Anonymous says:

      mantap sob!!

    5. kifni says:

      nice info sob..cuman blum mau pasang, tkut blognya berat...

    6. Q_XidiX says:

      Wah, sob... ini tutor yang keren abiss, tapi sayang... blogku bukan blog design... sorri ya nggak ku praktekin... Tapi yang jelas tutor ini jarang yang posting... kapan-kapan kalau buat blog design, nanti aku praktekin deh

    7. Unknown says:

      gua nggak ngerti pa sih..gallery image step....
      tersebut terangin dong.....abis baru sih..he...
      tengkiu....

    8. Jhoni20 says:

      sumpah brur saya gak ngerti bahasa HTML sampae sebegitunya.......tapi hasilnya keren tuh!?!?!?

      hahahaha jadi pengen deh!!!!!

    9. @ sosial seni budaya bisnis

      step carousel itu nama tutorial ini..hasilnya ya yang anda lihat di bagian atas template ini ( yang gallery design..) itu tuh yang jalan dan ada tombol ke kanan dan kekirinya

      hehe..

    10. reni says:

      Wa..., banyak banget yg harus dikerjakan.
      Bisa gak ya aku nyoba ??

    11. RiP666 says:

      wahh manteb bro...klo aku bingung mo pasang apa hehehe

    12. Roshita says:

      Wah...bagus nich...emmm...perlu dicoba

    13. hwaaaaaa... asiiiikk.. nah ini nih yg aku cari.. :D
      wah tengs bangets yak.. mudah2an bisa cepet aku bikin nih di blog aku..
      btw kalo gambarnya bannyakk apa ga tambah berat yak loading blog-na???
      tengkyu banget yah.. :)

    14. Haady says:

      Wah, keren nih postingan..
      Sukses ya..

    15. Tipspack says:

      Wah, keren... tapi lumayan panjang jalanya. Kebetulan kmaren saya baru dapet template baru yang mirip2 step crousel, tapi udah otomatis geraknya, sekalian ditambah postingan.
      Anyway, thanks buat triks nya. Akan dicoba segera... :)

    16. Tipspack says:

      Owya, di blog saya juga ada beberapa tips dan trik blog yang layak buat diterapkan. silahkan kunjungi saja blog saya. thanks...

    17. Risti says:

      apakah carosel akan membebani loading blog kita ? karena ada beberapa image yang diloading pada saat bersamaan.

    18. Anonymous says:

      bagus juga tampaknya...nanti lah tak coba ;)

    19. narti says:

      wah bagus nih, tp rada gaptek, ntar deh dicoba-coba. makasih sharingnya.

    20. HPK-UIN says:

      tips yang bagus sob...!!!!!btw,,,,
      bentrok nggak ma script yang smile icon ato yang lainnya..??

      kalo imagenya di taruh dalam postingan bisa gak sob...?????

    21. Tipsx mantap,.. entar saya coba praktekin...

    22. Unknown says:

      Yahuuud Tips ya sobat...nice post...

    23. andy says:

      panjang aja nih tutorialnya tp ky'a cool nih sob..tar dicoba...deh

    24. Mantab banget nih bang.....
      weeeh dapet inspirasi nih gw...

    25. d ! says:

      keren bgt nih bro....ntar sy coba

    26. fajar, saya mengedit page source saya pake dream weaver, apakah caranya sama dgn diatas ? :)

    27. Dwi says:

      manstabs.....banget....

    28. Unknown says:

      wah.....kali ini sahabat ngedesign blog nih..
      keren kawan

    29. good posting nih :) cuma apa ga bikin blognya jadi berat bro?

    30. Fajar design sudah makin luas saja nih topik nya sampai ke tutorial....hehhehe...

      Mantap sob...teruslah memposting sesuatu yang menarik tapi bisa dinikmati manfaatnya oleh orang banyak seperti tutorial ini

    31. Rantaro says:

      wow keren
      tengkyu udah sharing, coba dulu ah

    32. Unknown says:

      aku belum nyoba sih.....tapi cukup informatif.

    33. bening says:

      duh kok kaya'e ribet, tapi memberatkan kerja blogku nggak ya (jangan tanya dong praktekin langsung he he he..)
      nice info sob

    34. uchie says:

      Huaaaaaaaa..... ternayta ribet yack...

    35. Anonymous says:

      sangat bagus..tapi sedikit ribet...ntar perlu dicoba dilain template sobat.....tahnks atas nice postingnya....

    36. dendy says:

      makasih tutorialnya.. wah.. boleh nih diajarin tentang bahasa html. soalnya baru mulai melek nih..
      jadi kalau nyisipkan kode-kode ngak salah lagi..

      kalau yang sekarang, belum berani masukkan, :-) soalnya pasti tambah lama ngeditnya

    37. Jar ... maaf nih, baru dateng ... koneksi putus ... hampir sebulan daku tak main internet ... hihihi ... skarang tulis tutorial yah kawan ^.^
      Ok deh ... tetap semangat !

    38. mantabz,.. terus berkarya bro,.. :D

    39. Tips PDA says:

      cocok ne buat pajang foto di blog...

    40. ridwan171 says:

      waduh sob... rumit banget saya sbenernya alergi ma scripts xixixixi...... tapi saya aan berjuang untuk mencobanya thx...sob

    41. cudel says:

      bos di template saya ga ada main_wraper nya, gmn tuh?

    42. araz.net says:

      thanks..sob, lam kenal

    43. kiswanto says:

      mas saya mau nanyak ne, saya baru saja pakai widget ini, tapi kenapa setelah saya pasang, ada salah satu widget saya yang tidak aktif/rusak.



      mohon maaf sebelumnya karena saya pemula blog,

    44. @mas kiswanto...coba tunjukan blog anda sepeti apa hasilnya... biar saya lihat dulu :D

    Leave a Reply

    please write comments / feedback that builds from an article / design above ....