Cara Memasang Slide Responsive Nivo Slider di Blogger

Kembali lagi Love Karawang membagikan Tutorial blog, dan kali ini saya akan membagikan Tutorial membuat "Nivo Slider". Gambar dan Link pada Nivo Slider ini kita pasang secara manual dan untuk sobat yang bertanya apakah Slider ini membuat loading blog berat? dan jawabannya adalah Ya, slider ini membuat loading blog menjadi berat karena ukurannya yang besar (Big Slider) dan menggunakan Javascript yang lumayan banyak. Selain itu sobat juga tidak usah khawatir tentang "Responsive" karena Slider ini 100% Responsive.

Jika sobat tertarik untuk memasang "Nivo Slider" di blog, ikuti tutorial di bawah ini :

Buka Blogger > Template > Edit HTML

Letakan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

 /* CSS Nivo Slider */.nivo-controlNav{position:absolute;left:260px;bottom:-42px}.nivo-controlNav a{display:none;width:22px;height:22px;background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hNcs8vcFSPP7LKQtWNmt0JVz17vG4gqG0fY5BzOXFUO3KvVSWeT_meukpoOqcCbGER-iMe4bsirruCxhyphenhyphene-K7dFk29jjZ8_lm0x-lyPBO97kgAP63YoGTtt089bx02_eNUUZr1mgpnI/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/AVvXsEiqUHKkuH8PB2C9jwMVjBtf6zAAkx3b7d9ctWA_lgprmoBX8pappK8_Cfv-v-pH6ReqmTtyb8-Ex48FaIHSkuM3pAWXDItoD7ftLrAp7q2svgBS0-VqCtdH38RNgUWqDyHDBQ56Jrn9k_M/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}.nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0;left:0}.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;backface-visibility:hidden}.nivo-slice{display:block;position:absolute;z-index:5;height:100%}.nivo-box{display:block;position:absolute;z-index:5}.nivo-caption{position:absolute;left:0;bottom:0;background:rgba(0,0,0,0.8);color:#fff;opacity:.8;width:100%;z-index:8;padding:15px}.nivo-caption p{padding:10px;margin:0}.nivo-caption a{display:inline!important}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0}.nivo-nextNav{right:0}.nivo-directionNav a{display:block;width:30px;height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUHKkuH8PB2C9jwMVjBtf6zAAkx3b7d9ctWA_lgprmoBX8pappK8_Cfv-v-pH6ReqmTtyb8-Ex48FaIHSkuM3pAWXDItoD7ftLrAp7q2svgBS0-VqCtdH38RNgUWqDyHDBQ56Jrn9k_M/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-controlNav a{position:relative;z-index:9;cursor:pointer}.nivo-controlNav a.active{font-weight:700}.nivo-controlNav a{display:none;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hNcs8vcFSPP7LKQtWNmt0JVz17vG4gqG0fY5BzOXFUO3KvVSWeT_meukpoOqcCbGER-iMe4bsirruCxhyphenhyphene-K7dFk29jjZ8_lm0x-lyPBO97kgAP63YoGTtt089bx02_eNUUZr1mgpnI/s1600/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left}

Letakan kode Javascript di bawah ini tepat di atas </body>

<script src='https://cdn.rawgit.com/QuinnTheme/fuckthishit/master/nivo-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
// Default Nivo Slider
$(window).load(function(){$("#slider").nivoSlider({effect:"fade",slices:15,boxCols:8,boxRows:4,animSpeed:800,pauseTime:3e3,startSlide:0,directionNav:!0,controlNav:!0,controlNavThumbs:!1,pauseOnHover:!0,manualAdvance:false,prevText:"Prev",nextText:"Next",randomStart:!1,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}})}),$(window).load(function(){$("#slider").nivoSlider()});
//]]>
</script>

Lalu Simpan Template.

Selanjutnya buka Blogger > Tata Letak > Tambahkan Widget > Pilih HTML/Javascript

Letakan kode di bawah ini pada kolom HTML/Javascript

<div class='nivoSlider' id='slider'>
<a class='nivo-imageLink' href='#link' style='display: none;'><img alt='#JudulGambar' height='300' src='#link-gambar' title='#JudulGambar' width='1000'/></a>
<a class='nivo-imageLink' href='#link' style='display: none;'><img alt='#JudulGambar' height='300' src='#link-gambar' title='#JudulGambar' width='1000'/></a>
<a class='nivo-imageLink' href='#link' style='display: none;'><img alt='#JudulGambar' height='300' src='#link-gambar' title='#JudulGambar' width='1000'/></a>
<a class='nivo-imageLink' href='#link' style='display: none;'><img alt='#JudulGambar' height='300' src='#link-gambar' title='#JudulGambar' width='1000'/></a>
</div>

Settings :
#link ganti dengan link atau tautan pada gambar.
#JudulGambar (ada 2) ganti dengan Judul atau Title gambar.
#link-gambar ganti dengan link atau tautan gambar.

Lalu Simpan dan Lihat Hasilnya.