Nivo slider adalah salah satu konten terbaik slider jquery datang dengan Default 3 tema, Orman dan Pascal dan hari ini saya akan memberikan tutorial tentang Nivo Silder for Bloggers.The Pascal belakang chossing slider Nivo atas lain yang telah 16 efek transisi yang unik yang membuat dunia yang paling indah slide gambar slider.Nivo Silder for Bloggers muncul pada latar belakang bergaya dengan 'Pita Feature' di sudut kiri atas, Anda dapat secara manual menambahkan gambar sendiri dengan mengganti URL gambar Ribbon dengan URL Gambar Anda.Anda juga dapat menambahkan keterangan dan link ke pengaturan slides.Cara Meamasang Nivo Silder di blogger sangat mudah Anda hanya perlu menaruh beberapa kode pada templates.Untuk lebih jelasnya silahkan Anda lihat demonya.




Cara Memasang Nivo Silder di Blogger


1. Login ke akun blogger Anda.

2. Pada Dasbor klick Rancangan.➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup template Anda.

4. Lalu dalam Edit Template Anda cari kode ]]></b:skin> atau <style> blia kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang Anda letakkan kode CSS berikut ini tepat di atasnya.

/*Start Nivo Slider Css otowebsite.blogspot.com*/
/*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* For blogger by - dek_rif @ otowebsite.blogspot.com
*
* March 2010
*/


/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}

.nivoSlider {
position: relative;
}

.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* 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%;
}

.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* 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: 8;
}

.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: 9;
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: 9;
cursor: pointer;
}

.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background: url(http://1.bp.blogspot.com/-udXAdQuHv24/UAAw55g2OiI/AAAAAAAAEUQ/DfOo4r0bD2g/s1600/otowebsite-slider-bg.png) no-repeat;
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}

.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(http://1.bp.blogspot.com/-6I5YZYAWAHE/UAAw1wT7syI/AAAAAAAAEUA/t4d04d4lI0M/s1600/otowebsite-loading.gif) no-repeat 50% 50%;
}

.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}

.theme-pascal .nivoSlider a {
border: 0;
display: block;
}

.theme-pascal .nivo-controlNav {
background: url(http://4.bp.blogspot.com/-UzY9q0vDohU/UAAw0XHAD2I/AAAAAAAAET4/_p3J3VbU--c/s1600/otowebsite-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}

.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(http://2.bp.blogspot.com/-tmI8X4qU8F4/UAAwyVLtB6I/AAAAAAAAETw/UQnwJSX8Hoo/s1600/otowebsite-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}

.theme-pascal .nivo-directionNav a {
display: none;
}

.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}

.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}

.theme-pascal .ribbon {
background: url(http://1.bp.blogspot.com/-TyOgFC_sbBQ/UAAw4GB0FUI/AAAAAAAAEUI/dUDxHxGx-Uk/s1600/otowebsite-ribbon.png) no-repeat;
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css otowebsite.blogspot.com*/

6. Masih dalam Edit HTML sekarang anda cari kode </head> dan letakkan kode berikut di atasnya.


<!-- Nivo Slider Scripts Starts-->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Nivo Slider Script Ends-->

7. Simpan template.

8. Langkah selanjutya silahkan Anda pergi ke Dasbor lalu klick Rancangan ➨ Tambah Gadget.

9. Pilih elemen HTML/Java Script ➨ Lalu letakkan kode script berikut di dalamnya.

<div class="slider-wrapper theme-pascal">
<div class="ribbon">
</div>
<div id="slider" class="nivoSlider">
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
<a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>

10. Simpan.

Keterangan:
Ganti YOUR LINK HERE dengan Url tujuan.
Ganti IMAGE URL HERE dengan Url gambar Anda.
Ganti ADD CAPTION HERE dengan Keterangan Anda.

Sekian!

Saya rasa cukup untuk kali ini silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article di atas!

Posting Komentar Blogger Disqus

  1. Loading Gambarnya Lama Banget Ya Sobs

    YM : dragonandoblogspot@yahoo.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