Membuat Nivo Slider dengan Jquery

Ada beberapa slider gambar yang bagus. Tetapi Slider Nivo lah yang paling menginspirasi

Slider ini menggunakan Jquery yang menambah kesan keren pada blog

Karena itu slider ini menurut saya keren dan cool

Langsung saja

Pergi ke Dasbor - Template - Edit HTML

lalu cari ]]></b:skin>

Taruh kode dibawah diatasnya

<!--
/*
/*
* 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
* Bloggerised by http://rishad-harisdias.blogspot.com
* 
*/
#slider-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd8OuQhuxbCBfDFv49DFxu_fGkxgJpweq6WpY715nM1MSg2TUN2PMAVviS1xB465tJ-9nAUObfvsrobcQQOFh6LmCmbzzdFGo5fJUuDONe1IHuhISxnc4YrVpQMyrD-TO34-sU0sMj3bU/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/AVvXsEijL6LwC3vqxiK7_KH6B9LPcWLHVeQbuM2j-jxmimIu_qC_k2VmfHQovh4d8rfm7PELNj_R6kfnQaxI2n1Xh5gOueo5dv-VsoX3l99iQWU9R3ad4KtPkg3udDK6kRAr5TiXKwCcmovvPdxK/s1600/%5Bbloggertricks.biz%5Dload.gif) no-repeat 50% 50%;
margin-bottom:30px;
}
#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(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lh4LcWjY/s1600/%5Bbloggertricks.biz%5DBullets.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/AVvXsEiMETI1KjjuMNwWM_B92xW3pIkU-YjB6SHZ-u0G7SnNows8AVrzhuxH4MEXJLPiWD4pBmXAVgSPzSwbVnBCi92m6jYwxoFkZkoojYowlaM84-obRV2T9GXf417g6dBxZHxUO2OEi7eE4ZyU/s1600/%5Bbloggertricks.biz%5DArrows.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/AVvXsEiMETI1KjjuMNwWM_B92xW3pIkU-YjB6SHZ-u0G7SnNows8AVrzhuxH4MEXJLPiWD4pBmXAVgSPzSwbVnBCi92m6jYwxoFkZkoojYowlaM84-obRV2T9GXf417g6dBxZHxUO2OEi7eE4ZyU/s1600/%5Bbloggertricks.biz%5DArrows.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&#8230;) */
.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(http://3.bp.blogspot.com/-5ltb7tJGiXA/UAAMfb_54vI/AAAAAAAABD0/K38lh4LcWjY/s1600/%5Bbloggertricks.biz%5DBullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

Untuk mengatur Tinggi dan Lebar sobat bisa mengganti Tulisan merah atau 618px untuk lebar dan 246px untuk tinggi

sekarang cari </head> dan taruh kode Jquery ini diatasnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

*Lewati tahap ini jika sudah memasang Jquery

Jika sudah, sekarang taruh kode dibawah ini diatas </head>

<script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Untuk sana selesai...
Dan untuk pemanggilannya, kita gunakan kode dibawah ini

<div id='slider'>
<img alt='' src='http://animesubs.bl.ee/slide/images/1.jpg'/>
<a href='http://dev7studios.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVN_aDJv_xWtYAhKxdQFrDbu1mWmRNYKJQ8PVkumS78Oc85qygYSdMlnMBl2w40hFxb1wIpuAc7Phgy-z3HRppJ2bF1KqEBRJKcOUr0JmFKlCx6q7qvCePCnD2EnrJ8MmaUd_7Vd-r2Rhy/s1600/8041372943_cf28fa23ae_o.jpg' title='#htmlcaption'/>
</a><img alt='' src='http://www.phantom-theater.com/memspace/images_up/95820a99b9d1769637508827f5662641.jpg' title='This is an example of a caption'/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BLAWCXoX4JR7heM1GynJw1Eak6wxzXCLvIDJItc8V-VJXm6sl5Oiiofkj_pLuiTAyXRi9bD8XtrD3sTRcgeb-cgr28b2U60q8Lkr00K2SCx7CSgqbcr4_h-elXO7dwLUk5PoiXcmS6o/s1600/nemo.jpg'/>
</div>

Pergi ke Tata Letak - Add Gadget - HTML & Javascript dan taruh kode diatas :)
Ganti Tulisan merah dengan url gambar sobat
Selesai sobat memiliki Nivo Slider :)