Cara Membuat Slide Show Foto Di Blog

1.Login Blogger.com
2.Masuk halaman Rancangan lalu pilih Edit HTML
3.Cari kode </head>
4.Selanjutnya taruh kode dibawah ini sebelum kode  </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

    <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:600px;
    height:240px;
    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:600px;
    height:240px;
    border:none;
    }
    #slideshow-caption {
    width:600px;
    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>

5.Save/simpan.Selanjutnya sobat kembali kehalaman Rancangan lalu klik Tambah Gadget kemudian pilih HTML/JavaScript dan masukkan kode dibawah ini: 

    <ul class="slideshow">

    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3sCQrU-aSK03bdsLflE_PIPUl23CJIvLAeQoDjXtZyjEazbCQZQqsz9y6qDehBZSbge0Kd2gbY20G9dkjfB5sSUUYrO2t4TqOkeWycENaCI894_kGN8lnN7j8gqtedF2xv9qKEJJe-3Q/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvxTx2kwSUb25leedPcBWojmS_1lvjbR7gvfaX2M2iPykDj1_R7eEYHTnDuFlZKeHwM3uu2uosSHKaU6_KtoxOLqyPi_kdXIFVZ8TuP3jLyDDK2-vCaN8h-bUGX9ay65iCJD8O_d7B04/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7OiRCbF5SwNDSC-zOOEJmKj3JeHOanSmLYrstnCZMNLh2mUTilLjgoPZMrZZFtU573GyxQFGV6sbwB61qsQNlsC5nusdtnJPVCYORc6ThCXBn4EB3A90641LjJvad5FhvQ7LZo3EBaTM/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

    <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aThjTF1UjxdCw3ZYDT5qAEzFA_1aqZhYq7K6ud1R7sFr8AHmPT_W8UCH5XTkafn6GTrxdLQ6vg7Ycou3MIL3nNpDu5D7OccJLHspi5f5YYtzR5e7dfygbB28893d2C8Lq9awZs6EGck/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

    </ul> 

Posted in: Blogger