Obatbodoh blog, - Saking reringnya ngeblog jadi jarang tidur, tapi ya itulah namanya blogger, sering bergadang sering praktekin tutorial dari para sobat blogger. Karena paling suka membuat themes blog yang ada slidernya, sampai-sampai nyari cara buat masang slider nivo slider yang sampai sekarang masih banyak menjadi andalan template-template blog premium.
 |
| Nivo Slider |
Langkah 1 Add CSS
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kL-J4dYLhWMl687X4qtrjMjW6CWxBWc5EwKh3MiD9aTfBYqjdho7La64wLHvMv8W-OkkWL0oKn266wOnZtPSo0u4UiVzEejiTbm8O-OPqIzMlIdNnxW80YXgCthmePLVjhlhjQxthiI/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0S3mXxo4VrAy-7uuJRVUNCYSR0zQZBTZQvDKsqKnP4op5aewOb7vsPAbQKGN_AyeXSA67JbaZ215-zKXkV6a9cYwxACb9XHhVIgWCPO-pUDJEAmeLhDQHZwKTq5PXA50Jv-uVwMru_U8/s1600/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:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOx42q2RB_RVBnv9bUVNZJUh7I1FnDubkKNSmcivbWl28OgBOX6ATP6SeqA8bzWpEWKn2JWN__X9_hFd9yyH6B6wIc4FWAHo9J-9MMLJG-GSEYuWPoEW0zh11r0iGWJfmRDuB6q3TxS78/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_09nHcjxxlC0MF4aZJ3Q7c0uLJ61Lt6MA1ZSMXCBivHk9_K-wjvPJ7nR_vsOLiHQC51-jF4s3ElJ86dAjpnxMt3PlzA_XkhGblNP8Fgh3mg6W4BGqreXRu15pmgY5cqvPVPCIiuKdUhs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.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;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_09nHcjxxlC0MF4aZJ3Q7c0uLJ61Lt6MA1ZSMXCBivHk9_K-wjvPJ7nR_vsOLiHQC51-jF4s3ElJ86dAjpnxMt3PlzA_XkhGblNP8Fgh3mg6W4BGqreXRu15pmgY5cqvPVPCIiuKdUhs/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* 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;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOx42q2RB_RVBnv9bUVNZJUh7I1FnDubkKNSmcivbWl28OgBOX6ATP6SeqA8bzWpEWKn2JWN__X9_hFd9yyH6B6wIc4FWAHo9J-9MMLJG-GSEYuWPoEW0zh11r0iGWJfmRDuB6q3TxS78/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
Paste kode di bawah ini tepat di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Langkah Terakhir adalah simpan template dan kemudian menuju edit Tata Letak kemudian pilih add gadget dan kemudian paste script dibawah ini.
<div id="slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6JWpspWzz7Z8BlyXVpijcAi45fZgT5nNeSI_8NcSDSN2Zp-62qumyy24SF4KMWtrMysTR-ZmC3qreewGUVNkGpkrzn8BEA7DmiWCHdTKQFvXqEZC2onzAGKD6R0_7NFj9DGdMWKy8Ins/s1600/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFwW5uMzK7LyeDO_xdkQWr1M-Ee0CBhyBW1MhLCZBrQcNuZRBCjVikwfqpj5FFzp_g4lDKTGgFHxLWykgI01ABy5EOolekxLRJy2rrgsmEOnpam6V3sZRbdA5hdXPp6x2HaExSNumLXs/s1600/up.jpg" alt="" title="#htmlcaption" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIoGc_NuUNr_eKwpjOowMfIdfeTkLUWt6FJepxERXJGa375ZP4aOQRSD-XFnPvaMEROHmPnTiC8sABAUuRpYY7jRrS3zHYFXgoWv8JV28rkMAFHHPlA_zpCsyILHNNdn_x6fpLQuOOCs4/s1600/walle.jpg" alt="" title="This is an example of a caption" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywxBK_w6vjaymKze_0IAu9evJ3DYkZA1RO1Ue6OdTekllSXQjAhq1N8gUL71iDe8bNvV5rZ8yGGb3Gs9G_BNxfVj2w-D_Fh1BfTsljaN5ofLBfS6d2M3V5vVul6ZoTPjGYGGh-CGL1Ik/s1600/nemo.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
Selesai Sampai disini kawand. Semoga Berhasil.
