jQuery Slide Show Lembut Untuk Blogger

Menampilkan gambar yang kita miliki pada sidebar blog kita adalah sarana terbaik untuk memamerkan semua gambar yang kita miliki kepada dunia, sehingga semua pengunjung blog kita akan melihat semua gambar yang kita pamerkan pada blog tersebut. Dan untuk tutorial kali ini Oto Website akan membahas dan berbagi tentang gambar slider yang bertema 'jQuery Slide Show Lembut Untuk Blogger'.
jQuery Slide Show Lembut Untuk Blogger memiliki efek yang lebih menarik dari slider sebelumnya, karna gambar slider ini memiliki lebih dari satu efek yang berbeda-beda ketika pergantian gambar.
Untuk lebih jelasanya silahkan lihat demo berikut!

ScreenShot

Lihat Demo

Lihat Demo

Cara Membuat

Untuk cara membuatnya sendiri sebenarnya kita harus menambahkan dua kode berbeda, tapi disini Saya telah menjadikannya satu script mudah tanpa harus Mengedit HTML Anda.

Cara membuatnya Anda hanya cukup ikuti langkah berikut:

1. Login ke Akun Blogger Anda.
2. Pada Dasbord pilih Tata Letak > Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Lalu Copy kode berikut dan letakkan pada element tadi.

<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;
}
/* Gaya arah Nav (Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Gaya Control nav (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:"" "";
}
/* Tags HTML5 */
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://code-otowebsite.googlecode.com/svn/trunk/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://code-otowebsite.googlecode.com/svn/trunk/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://code-otowebsite.googlecode.com/svn/trunk/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://code-otowebsite.googlecode.com/svn/trunk/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/AVvXsEhBpbLesS9GAj7-y_RSytHFSOmnsuSAvn74H5-sklS3cT4TOWRJqi0-3hPCeACYSwypTubLYdhOsgQ7U5mcGJx3KV5P6-5ue_DRIluy-6ZxFmg2YY6HGg8mHzyn4SNQUWrfkCPdojxXrg/s1600/OtoWebsite-bedugul.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYinTFF-H1OtdKNLHhzINm06h3-7XFeLLy59H_SI2UCL9lHr2gO5qHVaxV6aCrc05HG9rmf5jR-XRgncKiGoRkFGOjb7Bp3VthQy0_Uesngq2ODMgfF8V9i9E-stroVo4udf7t3jbbmw/s1600/OtoWebsite-gunung+takuban+perahu.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lgl-7Kcv7EKejN-_7rTnCaJeJ7ZdMUkIGkhfDpuXEWk8l3F_zjI5Ur9kiYCjl1N-5sxFNTwsAR9GJPM9o-80mBbwJa34iOJ1KXBmzgmHMzAvTv7UbRFd7_O6loEAZ65VmUjMMoJ4Cw/s1600/OtoWebsite-raja+ampat.jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRKnLIQNT4PE3lrJYQCBJzbp1ULM88HLfCqWw9AyALFhmhk8rCk3xIT0yPgSZY0oBRCbho1zPnvwplvv5xRkrO7JGsLIwTEgRB75geX4zMUPEhwK84kyDvWHKUzRjyEMtYYmB-2p7dA/s1600/OtoWebsite-watu+ulo.jpg" />
</div>
</div>
</div>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="https://code-otowebsite.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({directionNavHide:false});
    });
    </script>

• Keterangan: Tag yang di blok kuning adalah Url gambar, silahkan Anda ganti dengan Url gambar Anda sendiri.

5. Simpan Widget.

Dari Meja Editor

Saya rasa cukup sekian untuk tutorial blogger kali ini yang membahas jQuery Slide Show Lembut Untuk Blogger, mudah-mudahan artikel ini dapat bermanfaat untuk teman-teman semua. Bila ada kesulitan dalam peenginstalan jQuery Slide Show Lembut Untuk Blogger maka silahkan ajukan pertanyaan Anda dalam komentar.