Responsive Nivo Slider For Blogger - Kembali lagi membagikan Tutorial blog, dan kali ini aku akan membagikan Tutorial membuat "Nivo Slider". Gambar dan Link pada Nivo Slider ini kita pasang secara manual dan untuk sahabat yang bertanya apakah Slider ini menciptakan loading blog berat? dan jawabannya adalah Ya, slider ini menciptakan loading blog menjadi berat alasannya yakni ukurannya yang besar (Big Slider) dan memakai Javascript yang tidak mengecewakan banyak. Selain itu sahabat juga tidak usah khawatir tentang "Responsive" karena Slider ini 100% Responsive.
Demo
Letakan isyarat Javascript di bawah ini sempurna di atas
Sumber https://www.idblanter.com
Jika sahabat tertarik untuk memasang "Nivo Slider" di blog, ikuti tutorial di bawah ini :
Buka Blogger > Template > Edit HTML
Letakan isyarat CSS di bawah ini sempurna 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/AVvXsEgVXHqDX4Z0o34PgNvfOgtCvN-G9YiUB6JxRzA9m3VL1IcMNmpth_Xf02VFy-yyTCFcHBe6_WoH8Bi2uqNyeAGgIh4cEoBBLntAzDwIK6x0lKil4VC81NvC89Zv_kd7B50XdnTm6loWwNk/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/AVvXsEjKurl0WO2i9ISLt1vfEM69sWxI7wXqy-Ec8zmpt1EXxAguyRBZsOV7z1ANjBQBo_04w_HeW9n9CqQfp4TYJOUHpm4OLGfg5nDcHMmJMlHkSzwTc-1NriZxoGYFrJ7Y4jb6zcXB1kOBaNI/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/AVvXsEjKurl0WO2i9ISLt1vfEM69sWxI7wXqy-Ec8zmpt1EXxAguyRBZsOV7z1ANjBQBo_04w_HeW9n9CqQfp4TYJOUHpm4OLGfg5nDcHMmJMlHkSzwTc-1NriZxoGYFrJ7Y4jb6zcXB1kOBaNI/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/AVvXsEgVXHqDX4Z0o34PgNvfOgtCvN-G9YiUB6JxRzA9m3VL1IcMNmpth_Xf02VFy-yyTCFcHBe6_WoH8Bi2uqNyeAGgIh4cEoBBLntAzDwIK6x0lKil4VC81NvC89Zv_kd7B50XdnTm6loWwNk/s1600/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left}Letakan isyarat Javascript di bawah ini sempurna 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> Selanjutnya buka Blogger > Tata Letak > Tambahkan Widget > Pilih HTML/Javascript
Letakan isyarat di bawah ini pada kolom HTML/Javascript
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 menciptakan "Nivo Slider pada Blog" ini bermanfaat. Terimakasih.
Letakan isyarat 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 menciptakan "Nivo Slider pada Blog" ini bermanfaat. Terimakasih.
