Minggu, 30 Desember 2012

Cara Buat Slideshow Keren Di Blog


Sudah bosan dengan tampilan blog ? ingin mencoba mengubah dengan memberi sentuhan sedikit  seperti slide photo pada blog kita . silahkan ikuti langkah berikut :
1. Masuk ke Dashboard
2. Pilih rancangan
3. Pilih edit HTML
4. Centang Expand Template Widget, Sebelum mengedit silahkan download template anda untuk menjaga eror
5. Cari kode HTML ini <head>
6. Jika sudah ketemu Letakkan Script berikut tepat di bawah kode <head> tadi.

    <!-- slide -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
    //Execute the slideShow, set 6 seconds for each images
    slideShow(3000);
    });
    function slideShow(speed) {
    //append a LI item to the UL list for displaying caption
    $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});
    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0});
    //Get the caption of the first image from REL attribute and display it
    $('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
    $('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
    //Display the caption
    $('#slideshow-caption').css({opacity: 0.7, bottom:0});
    //Call the gallery function to run the slideshow
    var timer = setInterval('gallery()',speed);
    //pause the slideshow on mouse over
    $('ul.slideshow').hover(
    function () {
    clearInterval(timer);
    },
    function () {
    timer = setInterval('gallery()',speed);
    }
    );
    }
    function gallery() {
    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
    //Get next image caption
    var title = next.find('img').attr('title');
    var desc = next.find('img').attr('alt');
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
    //Hide the caption first, and then set and display the caption
    $('#slideshow-caption').animate({bottom:-70}, 300, function () {
    //Display the content
    $('#slideshow-caption h3').html(title);
    $('#slideshow-caption p').html(desc);
    $('#slideshow-caption').animate({bottom:0}, 500);
    });
    //Hide the current image
    current.animate({opacity: 0.0}, 1000).removeClass('show');
    }
    //]]>
    </script>

    <style type='text/css'>
    ul.slideshow {
    list-style:none;
    width:700px;
    height:260px;
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;
    font-family:Arial,Helvetica,Trebuchet MS,Verdana;
    ;
    }
    ul.slideshow li {
    position:absolute;
    left:0;
    right:0;
    }
    ul.slideshow li.show {
    z-index:500;
    }
    ul img {
    width:700px;
    height:220px;
    border:none;
    }
    #slideshow-caption {
    width:700px;
    height:70px;
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    background:#000;
    z-index:500;
    }
    #slideshow-caption .slideshow-caption-container {
    padding:5px 10px;
    z-index:1000;
    }
    #slideshow-caption h3 {
    margin:0;
    padding:0;
    font-size:16px;
    }
    #slideshow-caption p {
    margin:5px 0 0 0;
    padding:0;
    }
    </style>
    <!-- slide end-->


7. Jika sudah selesai sekarang simpan templatenya. in belum selesai ya, masih ada tahap selanjutnya.

8. Selanjutnya masuk kehalaman Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan script berikut.

    <ul class="slideshow">

    <li><a href="URL POSTINGAN ANDA DISINI"><img src="URL GAMBAR ANDA DISINI" title="JUDUL SLIDE-NYA DISINI " alt="DISKRIPSI ATAU TULISAN KEIL YANG DIBWAH JUDULNYA" /></a></li>
    <li><a href="URL POSTINGAN ANDA DISINI"><img src="URL GAMBAR ANDA DISINI" title="JUDUL SLIDE-NYA DISINI " alt="DISKRIPSI ATAU TULISAN KEIL YANG DIBWAH JUDULNYA" /></a></li>

    <li><a href="http://1stshared.blogspot.com/"><img src="http://1.bp.blogspot.com/-zl0Fo9rgPDI/T0NUjL7BayI/AAAAAAAAAao/egHO4m5eAfQ/s000/5.jpg" title="mobil keren modifikasi jadi canggih" alt="penegen punya mobil seperti ini" /></a></li>

    </ul>

simpan dan lihat hasilnya
semoga bermanfaaat