Cara Membuat Responsive Recent Post Slider Blogger

Sebelumnya saya sudah posting bagaimana Cara Membuat Otomatis Slider Recent Post Blogger
Nah,,,, postingan kali ini akan membahas bagaimana Cara Membuat Reponsive Slider Recent Post Blogger Posting Terbaru plus gambar di halaman depan (homepage) untuk Blogger. Demonya seperti gambar berikut ini:

Cara Memasangnya seperti dibawa ini:

1. Buka www.blogger.com
2. BukaTemplate
3. Edit HTML
4. Copy & Paste Kode berikut ini diatas kode ]]> </b:skin> atau </style> :
    Biar lebih gampang carinya ctrl+F lalu cari.

/* CSS Nivo Slider */
.nivo-controlNav{position:absolute;left:260px;bottom:-42px}.nivo-controlNav a{display:none;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLVUo_U4f8QxRl-jFJJ_GwYYObaeo96NUBLT4Hahd1pGsGEycQFooUr2T_ruTOndvK2d0X-uOCxIbT_vbOTwMu9nAFjZkEKZF3U19VF_oq2BF4BjoJ22LtrZFJFS-kZj-nOu_CtvW8CE/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/AVvXsEhiRtlcQl467B60EP7vnsu9EPHPmT0OyFWprG3oY5CaVux2nK54zclM1s1L9FkQ7-PTIf2qjYRA5SyIWDLSG0tozSu746R6fL484ZP9V0wgD9qqMGO5zhZr7xBDX2cDO9e8y7M1FqlVXRw/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/AVvXsEhiRtlcQl467B60EP7vnsu9EPHPmT0OyFWprG3oY5CaVux2nK54zclM1s1L9FkQ7-PTIf2qjYRA5SyIWDLSG0tozSu746R6fL484ZP9V0wgD9qqMGO5zhZr7xBDX2cDO9e8y7M1FqlVXRw/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/AVvXsEgdLVUo_U4f8QxRl-jFJJ_GwYYObaeo96NUBLT4Hahd1pGsGEycQFooUr2T_ruTOndvK2d0X-uOCxIbT_vbOTwMu9nAFjZkEKZF3U19VF_oq2BF4BjoJ22LtrZFJFS-kZj-nOu_CtvW8CE/s1600/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left}

5. Lalu letakan kode javascript dibawa ini diatas kode </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>

6. Simpan...

Gimana gampang-kan... masih ada lagi kode dibawah ini yang harus diselesaikan.

7. Buka Tata Letak
8. Tambah Gadget
9. Copy & Paste Kode berikut ini:

<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>

Catatan:

• #link ganti dengan link postingan blog anda
• #JudulGambar ganti dengan judul postingan anda
• #link-gambar ganti dengan link gambar postingan blog anda

Selelah ini Simpan dan lihat hasilnya. semoga postingan ini bermanfaat untuk anda.

Share this post