Cara memasang slide show

Kali ini saya akan membahas tentang cara memasang slide show pada blog.Yang akan berguna untuk memperindah blog kalian dengan slide gambar beserta deskripsinya.Berikut tutornya:

  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='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5f7zGN2I/AAAAAAAAAI8/0EtNG4JD8gI/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='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5gKhdH1I/AAAAAAAAAJM/vQon_Uu0Ntg/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='http://4.bp.blogspot.com/__Ue-P3hoW1M/TM2c9Ye_X_I/AAAAAAAABNo/jpQh0WlWzvs/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='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9ujd4EI/AAAAAAAABNw/dE2qWy2YxMw/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='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9waMz1I/AAAAAAAABN4/SwlhrFC60t8/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
sumber:http://miscah.blogspot.com/2010/11/cara-pasang-slidshow-di-blog.html
Share this article :

Posting Komentar

Silahkan beri komentar anda setelah membaca artikel diatasTerima kasih untuk tidak berkomentar yang berunsur SPAM.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Just for Fun | Trick blogger | Dunia Internet - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger