Tutorial : Image Slide Show

Assalamualaikum and annyeong! 

Hari  ni NS nak share satu tutor yang betul-II simple dan mudah. Image slide show! Sesuai untuk diletak kat disebar blog korang atau mana-II tempat yang korang suka. Heeeee. Tak dapat gambaran lagi?? Cuba clik live preview kat bawah.

{ LIVE PREVIEW }

Amacam? Berminat? Let's start the tutor!

1. Dashboard > Layout > Add a Gadget > Html/JavaScript

2. Copy ke semua kod kat bawah ni :-

<style>
/*
 * jQuery Nivo Slider v3.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * Mhel, of html-and-etc.tumblr.com tweaked the original codes given
 */
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:500px;
 height:400px;
 overflow: hidden;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
 max-width: none;
}
.nivo-main-image {
 display: block !important;
 position: relative !important;
 width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
 top:0;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
 overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 width:100%;
 z-index:8;
 padding: 5px 10px;
 opacity: 0.8;
 overflow: hidden;
 display: none;
 -moz-opacity: 0.8;
 filter:alpha(opacity=8);
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
 padding:5px;
 margin:0;
    font-size:14px;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
    display:block;
    width:31px;
    height:34px;
    background:url('http://static.tumblr.com/y0x5xm1/ei3mcx19v/arrows.png') no-repeat;
    text-indent:-9999px;
    border:0;
 
}
.nivoSlider .nivo-directionNav a {
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {    left:15px;}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
 text-align:center;
 padding: 15px 0;
}
.nivo-controlNav a {
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
</style>


<!-- START NIVO SLIDER -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://static.tumblr.com/y0x5xm1/WdCmcx05a/jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
     var $nv4wp = jQuery.noConflict();
  $nv4wp(window).load(function() {
   $nv4wp('#slider').nivoSlider({
    effect:'random',
    slices:15, // For slice animations
    boxCols: 4, // For box animations
    boxRows: 2, // For box animations
    animSpeed:500, // Slide transition speed
    pauseTime:3000, // How long each slide will show
    startSlide:0, // Set starting Slide (0 index)
    directionNav:true, //Next & Prev
    controlNav:false, // 1,2,3... navigation
    controlNavThumbs:false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel:false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    manualAdvance:false, //Force manual transitions
    captionOpacity:0.8, //Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
   });
  });
  </script>
    <script src="http://static.tumblr.com/y0x5xm1/e1gmcx29e/jquery.nivo.slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<!-- END NIVO SLIDER -->
<br />
<center>
<!-- START NIVO SLIDER -->
<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="slider">
<img alt="" src="http://24.media.tumblr.com/tumblr_m4dwzevwSm1rvbnxgo1_500.jpg" height="" title="" width="" />
<img alt="" src="http://data1.whicdn.com/images/118749569/large.png" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/118749367/large.jpg" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/116696829/large.jpg" height="" title="" width="" />
<img alt="" src="http://data3.whicdn.com/images/116691527/large.jpg" height="" title="" width="" />
 
<!-- END NIVO SLIDER -->
</div>
</div>
</center>

3. Then, pastekan ke dalam kotak yang disediakan. Lihatlah hasilnya! Good luck, guys~