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



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="http://3.bp.blogspot.com/-eimUpFrIZGA/UXK22jbHDrI/AAAAAAAAG1w/93YDIvf1iyU/s1600/OtoWebsite-bedugul.jpg" />
<img alt="" src="http://1.bp.blogspot.com/-oFUwdRqrT_A/UXK21hyadSI/AAAAAAAAG1o/XzE49cQrBNc/s1600/OtoWebsite-gunung+takuban+perahu.jpg" />
<img alt="" src="http://4.bp.blogspot.com/-rL5BRIpq0q8/UXK23QRE8oI/AAAAAAAAG18/klzQ_uG-VDw/s1600/OtoWebsite-raja+ampat.jpg" />
<img alt="" src="http://3.bp.blogspot.com/-0fzDWSZjUdU/UXK23JbvLjI/AAAAAAAAG14/XZZGInTuYlg/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.

Poskan Komentar Blogger Disqus

  1. Tulisan script dalam box nya ga bs di copy, kalaupun bs haris baris per baris mas. :D

    BalasHapus
  2. Apa ada yang untuk edit HTML ,,?
    soalnya klo widget susah menata nya ...

    BalasHapus
  3. izin blog walking ya gan,, salam kenal dan salam blogger
    Cara Mengobati Penyakit Kista

    BalasHapus
  4. um caranya biar letaknya gk di tengah gmna ya??

    BalasHapus
  5. makasih banyak ya, sangat membantu nih...

    http://tokoonlineobat.com/

    BalasHapus
  6. Gimana cara agar bisa di pasang dalam postingan, makasi.

    BalasHapus
  7. Hi Dear ,
    I See Your Blog Daily..Your Blog Is Very Usefull For Me .I Like SO Much


    You Can Also See..

    Slider Maker is the easiest tool to generate jQuery Photo Slideshows - Upload jquery slideshow maker on your web server and start building your first web slideshows.

    Visit Now - http://www.slider-maker.com/

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top