86 Membuat Image Slider Keren Dengan Thumbnails

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Image Slider Dengan Thumbnails
Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan tutorial baru membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenaga CSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
untuk membuktikannya anda bisa mengecek live demo pada blog eksperimen saya

Tekan Tombol view Demo

View Demo

Nah jika anda tertarik untuk menambahkan image slider keren dengan thumbnails pada blog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:

Cara Menambahkan Widget Ini KeBlog

  • Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
  • Klick Ctrl+F dan cari kode ]]></b:skin 
  • Tambahkan kode CSS berikut diatas kode ]]></b:skin>
    .slider{   
    width: 640px; /*Same as width of the large image*/ 
    position: relative;          
    /*Instead of height we will use padding*/
    padding-top: 320px; /*That helps bring the labels down*/
    margin: 100px auto; 
    /*Lets add a shadow*/ 
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
    }
    /*Last thing remaining is to add transitions*/
    .slider>img{
    position: absolute; 
    left: 0; top: 0;
    transition: all 0.5s; 
    }
    .slider input[name='slide_switch'] {
    display: none;
    }
    .slider label { 
    /*Lets add some spacing for the thumbnails*/ 
    margin: 18px 0 0 18px;
    border: 3px solid #999; 
    float: left;   
    cursor: pointer; 
    transition: all 0.5s;
    /*Default style = low opacity*/
    opacity: 0.6; 
    }
    .slider label img{ 
    &display: block; 
    }
    /*Time to add the click effects*/ 
    .slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;  
    }  
    /*Clicking any thumbnail now should change its opacity(style)*/ 
    /*Time to work on the main images*/ 
    .slider input[name='slide_switch'] ~ img { 
    opacity: 0;
    transform: scale(1.1); 
    } 
    /*That hides all main images at a 110% size 
    On click the images will be displayed at normal size to complete the effect 
    */ 
    .slider input[name='slide_switch']:checked+label+img {
    opacity: 1; 
    transform: scale(1);
    } 
    /*Clicking on any thumbnail now should activate the image related to it*/
    Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar
    • Cari kode <div id='main-wrapper'>
    • Setelah dapat tambahkan kode HTML berikut diatas kode <div id='main-wrapper'>
    <div class="slider">  
    <input type="radio" name="slide_switch" id="id1"/>           
    <label for="id1">         
    <img src="IMAGE LINK" width="100"/>
    </label>  
    <img src="IMAGE LINK"/>
    
        <!--Lets show the second image by default on page load--> 
    <input type="radio" name="slide_switch" id="id2" checked="checked"/> 
    <label for="id2">
    <img src="IMAGE LINK" width="100"/>             
    </label>           
    <img src="IMAGE LINK"/>            
    <input type="radio" name="slide_switch" id="id3"/>            
    <label for="id3">           
    <img src="IMAGE LINK" width="100"/>         
    </label>          
    <img src="IMAGE LINK"/>          
    <input type="radio" name="slide_switch" id="id4"/>             
    <label for="id4">            
    <img src="IMAGE LINK" width="100"/>           
    </label>             
    <img src="IMAGE LINK"/>           
    <input type="radio" name="slide_switch" id="id5"/>            
    <label for="id5">          
    <img src="IMAGE LINK" width="100"/>           
    </label>         
    <img src="IMAGE LINK"/>             
    </div>

    Kustomisasi

    Ganti IMAGE LINK dengan link gambar anda.
    •  Tambahkan script berikut diatas kode </head>
    <script src="http://tipstrikblogging.googlecode.com/files/imagesliderthumbnails.js" type="text/javascript"></script>
    • Simpan template.
    Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.

    Demikian tutorial membuat image slider keren dengan thumbnails semoga bermanfaat. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih tuk apresiasi anda.


    ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

    Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

    86 komentar :

    1. This tutorial is great. I like it. Jangan dihapus dulu ya tutorialnya, mau dipraktekkan lain waktu. ^_^

      BalasHapus
      Balasan
      1. Tdk mungkin dihapuslah insyaAllah, silahkan dipraktekin kpn ada wktux. Thank you for your appreciation.

        Hapus
    2. Wah bagus tutorialnya...

      btw.. makasih udah mampir diblog saya..
      Salam kenal

      ~~MKR~~

      BalasHapus
      Balasan
      1. Sama-sama. Terima kasih juga tuk kunjungan dan apresiasi anda.

        Hapus
    3. luar biasa,selalu dapat tutor yang baru disini :)
      mksh tutornya sob,saya simpan dulu ya....hehe
      salam sukses selalu sob.

      BalasHapus
      Balasan
      1. Silahkan disimpan, semoga sukses jg tuk anda. Thanks apresiasinya.

        Hapus
    4. asyik tutorialnya kreen,, imagenya cantik... di bookmark dulu yah mungkin nanti baru bisa nyoba..

      BalasHapus
      Balasan
      1. Silahkan dibookmark dan dipraktekin jk dah ada wktux, gampang kok. Terimaksh apresiasinya.

        Hapus
    5. mantap nih tutorialnya, saya coba-coba dulu ya.

      BalasHapus
      Balasan
      1. Silahkan dicoba, terimaksh apresiasinya.

        Hapus
    6. wuih...keren banget slidernya. ntr klw butuh ijin pakai ya mbak? heee

      BalasHapus
    7. Cantik banget slidernya...ditambahlagi gambar kartun berjilbab, jadi tambah cantiq deh.
      Thanks sharingnya sista.. :)

      BalasHapus
    8. Ane dah coba diblog sendiri,, kreen nih tutorialnya,,, makasih yah... klo berkenan silahkan mampir liat hasilnya jg diblog saya,,, salam kenal.. kunjungan perdana nih...

      BalasHapus
      Balasan
      1. Sama-sama, insyaAllah ntr mampir diblogx. Terimaksh kunjungan dan apresiasinya.

        Hapus
    9. makasih atas tutorialnya, sangat bermanfaat,, alhamdulillah...

      BalasHapus
      Balasan
      1. Alhamdulillah, terimaksh apresiasinya ukhty.

        Hapus
    10. Balasan
      1. Sama-sama, terimaksh jg kunjungan dan apresiasinya.

        Hapus
    11. Terlambat saya sist, rupanya dah ada update tutorial baru dan keren disini. Terimaksh sharingx. Keren...

      BalasHapus
      Balasan
      1. Sama-sama, terimaksh jg tuk apresiasinya.

        Hapus
    12. Balasan
      1. Saya dah coba jg, lihat hslx diblog saya ya pd postingan gaya rambut unik pemain sepakbola.

        *Sekali lg makasih ya sist.

        Hapus
      2. @Yusake: Silahkan dicoba
        @Arman: Iya sy sdh lihat td diblogx.
        Semuanya, terimaksh ats apresiasinya.

        Hapus
    13. Assalamualaikum..bagus bgt infonya ikut menyimak ya mbak sambil di save untuk kebutuhan di masa mendatang..

      BalasHapus
      Balasan
      1. Wa'alaikumusslm warahmatullah, silahkan, terimaksh tuk apresiasinya.

        Hapus
    14. Balasan
      1. Silahkan dicoba, terimaksh apresiasinya.

        Hapus
    15. keren kawan, tapi kebetulan saya sudah pasang nih.

      BalasHapus
      Balasan
      1. Gpp khn tdk dwjbkn psg kwn, trimaksh apresiasix.

        Hapus
    16. Dijual Blog saya, untuk biaya sekolah..
      http://ba12.blogspot.com/2013/01/jual-2-blog-ini-dari-penulis.html

      BalasHapus
      Balasan
      1. Smg cpat laku, laris dan bs mringankn biaya sekolahx.

        Hapus
    17. Ihh lucu banget tuh gan! Wajib coba deh., hmmm tapi nanti jadi ngubah gaya template juga :(

      BalasHapus
      Balasan
      1. Nggak hrs dicoba diblog utama klu ingin eksperimen bs pakai blog dummy mbak. Trimaksh tuk apresiasinya.

        Hapus
    18. salam kenal,, makasih ya mbak atas tutornya, nanti akan saya kembangkan lagi di blog tapi belum sampai di tutor ini,,, mohon bimbingannya ya..

      BalasHapus
      Balasan
      1. Wassalam mbak, sama-sama trmksh jg tuk apresiasix. ya, InsyaAllah akn slg sharing.

        Hapus
    19. Keren sob ijin nyobain. Tapi kalo berkenan saya minta tutor bikin LABEL persis yg sobat pake (katanya yg ginian lebih SEO lo)
      makasih sebelumnya

      BalasHapus
      Balasan
      1. Tutorial untuk modifikasi tampilan label cloud blogger sudah anaa posting, sobat bs search aja diblog ini pd tag/category label. Trimaksh

        Hapus
    20. ini tips baru sob buat saya
      terima kasih menambah pengetahuan dan referensi saya
      :D

      salam berbagi

      BalasHapus
      Balasan
      1. Sama-sama, terimaksh jg tuk kunjungan dan apresiasinya. Sering-sering mampir ya!
        Wassalam.

        Hapus
    21. Wah keren ya tampilan image slider dengan thumbnails..
      Mesti di coba nih..
      Thanks sobat atas tutornya..

      BalasHapus
      Balasan
      1. Mmg keren sobat, silahkan dicoba. Terimakasih telah memberikan apresiasinya pada tutorial Membuat Image Slider Keren Dengan Thumbnails ini.

        Hapus
    22. wict....slidernya keren!!!
      mau nanya nih!! gimana template yang nga ada div id='main-wrapper..
      mohon solusinya...

      BalasHapus
      Balasan
      1. Penamaan selector CSS ditemplate memang berbeda-beda tergantung desainerx, yg jelas yang dimaksud disini adalah bagian atas kolom posting. Silahkan masing-masing menyesuaikan dan mengenal kode selector CSS ditemplate masing2.

        Hapus
    23. .: TQ 4 ur share, ane juga pake kebetulan templates ane dah support...^_^

      BalasHapus
      Balasan
      1. Sama-sama, ya anaa dah lihat tp antum pakai slider bertenaga JQuery, Lbh sdk berat ketimbang yang ini.

        Hapus
    24. keren mba.. saya mau coba :D .

      BalasHapus
    25. Mbak mau nanya di edit html blog saya tidak ada kode div id='main-wrapper'. terus saya masukin di kode apa terimakasih

      BalasHapus
      Balasan
      1. Kalau anda baca komentar-komentar sebelumnya pasti anda sudah dapatkan jawabannya. Memang tergantung desainernya mau namakan selector CSS bagian main-wrapper itu apa. Ada yg hanya menggunakan nama main, main section, kalau designer kita kadang juga pakai bahasa sendiri mis, kolom content, kolom posting dll. Begitupula HTMLx terkadang selector CSS tadi dipanggil dengan awalan div id atau div class. Semoga mengerti.

        Sebenarnya widget ini juga bisa anda tampilkan didalam posting dengan menggabungkan kode diatas menjadi bentuk HTML.
        Semoga bisa membantu.

        Hapus
    26. <div id='main-wrapper ditempat saya ini gk da
      Gimana ya cari nya ???

      Mohon bantuanya :)

      BalasHapus
      Balasan
      1. Dibaca tanggapan anaa terhadap pertanyaan serupa sobat pada komentar sebelumnya diatas. Semoga membantu.

        Hapus
    27. Wah, mengunjungi blog ini benar2 pencerahan. Apalagi pas tahu adminnya perempuan, jarang banget yg aktif di tutorial. Sudah lama ada niat mau membenahi blog. Sepertinya akan sering bolak-balik ke sini. Terima kasih atas sharenya. Salam kenal dan salam sukses

      BalasHapus
      Balasan
      1. Hanya menyalurkan hobi nih ukh. Terimakasih tuk apresiasinya dan salam sukses jg tuk ukhty.

        Hapus
    28. Ijin tes mas abis penasaran si! Makasih banyak ya. Jgn lupa inguk2 blog ane.

      BalasHapus
      Balasan
      1. Silahkan dites. Anaa perempuan, keliru dengan sapaan masx :-s

        Hapus
    29. mbak.. gimana ya caranya kasi tulisan admin bukan untuk thrd comment, udah di di coba tap gak bs ya.

      BalasHapus
      Balasan
      1. Kalau bukan untu threaded comment, tulisan adminnya mau ditaruh dimana? Kurang ngerti anaa dengan pertanyaan miztia.

        Hapus
    30. Kunjungi Balik Blogger Ku, ada autolike nya juga Loh => http://tipsjrswirogas.blogspot.com/

      BalasHapus
    31. kak.. aku mau pake ini tapi kalo di kasi info/descripsi bisa gak??. :D .

      BalasHapus
    32. kere posstingannya,,, ane bookmark dolo deh ..
      mampir ke blog ane y

      BalasHapus
    33. Masih agak bingung iki dengan cara nampilinnya di blog. ;((

      BalasHapus
    34. Maksih infonya. Mau tanya, berpengaruh terhadap loading gak ta..Terimakasih

      BalasHapus
    35. saya mencari tutorial membuat image slider recent post seperti pada template adsosive karya mkr-site.blogspot.com,mugnkin jika sobat berkenan untuk ngasih tutorialnya

      BalasHapus
    36. mau nanya kan itu template>edit html> proceed . saya kok ga nemu nemu tulisan proceed ya??? mohon pencerahan

      BalasHapus
    37. nice image slider, great blog, and tutorial
      thanks 4 share us

      BalasHapus
    38. salam berbagi...
      mulai tertarik designblog.
      kunjungi juga blog ane ya :))

      BalasHapus
    39. div id='main-wrapper
      di edit HTML blog ak gk ad i....
      ni blog ak: x-1manklaten.bolgspot.com

      BalasHapus
    40. WOW KEREN tapi ko blog aq nga ada div id='main-wrapper'.... trus gmna caranya ?

      BalasHapus
      Balasan
      1. Coba taruh di atas outer-wrapper atau header wrapper aja kakak

        Hapus
    41. mohon pencerahannya dong :((... di blog ag nga ada code div id='main-wrapper'

      BalasHapus
    42. cantik blognya...
      menarik artikelnya...
      wajib di bookmarks

      BalasHapus
    43. ini bisa di buat laman baru ga sis??
      mhon pencerahannya?
      :)

      BalasHapus
    44. HTMLnya bisa gk dimasukan di postingan ???
      dan muncul seperti demo ??

      BalasHapus
    45. bagus dan rapi banget blognya..
      izin bookmark :)

      BalasHapus
    46. thanks kawan ini yang aku cari2....salam

      BalasHapus

    Catatan:
    Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

    NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
    Konversi Kode di Sini!