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*/
/*
* 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>
<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!
Loading Gambarnya Lama Banget Ya Sobs
BalasHapusYM : dragonandoblogspot@yahoo.com