28 September 2015

Membuat Responsive Nivo Slider di Blogger

Membuat Responsive Nivo Slider di Blogger

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://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/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(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/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(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/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(http://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/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.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic