Membuat Responsive Nivo Slider di Blogger

Membuat Responsive Nivo Slider di Blogger

Rio Ilham Hadi

28 September 2015

Responsive Nivo Slider For Blogger - Kembali lagi Dunia Blanter 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.

Demo

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/AVvXsEh5MjYDw_RmvN3V4bat-VFzJ0oVJB9Sm1VDGf89X6PdFPSM5sZA7y0pQ4gp9DfiGFO1wZw9l-isg_c6UXDTJmZ4HRQir9nZZj6oKRU8otBkG6TLlR8GBe_oCx_AdX7qZXGYzgbMluaX7AE/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/AVvXsEhdi1iJA9EODIukl5GYK3_ecYnsE4Eia6yEca7vk89hs5CojVN3wdgxyTVSpKS9ts_QcYrL4SEtE7v74fddnW6ldb-4g3SoiD_hHXSwrdjTwnNo9Y7XG_HEM2qr8TWT5JEP6qvPCyD1Kzs/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/AVvXsEhdi1iJA9EODIukl5GYK3_ecYnsE4Eia6yEca7vk89hs5CojVN3wdgxyTVSpKS9ts_QcYrL4SEtE7v74fddnW6ldb-4g3SoiD_hHXSwrdjTwnNo9Y7XG_HEM2qr8TWT5JEP6qvPCyD1Kzs/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/AVvXsEh5MjYDw_RmvN3V4bat-VFzJ0oVJB9Sm1VDGf89X6PdFPSM5sZA7y0pQ4gp9DfiGFO1wZw9l-isg_c6UXDTJmZ4HRQir9nZZj6oKRU8otBkG6TLlR8GBe_oCx_AdX7qZXGYzgbMluaX7AE/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.

Tutorial Rekomendasi : Memasang Widget Iklan Ukuran 970x90 di Blog

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.

Semoga Tutorial membuat "Nivo Slider pada Blog" ini bermanfaat. Terimakasih.

Share This