Jika Berkunjung Jangan Lupa Meninggalkan Jejak Di BUKU TAMU INI... :)
Buku Tamu
» Unlabelled » Memasang Gambar Slideshow Dibawah Header

Memasang Gambar Slideshow Dibawah Header

Posted by Muhammad Syakur Sunday, July 15, 2012 0 comments
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. Untuk demo saya gunakantemplate 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.



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 klikExpand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
  4. Copy paste kode berikut diatas kode ]]></b:skin>
    5. view plainprint?
    1. /* SLIDESHOW */   
    2. #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}   
    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>
  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'>
    7. <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/AVvXsEiARexOU30sOHkabV3bY8PFUXXy95bDDJX-OJugK8ZNir7xOjpVqG4hXbDFN3bfP-SPAt6PSH6bkJ9z69ju0uRk69RP8h7nu1nPvacTk0__B6i3k1IRS5UY46nEcxzdVSHKjiTsU9-q1ZQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOcIsj6rkGRJFx4B1W_UFfcigScJGDL51AoS1yCGpvgQIT1evgQlYogC63zrpAAPVl9hoyLhicPO0d1JNdTmE7vXtWEVXqpTJ4VjjH2UOpUT__qcrxeARMmvQEzPnIuqcDrccA9sp2nE/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqOyDiLiQafoMFsv7Cq_4Xv5qio4IyeG523NGDnkpFqt89B1fIKCGRz8soUy29FLJ9emQwRnrsA8617tmC5Ckng46kb3VNLK0Fi-cPpdK83YBi6nLf__9oAvNqZFX_h7yPPkANPEddXU/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksFtAA6cZr7tECOeQIoYUWVrDOwspobypYo3AlMRGMMU_mQ5o3aPTjpWiCOKoHpv2DN96FZ73K6kmXoZlajSp1CLnkW1YUcPZnTOS39U3PstcYNtja8h6fLYIuB_Ushx6qnp4S0H-Ccc/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCQNdjis5mh4CprPv-5n_VRNwt8gHWKqne-dI1yzrlJnflKIxC_QBGj5lpasFOdwoEqBaXYyK9TEJQO7v8njmCYL_1zY_REfSxFbZDkLLn2M3rtCA3dSfkdh138U2koq2ayuJXVDDK-A/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>
  7. Simpan Template
Keterangan :
    Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
  • Perhatikan juga angka -20px pada kode css-nya, saya gunakanmargin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan.
  • Tulisan yang berwarnamerah ganti dengan deskripsi tentang gambar anda.
  • Kode yang berwarnabiru 
    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 !



Setelah Membaca Artikel Memasang Gambar Slideshow Dibawah Header jangan lupa klik LIKE yaa.. dan Semoga bermanfaat bagi sobat . Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar atau di Buku Tamu. Sertakan link di bawah ini bila anda ingin COPAS.



Categories: icon
Pin It

Related Post:



0 comments:

Post a Comment

Copyright © 2012-2013 Blog Syakur. All rights reserved. | Design By: Muehammad Yuezha Andrean | Re-Design By: Muhammad Syakur