Otomatis Post Image Slider adalah widget blogger yang menampilkan gambar besar plus judul posting di sidebar atau di halaman depan. Penampilannya seperti ilustrasi gambar posting ini.
Disebut “otomatis” karena pengaturan posting yang ditampilkan tidak manual, tetapi secara otomatis menggunakan kode jQuery.
Berikut cara menginstal slider gambar posting unggulan otomatis pada blogger seperti yang dibagikan oleh bantuan logger.
Dalam demo, slider gambar posting yang ditampilkan dipasang di bilah samping, dengan menampilkan posting terbaru. Cocok untuk toko blog online atau galeri foto.
Slider atau korsel di situs web / blog sebenarnya tidak diperlukan karena jarang diklik oleh pengguna. Geser jenis ini hanya untuk tampilan estetika, bukan SEO dan ramah pengguna. Baca deh: Jangan gunakan gambar slider atau korsel otomatis!
Kompromi, gunakan slider gambar / korsel yang tidak payah (cara membuat slider tidak payah), yaitu dengan mematikan autoplay yang “ngalieurken”.
Cara Memasang Featured Post Image Slider Otomatis
Berikut ini cara Cara Memasang Featured Post Image Slider Otomatis di Sidebar Blogger sebagaimana dalam demo.
1. Layout > Add a Gadget di Sidebar > pilih HTML/JavaScript
2. Judul Isi dengan “Featured Posts” atau Kosongkan
3. Copy & Paste Kode berikut ini di bagian “Content”
<style type=”text/css”>
ul.featured-widget-list,ul.featured-widget-list
li{margin:0;padding:0;list-style:none;position:relative}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block;line-height:0}
ul.featured-widget-list img{border:0;width:100%;height:auto}
ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);
background-position:0% 100%;
background-repeat:repeat-x}
ul.featured-widget-list .featuredbg:hover{opacity:.1}
ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform:capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px ‘Abel’,sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px ‘Abel’,sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all
0.3s;}ul.featured-widget-list li:hover
.featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius:
50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:””;width:0;height:0;border-width:6px
7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id=”featuredbwidget”></div>
<link href=’https://fonts.googleapis.com/css?family=Abel’ rel=’stylesheet’ type=’text/css’/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js” type=”text/javascript”></script><script type=’text/javascript’>
//<![CDATA[
featuredbwidget({
listURL:”https://namabloganda.blogspot.com/”,
featuredNum:5,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:”#featuredbwidget”
});
function featuredbwidget(a){(function(e){var
h={listURL:””,featuredNum:3,featuredID:””,feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:”nextfeatured”,pBlank:”https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png”,byMonth:[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”],listbyLabel:false};h=e.extend({},h,a);var
g=e(h.featuredID);var d=h.featuredNum*200;g.html(‘<div
class=”featslider”><ul
class=”featured-widget-list”></ul><div
class=”feat-buttons”><a href=”#”
class=”feat-prev”>Prev</a><a href=”#”
class=”feat-next”>Next</a></div></div>’);var
f=function(w){var q,k,m,u,x,p,t,v,r,l=””,s=w.feed.entry;for(var
o=0;o<s.length;o++){for(var
n=0;n<s[o].link.length;n++){if(s[o].link[n].rel==”alternate”){q=s[o].link[n].href;break}}if(“media$thumbnail”
in
s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,”/s”+h.feathumbSize+”-c”)}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,”/s”+h.feathumbSize+”$1″)}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a
href=”‘+q+'”><div class=”featuredbg”></div><img
class=”featuredthumb”
src=”‘+u+'”/><h5>’+k+'</h5></a><div
class=”featured-meta”><span class=”fdate”><span
class=”fday”>’+t+'</span> <span
class=”fmonth”>’+v+'</span> <span
class=”fyear”>’+x+'</span></span> – <span
class=”fauthor”>’+m+”</span></div></li>”}e(“ul”,g).append(l).addClass(h.loadingFeatured)};var
c=function(){e(h.featuredID+” .feat-next”).click()};var
b=function(){e.get((h.listURL===””?window.location.protocol+”//”+window.location.host:h.listURL)+”/feeds/posts/summary”+(h.listbyLabel===false?””:”/-/”+h.listbyLabel)+”?max-results=”+h.featuredNum+”&orderby=published&alt=json-in-script”,f,”jsonp”);setTimeout(function(){e(h.featuredID+”
.feat-prev”).click(function(){e(h.featuredID+” .featslider
li:first”).before(e(h.featuredID+” .featslider li:last”));return
false});e(h.featuredID+” .feat-next”).click(function(){e(h.featuredID+”
.featslider li:last”).after(e(h.featuredID+” .featslider
li:first”));return false});if(h.autoplay){var i=h.interval;var
j=setInterval(c,i);e(h.featuredID+” .featslider
li:first”).before(e(h.featuredID+” .featslider
li:last”));e(h.featuredID+”
.featslider”).hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e(“ul”,g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>
