Slide

Login Blogger > Design > Edit HTML
Salin kode berikut di atas kode </b:skin>




/*
* 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
* Editor 
* http://dopind.blogspot.com/2012/07/nivo-slider-slider-blogger-keren.html
*
* March 2010
*/

#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5QtX9kCNWBWrT_DQ-TjZFQLgKxRFU0pjUltNzWXa_VpLAfoUyikzbvYkRooYvJ6XO2e20t5EORM9Up-WOIKXWUYlXEL-erxFAq8PQqZsfcPVRf_itdnBP1ZR-t9OX20vrCdU7pVUK3Iw/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/AVvXsEiRjoWywzJLMS-fXYo3Vu9C3hIZbtGoNEujsDKArQH5tvp7OPflC3ZOXWjaQLFsFfhd0Belqc0UwlKjKXqBPRS95kKUkuaGZm5130GSzm3yWmvV0OcR58v7tIgF0PCsl40Rp557CE2kSHI/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/AVvXsEiX-B2DjfGoH8fqezrY0dBhWYkLHvlgLHQdbegEjhudEy3-LaxT_jPGv2GkZqXzQC8Wb9KWb_L1F2tPMzKpGNmqC4549bJ-MzQHTYuHB18P0nSwcWIj7XsHjHQqi3jnhFpAkjVDfjPqdRA/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/AVvXsEif14pj5sTpo2GTi1yLKk-xiRyLswRh8Cv7Zq8zYQ5u8Tb1tazPBYMzmtOzD5ElVsMtCO2rNfp-FXOdPYKJ4CzKI9CARZYyUA0bnP_FGBGuBuYQoL-QoBnsXwk-WuboGDtKseCj2RVvX_s/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/AVvXsEif14pj5sTpo2GTi1yLKk-xiRyLswRh8Cv7Zq8zYQ5u8Tb1tazPBYMzmtOzD5ElVsMtCO2rNfp-FXOdPYKJ4CzKI9CARZYyUA0bnP_FGBGuBuYQoL-QoBnsXwk-WuboGDtKseCj2RVvX_s/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/AVvXsEiX-B2DjfGoH8fqezrY0dBhWYkLHvlgLHQdbegEjhudEy3-LaxT_jPGv2GkZqXzQC8Wb9KWb_L1F2tPMzKpGNmqC4549bJ-MzQHTYuHB18P0nSwcWIj7XsHjHQqi3jnhFpAkjVDfjPqdRA/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Salin kode berikut di atas kode </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() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>


Klik tombol 'Save Templates' , kemudian klik 'Page Elements' (letak gadget di atas postingan? pertama buat gadget lalu klik dan geser di atas 'posting blog')  > Add a Gadget > pilih HTML/JavaScript

Salin kode berikut #ganti kode berwarna hijau dengan link gambar

<div id="slider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3sdNprCak2ta_YMGxjWnvBbNN7McBVmEzbTYTgp0AXWTTKUwDYzIvdtHWrjWIFe3PxmRmLo-0n_VAqwlw28jqt5E1vHBfwkFSvOVVnU5mG3y43SoaKs4GCDhchDuiTFwB0HqtI5bvAR4/s1600/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemmGmuH-GIqmbqHxd7WHrQ1333yDTMGDryly7N4VFiD8nZQmYbBrvqxf79rlkqA_2lSWFDQfxQNRQ9KyPAMQEcwz_t7VeJvc4yobmRUdjYBYpkRhFyXeGbpJxduACd6PHWniLrNC9n0g/s1600/up.jpg" alt="" title="#htmlcaption" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgue5pB7TKo6ACDcVIoRYHOd_nGQrmrVCmCLbLPeg17jnnBQl0vPYcwge_fhGJCO4_D705Cwu0X-mBi3632kRQ0gIS-Yd2zxFQVq0UdcC1upqkMaPH3eaQSL9YxcNm0q6O5m6env9dxBME/s1600/walle.jpg" alt="" title="This is an example of a caption" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXui8b_oWDmoX5vjxHEANyNs2usSMZqlgJPgqEjPt007kjo2RCy0kRH4lAF1ns-IgMKSXBNDNQv0bS-L_rZql-9f9dC4dM6oxYUGseH1w3DvdOR04jKnz-52kPo9iiJHLSWO1gZAWKABM/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>

Nikmati Nivo Slider, Slider Keren Blogger di blog kalian sendiri ^^