Membuat Slider Sederhana

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>

/* 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}

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

6. 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'>

<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/AVvXsEisBJ6DhyCbBakASrJItUMKpo3wR3cHRolX5Smic8uXfGZ-83wsnWLBFD_XIUWLpL2F1XaIKd2GTQlxRq8k16ZmKZbFfkprUSxz7uwhfWRqSb8VnWoPcSRe7sCu7SbuJcv7Wcmj6yECiC0Q/s1600/PSlide-01.jpg' style='width: 960px; height: 350px;'/></a>

<span style='display: block;'>

<a class='featured-title block' href='LETAK LINK DISINI 1'>SURVEYOR JADOEL</a><br/>

Duka saha namina pokona mah jadul we lah

</span>

</li>

<li class='s3sliderImage' style='display: none;'>

<a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1DnHhiLVhs_sC1i7l3CDqmqvDYZNhyarL3cpcTtUFDTukOihTJOL37Iti628OmfqCyAXupznpCyNWvVXlIvidcWbhqqVzwAYa1Is9mqk8M-u484vFxjQrPhT7e8Q8QB6KQ1GuHm5yHffZ/s1600/PSlide-03.jpg' style='width: 960px; height: 350px;'/></a>

<span style='display: none;'>

<a class='featured-title block' href='LETAK LINK DISINI 2'>SURVEYOR JADOEL</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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-zB0Zf3eQWXZp7wQGMU4IRcClvWJ3c_FgdeXw8VCO_1YpVb8EwEDZ1_BGT7-0lG0UMDVUjgtZ_kzDBA2XbXh8bJ7utYIMmSMFKg-3qQsgr3I8mNX7bjUJE9IZJWPbEnfHegAhPthKNP-/s1600/PSlide-05.png' style='width: 960px; height: 350px;'/></a>

<span style='display: none;'>

<a class='featured-title block' href='LETAK LINK DISINI 3'>SURVEYOR JADOEL</a><br/>

Ini orangnya yang..............

</span>

</li>

<li class='s3sliderImage' style='display: none;'>

<a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsx_J_wZYAZptLJNJfgWjnELQ2_WsFThMzR9xRsxX8WmdGBf3dmXZ-qK6Q5X-7FxtJl_YLKM5gR_8SUij0-8cw7eKv8mwOH6nwy9VPDTAB7MUsIsO_f6XnTb27VuWlTRwp9UzzLdcIKYKS/s1600/PSlide-07.jpg' style='width: 960px; height: 350px;'/></a>

<span style='display: none;'>

<a class='featured-title block' href='LETAK LINK DISINI 5'>SURVEYOR JADOEL</a><br/>

Pasti teu apal nya poto saha ieu,,,, sami!

</span>

</li>

<li class='clear s3sliderImage'/>

</ul>

</div>

</div>