Posted by : Arie Adie Thursday, 16 May 2013

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


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>
    1. /* SLIDESHOW */   
    2. #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20pxmargin-right:10pxpadding:0#s3slider{width:660px;height:660px;position:relative;overflow:hidden}   
    3. #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}  
    4. .s3sliderImage{float:left;position:relative;display:none}   
    5. .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}   
    6. .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}   
    7. .s3sliderImage span a.featured-title:hover{color:#999}   
    8. .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}   
    9. .s3sliderImage span a:hover{color:#555}
     
  5. Kemudian copas kode berikut diatas kode </head>
  6. <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>
  7. 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'>
  8. <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>
  9. 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 !

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

TRANSLATE

English Japanese Brazilian Arabic Chinese German Netherland Korean Italian Russian Spain
SEO Reports for pengembarabiru.blogspot.com
pengembarabiru.blogspot.com value pengembarabiru.blogspot.com Real PR pengembarabiru.blogspot.com Trust pengembarabiru.blogspot.com Alexa/PageRank

RANDOM POST

Flash Labels by Way2Blogging





- Copyright © PENGEMBARA BIRU -arieadie- Powered by music - Designed by sang pengembara 821 -