Bagaimana Cara Membuat Slideshow di Blogspot

Bagaimana Cara Membuat Slideshow di Blog- Template yang disediakan blogspot bagi para pengikutnya memang sangat standar, tidak seperti apa yang diberikan oleh wordpress, salah satu misalnya adalah mengenai Slide. Beberapa orang yang ingin membuat website atau blog komersil dengan membuat slide tentu saja mereka tidak akan mempunyai pilihan lain, selain harus mengutak-atik blog mereka sendiri.

Selain dengan membuat slideshow ini, anda bisa juga melihat artikel kami yang lain, yaitu "Cara membuat menu bertingkat pengganti navbar', yang tentunya akan membuat anda semakin bangga pada blog anda yang super keren.

Sebelum kita memulai tutorial ini, ada baiknya anda lihat dulu demonya dari sini http://nousisce.blogspot.com/

Kode css nya tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Misalnya kali ini saya pakai untuk yang lebarnya 540px.

1. Masuk ke Edit HTML

2. Klik Expand Template Widget

3. Letakkan 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 letakkan 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/AVvXsEjL8JC7llSkrBsCrFnCQXOfuRCizkn-s9c4dOfsf-vGlgJ8ZOvkVGf5atwfpxGElXVNUSshhCe-XDUhDVsTwHW1Pspt_PrhJp6TRHMaCuyBq0ThL_iCWCx9evnn1vVcpmDujPzXLdxt8Q/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/AVvXsEgU8m8vKfCKgvZX1zFGDOUjow5BmeuEEuL8AoQW49Ryz9qGStFjEZfnVNLQZtoMQJqToNrJz2IyCvMBsDWRL0iNZFABhn1L4bj27w-ROiPmvzZ0WnsZjxtyBgFBum44X6SVPzgwqYYS8g/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/AVvXsEhIwHF7cm2VA-xUDH374211VJLHldWgOqTvwtGvsjbbCkpC7WgdA58qmmRd_61N_9RxXjv3Qz6r5GdR_5mpacfm1T7OSwpfo10xECqcQyMBF31HwjNQaH8W-UdrBgChZ3GfeVaK28R2IC4/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/AVvXsEiBDk6wkpVR1ePxH4CsSYmLgRBm-vAA2mAD3RvlXHs0HkL3RrLJ3JiTR7nKLOLL0uzVxnERlsdjxESkKEHM0Bb038tHKe-6picQclUCcNHhS7k0rEZ2rPGImjJut272zxS-BTTTjMuIQu0/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/AVvXsEjFxeZlt-5eFAQEW_77xjUW0sj60KVEcXoZB02gYqQHb91rZOjOXVhFFcBa7Bdjt_VgjliI-1PjF6Zy9Ql27L_BgRkIbGl4e6-bYAJFKNqnPES5L5ei0W7JExJFM24lNta5dvVJtihlm04/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. Save 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.

Semoga sukses ya gan..!!

Bagaimana Cara Membuat Slideshow di Blog