Cara Membuat Nivo Slideshow Posting Untuk Blogger

Cara Membuat Nivo Slideshow Posting Untuk Blog - Halo sahabat Blazer Blog kali ini saya akan membahas bagaimana Cara Membuat Nivo Slideshow Posting Untuk Blog, Nivo Slideshow adalah sebuah widget yang berfungsi menampilkan gambar dengan deskripsi dengan efek slide atau bergantian. Silahkan lihat demo nya terlebih dahulu. DEMO.

Dengan menggunakan Fitur slideshow kaya DEMO dan GAMBAR diatas kita bisa menampilkan artikel penting,popular,dan sebagainya dihalaman utama Blog kamu, dan tentunya akan menambah keindahan Template Blog kamu. Bagi sahabat Blazer Blog yang setia yang pengen tahu cara membuat nya silahkan ikuti langkah dibawah ini.

1. Login ke Blog kamu.

2. Pilih Rancangan > EDIT HTML > Cari kode ]]></b:skin>

3. Setelah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>

/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* 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
*/

/* 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/AVvXsEjTX6JwH6LB23YN7UGR5MGAWyCuLOs25GOwpf7CWQCOhpvb6GOnsWa4djGpvWKqRKNuO4GNwrfxvSP2EbwDFNp06mmMG7xdtaW0NIfNKS7gCM4yzfRwniBXeVPlncl1jHxPXuBphmFadLNX/s1600/slider.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/AVvXsEi1Lb3NR8RGG375J2e_GEEr0W-gGDKv08_7mnUb73L3Giko7_vElUyIgisbAFHoYIeVm2lt5S6-H2qgLdl6EyHncwv5Ew-GObiqDknxl6Ur7DLfzuwxgbZP2wHmzycwlsYoxT7kSpyHwyBf/s1600/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/AVvXsEhqcrlFlUsf8jp3jagWGopCMC-Ua5lxo0t2dwAUhvaDcahXmWfMpBCiOgYgV-h8YC_ap1zceU4brODasM9x5xHzvB7LlO4c3elYjaknIClPt04bzS8mXP53YI82jSOfhvVIKyuD_opOxQRF/s1600/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/AVvXsEgJx0drmmXoC_uF4K-4unLfkdKgeMYstUJPQxlEjugH8sSEDv-m0GAZWK3yUaZa8K0Blf6SDNOySVe2x1oZJysDtfKT-wMSglMAXGigD1Hi4Tu-9bm9Nf6SnJKnBBtJ79Ui-gfnZgD1nFpJ/s1600/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/AVvXsEhnqAghUx_o5hkj28OCkqaJtX2kZfITnxYzpfRiQ6V7ZrN3xyzq2hnNFB9u8G71NkcfC6AqH4Vu-ja022-OK5nJebD1LAUZlZL7NU8UB2hPXSgp0m-9R9bJrS01N-kqIzJCgIIDwM1mwHLl/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

4. Selanjutnya Cari kode </head> letakan kode dibawah ini tepat diatas kode </head>

<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://blazerracing.blogspot.com-->

5. Simpan, lalu kembali kemenu awal Rancangan pilih Add Gadget > HTML Java Script, copy kode dibawah ini dan letakan gadget nya percis kaya gambar dibawah ini.

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="http://blazerracing.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Pfp7i0FSrCT7uJ1vCOWUvfqKp5iR5AqRD42xDV7o1DyzF1jvjCSE9U1-Sc2Q_b6y_Yd5NvIW6f5VZmYeL2N9Sp6LiGft7hji7IydwZlXo5vE73MdWVL8DF_MbckobUaVK9IveRmrt4yQ/s1600/nemo.jpg" alt="" /></a>
<a href="http://blazerracing.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5E9C2UWunkmX5Y84dELxl3ZrS_9nBodgM3SsA3ByrNXsJY6xkfPopLZdC5FiXzLGBBFzaqU3WjxUxKeiYDnoZi6aDWWguL_ZOKIn5JwZPaGxkSW89TiP8AHo93mfrx7u1kIi0NFUGlFG/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>
<a href="http://blazerracing.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRH-rfIcFYmrFDzRg3NwC5jPACYMG7jTtegtOCOPz88z0aaQ2PO9Hs02k42lwc4G9sHy1Y8AyPHEyqCSze3KrDqRE_wqmM8XR4STdV-0Y84TnrW0MnEr5yhm2S-qQ-1jkOEMJ9ARbsLt-/s1600/up.jpg" alt="" /></a>
<a href="http://blazerracing.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-AZWMXQlQm5EqAr0ST9PoEE7bjrJELfCLTqVG1HIEsjhvjdCXbXz0MIHjqA1PZAlMxUM3OAioa8QCMlewpoJi127dYCWFCiTFZGL__f4epkY9ad_hn71bAwTXHWGgZ2EtAh0MLac3QTbd/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>
</div>

Ganti kode yang berwarna merah dengan URL Gambar lainnya.
Ganti http://aplikasiterunik.blogspot.com dengan URL yang dituju.
Simpan dan lihat hasilnya.
Jika sobat menemukan masalah atau hal yang kurang paham silahkan tinggalkan pesan di kotak komentar.