Nivo Silder for Bloggers

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.

Lihat Demo

---

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrMjtQWgoA0Atm8BLzBziwpFSziSTKncisDkcFlvuSmO1i3Z4xr97OyVJL7ZSoj2MLPRcECV2EV5gXYQ-XwcutkqrISb9TaECDKlf2cFUOdgY35wR-2N6mgThOH3dXvNkFCE-tzYBO3g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf3cLSilbesm50e6v9Z6fvKnY4UgPCjBOidsVLx5fsdM0k6557hIFwI-2_qjzT3CyS_ZsZhKxHbVW31LvDsNVy8w15O_bnZdF65OyZURcPaILlOA2b0tKYV0q2lK-E4HWsOvg-OsABN98/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2o4a9Xq5x7Zi365PBbmPEryKwRC2iJSjKh6dLiN-gGsMU_JPSeuywCQJU3QvsCCEYcZmtxs_j5fAwg1eEFaMikV4PHSiCaAAoK00IlKmgNqO81vlz5U3AB5Qy_XHHK-1YEKyBJl-y6Pc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgedjClNLcE08CIihMXD3WCifjJt3v5kSKX2AxbuX9Ct2TdhX0-MjuhQIJ_pQzeIqfoUxwXlWJiUaZYCWYOgHV-G0-2EGriw-e2py1peVBx758KF_xMJxXLhGrGr0h9sO8GvWwDD21a7AA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWL5dqiI1rT5GNP1B5CXJGeJsIBVMHzY23iY3gmj_ORe00dspNoVzbMGBOrLObfyGk-2yCfyaqbyNQimCupW3Ae9MIzHvgU4kK0YmGk3jVHk3bDucpEmHP5xrhjggeVQZhfWgWU7zRTQ/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!