Cara Pasang Slidshow di Blog

Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow 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 gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.

 

image 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 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.

 

  1. Masuk ke Edit HTML.
  2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
  3. Copas kode berikut diatas kode ]]></b:skin>

     

    /* SLIDESHOW */
    #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
    #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
    #s3sliderContent{width:540px;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:70px;width:540px;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}

  4. Kemudian copas kode berikut diatas kode </head>

     

    <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>

  5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>

     

    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYP1aIrYcU6xWd4z_NsBZWZHwyG3n5q4_OUk2OfxMKfrisVTsg7T4ZjEa6_Pt8WVywLr1e99QzNPSq4BaL09ZOqZCln5cAg8zmiacfL25UZyECrhBsGUeej3iJXKHpKQCsfkDangTc3w/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>

    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ERAg_dNAP5_CilXtd9gmSrUt354naE4zc4tvGKl0A_4MOTsKOBgaBUAm92TLB5jpaxas971QEXY4GeibGMxXZEmVoRrDL8n9GayzaijRT4Ysx4NEaJV4a_W7CSJaFQHx4dNccVVfIQ/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdMWrtXflVhNQ29XrmOl8vjEIbNf4mFZKrLwLp4FUxnOvdJtGtjxLSiMaL7hs1u63wZdTgPMSOCYFT-Ud0stkk_rxEZHLxN4II-qYNnhgwes0DQyJJMepiS_SOLPSoSqM9kA-afuChaM/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>

     

    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9iRUjxve5U4wzFi93kkAPzPYMAxJh9knOUjo8p9O4Sug_QQwBa2vf8GEMGd2_gNR9Jdl_dE4O7KgeVBbiro2htnneJzWVyCh3PvoCnITs9AP4qsNt3Bu60tL1Im7SHb3zLfMYJPnADYI/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPeyHB-AXzSmPetP9Rqo-rdvAMLT55kSN4kSCXlSUG2-jbzZLhXCPD78TuexSSzyKKNIDW2C3uvHJzbyWEiIpWs5ykq_uJUYf-YXlCKe_PgtyAXM2TKNun3n9WYpqmHrCOhBfAEY3Trs/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='clear s3sliderImage'/>

    </ul>
    </div>
    </div>

  6. Simpan Template

 

 

Keterangan :

  • Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
  • Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
  • Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
  • dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.

 

Cukup panjang, semoga berhasil ya !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

22 comments

27 November 2010 pukul 18.17

banyak bos, kode untuk slider...
mantap \m/

28 November 2010 pukul 06.28

Wah, rasanya agak males jika harus obrak-abrik template lagi.
Ada gak slide show yang otomatis menampilkan postingan kita kyk slide show foto bawaan blogspot?

Anonim
28 November 2010 pukul 17.52

script ini pernah q buat utk rollng iklan..tp efeknya membuat blog q jd lambat bgt...xoxoxoxo...thanks

29 November 2010 pukul 20.15

@Inspirasi Kecilku Sekedar kalau mau tetep masang dg efek slider...
http://beben-koben.blogspot.com/2010/11/i-finally-got-sliderslideshow-for-my.html
sorry bos MISCAH, spam dikir nih...xixixixi \m/

29 November 2010 pukul 21.42

@Beben : Thanks ya ben, ga nyepam kok blm 10kali..haha

30 November 2010 pukul 17.41

pengen si kk,, tapi takut loading blog jadi lama,, mkanya skrg lgi cari template yg simple" aj..biar loadingnya gk lama, trus pasang slider de..hehe
makasi y kk...

30 November 2010 pukul 23.49

kang saya dah coba n brhasil, tapi posisi sidebar jadi ke bawah, gmn cara'a biar slide sama sidebar kanan sejajar...

hatur nuhun seblumya..

10 Desember 2010 pukul 14.03

wah keren nih kayaknya...

11 Desember 2010 pukul 23.47

terima kasih infonya, ijin belajar dan mencoba yak ... salam

13 Desember 2010 pukul 12.48

aku mau coba satu2 nich, bingung mau nyari dimana, akhirnya nemu disini, thx mas

Anonim
22 Desember 2010 pukul 10.48

dijual..
Rapidleech murah.. cm 30rb per bulan..
buat info detailnya klik disini deh..

http://zaxcy.blogspot.com/2010/12/rapidleech-service.html

ooiya.. kunjungi blog.ku jg ya di.
http://zaxcy-software.blogspot.com
or
http://zaxcy.blogspot.com

thx buat yg mau mampir ^^

28 Januari 2011 pukul 21.13

apakah tidak memberatkan semasa loding blog

17 Februari 2011 pukul 16.49

ini dia yg aku cari2... thanks sob.. salam kenal...

Anonim
30 Maret 2011 pukul 10.15

saya selalu gagal kalau membuat SlideShow gk tau kenapa, padahal sudah bener penempatan scriptnya, btw, seperti pada postingan anda tentang Slide, saya coba kopy paste sesuai urutan, tapi tetep aja nggak mau jalan ..silahkan mampir dan melihat ke blog saya klu ada waktu ( blog ini saya jadikan eksperimen, jadi isi postingannya tidak ada yg menarik)
Salam dan terima kasih..

http://donny-cyberlife.blogspot.com/

10 April 2011 pukul 06.54

agak repot sih kalo harus ganti2 link sendiri... btw ada cara agar artikelnya random ato otomatis tanpa gunta ganti link...???
mohon panduannya...

Anonim
21 Juli 2011 pukul 02.26

punya saya kok gak bisa sliding alias ganti2 gambar y?
trs tulisannya jga mepet2...

mohon bantuannya, ni alamatnya
http://trikokmemasak.blogspot.com/, mohon di bantu....

28 Agustus 2011 pukul 11.36

http://liburanmantap.blogspot.com/ om minta bantu cara ngedit slider yang atas gimana?

7 Februari 2012 pukul 00.13

Mantap Gan Infonya,
Thanks yah

26 Mei 2012 pukul 20.16

maaf, link yang tulisan tebal itu maksudnya untuk apa? saya masih belum mengerti ._.v

16 Agustus 2012 pukul 06.50

Kebetulan ni script slideshow yang ada di template blog aku tidka jalan, bisa diganti dengan script diatas
terima kasih :)

26 Maret 2013 pukul 10.30

ok thanks ya atas coding share nya. aku mau cobain.

14 Mei 2013 pukul 15.19

banyak juga ya codingannya.

Posting Komentar

Reader Community

Recent Comments