mas template

Memasang Gambar Slideshow Dibawah Header


Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.


Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.
  1. Login dulu di blogger.
  2. Masuk ke Rancangan >> Edit HTML.
  3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
  4. Copy paste kode berikut diatas kode ]]></b:skin>
  5. /* SLIDESHOW */ 
    #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 
    #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
    .s3sliderImage{float:left;position:relative;display:none} 
    .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 
    .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 
    .s3sliderImage span a.featured-title:hover{color:#999} 
    .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 
    .s3sliderImage span a:hover{color:#555}
  6. Kemudian copas kode berikut diatas kode </head>
  7. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    <!--//--><![CDATA[//><!--
    (function($){
        $.fn.s3Slider = function(vars) {     
            var element     = this;
            var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
            var current     = null;
            var timeOutFn   = null;
            var faderStat   = true;
            var mOver       = false;
            var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
            var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            items.each(function(i) {
                $(items[i]).mouseover(function() {
                   mOver = true;
                });
                $(items[i]).mouseout(function() {
                    mOver   = false;
                    fadeElement(true);
                });
            });
            var fadeElement = function(isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if(items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut);
                } else {
                    console.log("Poof..");
                }
            }
            var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin   = $(element).width() * currNo;
                if(faderStat == true) {
                    if(!mOver) {
                        $(items[currNo]).fadeIn((timeOut/6), function() {
                            if($(itemsSpan[currNo]).css('bottom') == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            }
                        });
                    }
                } else {
                    if(!mOver) {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        }
                    }
                }
            }
            makeSlider();
        };
    })(jQuery);
    //--><!]]></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 4000
    });
    });
    </script>
  8. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
  9. <div id='slider-holder'>
    <div id='s3slider'>
    <ul id='s3sliderContent'>
    <li class='s3sliderImage' style='display: list-item;'>
    <a href='LETAK LINK DISINI 1'><img src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyIH6cyuRI/AAAAAAAAACA/qWAxUCqbZ_E/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
    Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyS_9SxP4I/AAAAAAAAACE/oxCVpT57mS8/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
    Nggak usah dijelaskan udah ada tulisanya diatas
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='http://1.bp.blogspot.com/_iPWSNaVgMts/TQyTG5zb0II/AAAAAAAAACM/ySlClyfQQNk/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
    Ini orangnya yang..............
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='http://4.bp.blogspot.com/_iPWSNaVgMts/TQyTCMJ7_mI/AAAAAAAAACI/ASMtA_q83yE/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
    Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='http://1.bp.blogspot.com/_iPWSNaVgMts/TQyTJI0yTlI/AAAAAAAAACQ/YNqRNd_ne_o/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
    Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
    </span>
    </li>
    <li class='clear s3sliderImage'/>
    </ul>
    </div>
    </div>
  10. Simpan Template
Keterangan :
  • Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
  • Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
  • Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
  • Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.
Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !
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 Creating Website

70 comments:

  1. mas, kalo slide berita ini, kalo di klik gambarnya bisa langsung masuk ke artikel nya ga??
    harus masukin kode url artikelnya dimana ya??

    soalnya cuma suruh masukin url image sama deskripsi foto aja diketerangannya :o

    ReplyDelete
  2. mas, udah kepasang, tapi koq dari 4 foto dan berita yang dimasukin, dia ga mau berubah yah?? tetep aja di gambar pertama...hahaha..
    need help nich mas bro :)

    ReplyDelete
    Replies
    1. kayak nya gak pas posisinya mas bro

      Delete
    2. mas bos, masih newbie saya,
      kalau diisi 5 slide show bagaimana

      Delete
    3. nice post.
      Jual Sex Toys Wanita http://tokojualsextoys.com/sex-toys-wanita/

      Delete
  3. ikutan ngopy ya Ndan...Thank;s

    ReplyDelete
  4. gan...kalo recent postnya di buat kayak gitu gmana gan,,,
    pencerahannya donk gan...

    untuk yang ini...nice dech..

    ReplyDelete
  5. @Sahrul:
    Ya mesti dipasang manual, tiap anda bikin artikel baru. Url sama gambarnya mesti dipasang seperti pada tutorial diatas.
    Makasih udah mampir

    ReplyDelete
    Replies
    1. mas kalau slide show pakai 5 foto bagaimana

      Delete
  6. Waaaaaah... ini yang aku cari2...
    makasih ya infonya :D

    ReplyDelete
  7. wah udah muter2 kemana mana ahir nya dapet juga info menarik ini..mantab share infonya sob

    ReplyDelete
  8. bagaimana cara menampilkan slider juga pada page yang lain? tidak hanya pada Homepage saja? mohon bantuannya mas.. terima kasih ^_^

    ReplyDelete
  9. Solusi sudah terpecahkan mascholis terim akasih banya ^_^

    nah sekarang, bagaimana cara menambah jumlah slider, kalo ingin lebih dari 5 gambar.

    Apa yang mesti saya rubah?

    Mohon bantuannya sekali lagi mas.

    Terima kasih, hormat saya , BanditHijo ^_^

    ReplyDelete
  10. @BanditHijo:
    Tinggal tnya aja di bawah mas.
    Saya sebenernya punya tutorial untuk membuat slider menjadi otomatis jadi tinggal ganti label nya aja setiap posting dgn label dimaksud akan otomatis muncul dalam slider. Selengkapnya disini

    ReplyDelete
  11. ALhamdulillah gan udah bisa ane pasang di blog ane,,,, a
    walopun pusing 7 keliling hehe,, makasih banyak gan pencerahannya,,,,,,

    ReplyDelete
  12. bang saya kode <div id='main-wrapper itu

    ReplyDelete
    Replies
    1. Saran saya mas, coba ganti model template blogger yg baru. Template yg mas Lukman pake memang agak susah untuk dimodifikasi

      Delete
  13. ga keluar gambarnya mas, padahal dah bener masukin code,y di edit html,
    dari org baru ni mas salam kenal ya! thanks

    ReplyDelete
  14. mas kolis mohon bantuannnya yg otomaatis gimna ? maaf nie newbie

    ReplyDelete
  15. "4. Copy paste kode berikut diatas kode ]]> "
    mksudnya apa ya gan??
    mohon pencerahannya

    ReplyDelete
    Replies
    1. Letakkan kode VSS nomer 4 diatas kode itu.

      Atau pake tutorial slider ini aja, otomatis nggak usah masukin gambar satu persatu
      http://www.maskolis.com/2012/04/membuat-slider-otomatis-sporty-magazine.html

      Delete
  16. OM KODE kok ga ada di HTML ya? gimana ni om

    ReplyDelete
    Replies
    1. yang nomer 6 om aku carii kok kagak ada

      Delete
  17. mantaps gan, bermanfaat. numpang tanya. kalau biar nampak dihalaman utama saja carane bagaimana yo mas

    ReplyDelete
  18. selalu mantap.. hehe.. kunjungan rutin

    ReplyDelete
  19. maskolis , kok fail mas ???
    coba cek s3o-cyb3r.blogspot.com

    ReplyDelete
  20. Apalagi kalau slideshow nya pakai efek slider, pasti lebih oke lagi tuh mas! :)

    ReplyDelete
  21. wah gan mantapzz izin Copas....tapi kok punya saya slidenya gak mau berubah-ubah?

    ReplyDelete
  22. Thanks ya gan info nya sangat bermanfaat...

    ReplyDelete
  23. mas kolis gimana buat menu didalam menu...dan buat sub menu....trims ada contoh nya tetapi mau ku tambah sub menu yang lain ga bisa.... di jhonygenit... mohon pencerahannya..trimsss.
    heru

    ReplyDelete
  24. pada jhony genit ,..gimana cara ganti foto..slide nya...trims....aku cari lom ketemu...

    ReplyDelete
  25. Artikel yang bermanfaat gan
    terima kasih

    LOWONGAN KERJA ONLINE
    Lowongan kerja online membuka pendaftaran anggota baru

    ReplyDelete
  26. thanks..artikel bermanfaat sekali buat saya

    ReplyDelete
  27. Tutorialnya bagus banget maskolis.. trims


    INDONESIA RESEP MAKANAN
    Visit back iya
    http://idresep.blogspot.com/

    ReplyDelete
  28. pak, saya gak nemu kode div id='main-wrapper' gimana?

    ReplyDelete
  29. Hadir boss ikut simak postingan yg bermanfaat ini, sudah saya terapkan di blog saya.. ada yg mau saya saya tanyakan Mas. kalo membuat sli show berdasarkan postingan secara otomatis gimana ya mohon bagi totorialnya dunk

    ReplyDelete
  30. nice post... maskolis berguru dimana si spertinya handal banget... hehe...

    ReplyDelete
  31. Mas kalo div id=main wrappernya gaada gimana? mohon bantuannya yaa mas masih newbie

    ReplyDelete
  32. this is such a nice and useful information for us...i appreciate urs word Free Blogger premium Themes

    ReplyDelete
  33. Terimakasih Gan...
    Sangat membantu. Informasi yang sedang saya cari.. :)

    ReplyDelete
  34. Gan code div id='main-wrapper gak ada,,,,udah nyari 2 kali...gmn nie????tolong bantuannya...paling atas atau bawah?

    ReplyDelete
  35. cukiup mencerahkan dan sedikit menambah trial and error dalam jquery

    ReplyDelete
  36. Udah saya pasang gan, tapi slidenya nongolnya terlalu menjorok ke kiri melebihi garis batas. di kekakanin gk mau mau...gimana solusinya gan..thanks jika dicerahkan...

    ReplyDelete
  37. Kalau misalkan dari dreamweaver gimana ya gan ?

    ReplyDelete
  38. keren nih.!
    mau tanya dong kok ukuran slidenya di blog saya ga bisa di perlebar ya???padahal settingannya dikasih 1000px tp view nya ttp ajah 660px
    mohon bantuannya hehe maklum masih pemula heheh

    ReplyDelete
  39. Duhhh mass malah jadi erorr semua . hehehee :D

    ReplyDelete
  40. berarti harus manual ya ini mas, kalau yang otomatis gitu ada nggak tutorialnya mas?

    kalau minat kunjungi ya mas
    http://malangshopaphoria.blogspot.com
    http://catatanseorangamatiran.blogspot.com

    ReplyDelete
  41. ,, kalau gak ada < id='main-wrapper'> gimana gan ?? ,,

    ReplyDelete
  42. thanks gan infonya dan caranya sangat bermanfaat sekali

    ReplyDelete
  43. mas, klo auto slide nya diganti manual gimana caranya ya? pake tombol kiri kanan gitu..

    ReplyDelete


  44. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  45. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  46. hari ini membantu 100.000 bulan depan dibantu 200.000
    hari ini membantu 1000.000 bulan depan dibantu 2000.000
    hari ini membantu 10.000.000 bulan depan dibantu 20.000.000
    reward 100%/bulan + bonus referal 25% dari modal ref anda!

    http://celenganmaknyus.blogspot.com

    ReplyDelete
    Replies
    1. itu Konsep Riba boss..
      ingatt.. Pemakan Riba seperti Setan yg kesurupan

      Delete
  47. bagus gan.... mampir ya http://alfanfauzi185.blogspot.com/

    ReplyDelete
  48. Maskolis,aku dah coba kok gambarku gak rapih ya,lebar postinganku 685px,tolong solusinya ya pak.boleh di cek di www.toyawater.com .terimakasih

    ReplyDelete
  49. Its Amazing artikel.. makax..maskolis.com trmasuk Referensi Utama saya..
    Maskolis bole nanyakah..; gimana caranya menambahkan next-prev button di pojok kiri atas !! Mohon Pencerahannya Mas !!
    zainsiboyah.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger