Membuat S3slider images show

Tutorial ringan ini akan membahas bagaimana cara membuat s3slider image show yang diaplikasikan ke dalam template blog terutama blogspot, feature ini dapat di gunakan sebagai pelengkap tambahan untuk model template dengan magazine style, proses instalasi ke dalam blog sangat mudah dan simple, untuk melihat sumber s3slider image silahakan ke situs resminya, jika sobat ingin melihat demonya bisa klik di sini atau kalau sudah tidak sabar ingin mengaplikasikan feature ini hal yang pertama siapkan bahan-bahan untuk membuat s3lider, terutama scrpit jquery dan s3slider; bisa sobat download di bawah ini :
Kalau sudah sobat download saya sarankan simpan di tempat hostingan sobat sendiri, jika sudah menyimpan kita mulai langkah-langkahnya :
  1. Login ke blogspot terlebih dahulu kemudian masuk ke blog sobat pilih Layout > Edit HTML
  2. Kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin>
  3. /* Slider Control ----------------------------------------------- */ h2.slider { color: #000000; font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 6px 0px; border-bottom: 1px solid #C0CCD3; } #s3slider { width: 570px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } html > body #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: -40px; /* important */ } #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0px; /* important */ margin-top:30px; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 570px;height:50px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }
  4. Selanjutnya masukkan kode di bawah ini setelah kode ]]></b:skin>
  5. <script src="http://subagya.googlepages.com/jquery.js" type="text/javascript"> <script src='http://betatemplates.co.cc/wp-content/project/js/s3Slider.js' type='text/javascript'/> <script type='text/javascript'>    $(document).ready(function() {    $(&#39;#s3slider&#39;).s3Slider({       timeOut: 4000    }); }); </script> 
    Nb : mohon ganti URL alamat JS dengan punya anda sendiri untuk menghindari bandwith limit
  6. Kemudian sobat masuk ke Layout > add page element > HTML/Javascript dan masukkan kode ini :
  7. <h2 class="slider"> My Gallery</h2> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" /> YOUR TEXT... </li> <div class="clear s3sliderImage"> </div> </ul>
  8. Simpan dan lihat hasilnya
Contoh di atas adalah hanya 2 images show kalau sobat ingin menambah image slide shownya yang perlu dilakukan adalah menambahkan format ini :
<li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li>

Semoga tutorial ringan ini bermanfaat buat sobat yang ingin menampilkan gaya magazine di template sobat.

36 comments:

  1. yang untuk wordpress g ada ya??

    ReplyDelete
  2. @ chonz : setahu saya malah WP kang yang sudah ada pluginnya

    ReplyDelete
  3. he.he
    mantep gan.

    hack terus blogspot nya :D

    ReplyDelete
  4. duh internet ku lelet...ntar de liyat lgi

    ReplyDelete
  5. barusan nglirik demonya, keren. ternyata itu tho yang dinamain s3 slider. bikin load blog makin mengerikan engga mas?

    ReplyDelete
  6. gan, saling follow dong, wa dah follow duluan

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. Wah ga ada matinya..
    gonta-ganti template, manteb dah

    ReplyDelete
  9. Kereeen bos..
    Bisa ganti2 trus..

    ReplyDelete
  10. Kalau plugin buat wordpress ada gak mas ?? tapi makasih sebelumnya ijin copas dulu ya script code nya mw tak tempel di blog.

    ReplyDelete
  11. mantap om, jarang bisa nemu tutorial kayak gini, akhirnya nemu di sini. thanks yah

    ReplyDelete
  12. contohnya kayak gimana ya?? tapi kayaknya tahu deh yang mana.. hehe.. :)

    ReplyDelete
  13. wah keren... ringan pula, ga lelet dibukanya

    ReplyDelete
  14. Buat wordpress gimana yah mas? mohon petunjuknya, kalo bisa tampilin gambarnya donk mas, makasih yah..



    Blackberry tips, tricks and tutorials

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. mantap tutorialnya, oh ya apakah sebaiknya untuk file JS diterapkan langsung di template mungkin akan lebih bagus dan kita tidak perlu kuatir bandwith limit

    ReplyDelete
  17. waw..ada yang tutorial baru nichh...nyuba nyuba achhh...tengkyu mas mochal..

    ReplyDelete
  18. mas mochal makin mantaaaffghh...lama gk nongol disini..ternyata udah banyak perubahan...

    ReplyDelete
  19. Mas mochal..tukeran link yukk ama anzoen?? ayem pasang dulu ya,,jangan lupa link back please..hheee

    ReplyDelete
  20. terima kasih, ini tips yang berharga buat saya, karena saya baru belajar memodifikasi blog. salam kenal dari jogja

    ReplyDelete
  21. waahh saya baru tau bisa memakai slideshow seperti website...kerenn, btw untuk menambah slideshow yang ke 3 dan sterusnya sama menggunakan script di atas mas???maksud saya ga perlu dirubah kecuali img sourcenya yaa??

    ReplyDelete
  22. nice try gan
    nyoba dulu deh
    kali aja bisa

    ReplyDelete
  23. punyaQ udah ada dari templatenya..tp kok gak mau bergerak ya gambarnya(gak mau slide show) hanya gambr pertama aja yang nongol...tp..kl di lihat dari PRATINJAU...gambarnya slide show..

    ReplyDelete
  24. wah bagus nih slidernya, numpang saya pasang yaaa di blog saya :D anyway thanks infonya

    ReplyDelete
  25. mantab bro.,,. ane coba dulu yah,.., :D

    ReplyDelete
  26. thanks gan udah share :D gue mau nyoba dlu gan :)

    ReplyDelete
  27. Kereeen Mas bro... Ctrl+D..
    Thanks brada.

    ReplyDelete
  28. kalo untuk wordpress bisa pake plugin apa ya mas kira kira? saya masih bingung tentang plugin wp soalnya

    ReplyDelete
    Replies
    1. di dashboard WP ada fitur search plugin .. coba aja gan..

      Delete