jQuery Smooth Slide Show For Blogger

Demo

1. Masuk ke account blogger dan klik drop-down.

2. Lalu Pilih Tata Letak

3. Klik Tambah Gadget dan pilih 'HTML / Javascript'

4. Copy kode dibawah ini, dan paste di 'HTML / Javascript'

 <style>
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.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:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
table {
 border-collapse:separate;
 border-spacing:0;
}
caption, th, td {
 text-align:left;
 font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:"";
}
blockquote, q {
 quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
 display: block;
}
a, a:visited {
 color:#2d3536;
 text-decoration:none;
 border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
 color:#9e805c;
 text-decoration:none;
}
#slider-wrapper {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHhByJqaOETfeJyzDqa18bc0hBl3GhkBMB_XcBJXp7Tgcbt7nHNlGBrjqUfU51myUb01uDQR4GwmTMgurVmu6cBlr9Nb5Y7irTfgkak4un8-w8F3VWWjOc0454AsKc2KVrkv1DFPYmN5M/s1600/slider.png) no-repeat;
    width:494px;
    height:310px;
    margin:0 auto;
    padding-top:23px;
    margin-top:50px;
}

#slider {
 position:relative;
    width:430px;
    height:250px;
    margin-left:32px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi111xuyj76pynjuZg5VImpZrnLp3943hAzBtFQ-UK1RhbkVk2AnzPqdDLrFGowuOMIqlbX57rQUVL2LXCg4MBJhHJD0itxjiJbxo5H9qTKRFVhEto6Gf7gkV8cUWPyrHCHvuy0E-vT6j8/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}

.nivo-controlNav {
 position:absolute;
 left:163px;
 bottom:12px;
 background: #000000;
 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 3px;
    border: 2px solid #CCC;
    opacity: 0.7;
    z-index: 99;
 }
 .nivo-controlNav:hover{opacity: 1;}
 
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk8jPuSAHOBCRFwhxp1eQbL-UTSO-rlWTskXvlXkRS1W5QNIjD2-lv2reyVZmpS7YFTgi-ADSCD2qSQCNhY3uyheGZgCskLpDHhajwABAMJHT1v40_IAk4rSndsLbSe2lbWr8DrAlHEzQ/s1600/bullets.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:0px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}

.nivo-directionNav a {
 display:block;
 width:35px;
 height:65px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnZWgBt5f1epUBBrJUc2WAPXb-ODUBJwQF1hHWpKNWzhk0I_HGzVR2Xy_i7wkofu4aV4-_w1BGAsYGyEuJtMs9uW8YhYbOaFawJ3x4zPwQ43P3SY-ixVANM6G90RT0ywIzOl2YQdEiBn0/s1600/arrows.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-35px 0;
 right: -40px;
}
a.nivo-nextNav:hover{right: -41px;}

a.nivo-prevNav {
 left:-40px;
}
a.nivo-prevNav:hover{left: -41px;}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}
.nivo-directionNav a{top: 40%;}

.clear {
 clear:both;
}
</style>

    <br />
<div id="wrapper">
<div id="slider-wrapper">
<div class="nivoSlider" id="slider">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipX_9P8NS2PmUG5ZEARpsT72REJ_Af8RgqAs05Cei9sxgfokMHwPG7lZmrApl9BOcwDbNB4yZP2nHiP6jWDyIBES2pzjoprWiBFxMIlCEvAqaJG3qL0ZzcWvqerNo-GXu09__N_Kn7uzo/s1600/btrix-London_Barrier.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0EuchZRUFgAVJAa5XIpLy7gAWZVv28lC9jzZkAQD-KjY02m1IHiUsFMiYs0gXPvjpJ0LC5NR3AWXMBX2Xk5JJW2msN8vBfRZYXKLq7zdbv11DvVA7ABRF5dj6fCOvi1FNAepbjfSzSIE/s1600/btrix-sunset.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRkJhc0yzwrCIent4Mg9YVNqAuGLWNVdcBujIAKcUS6tkgqrYIFZx-0Dgr4v4oNN_gvdM3e8nHDV3NDrHEBHxXMt2i8LMtAVA8yfZuBw9CTR3KyrnVSDI3ONyKjr9wJPcvFguHtRK2VE/s1600/btrix-car-wallpapers.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsLIuWzqIQ6KtTb-aGIBDDzCA8OzBcq9VTHgDwYAuueEM0NpJ92M6-925DZQopdttjpbkjClodjm1E_RthjEVkfQINDEG_aU04ItB6L8guG683cVyWpXGECdWVDt9nxgEuHYvVRJi0Ak/s1600/btrix-spring-nature.jpg" />
</div>
</div>
</div>

<script src="http://bloggertrixcode.googlecode.com/files/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://bloggertrixcode.googlecode.com/files/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({directionNavHide:false});
    });
    </script> 

5. Simpan

Selamat Mencoba...

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM