Cara Mamasang Featured Post Slider di Halaman Depan Blogger

Baca Juga

Cara Mamasang Featured Post Slider di Halaman Depan Blogger.

Featured Post Slider adalah widget yang menampilkan posting pilihan berupa gambar dan judul tulisan.

Widget ini biasanya dipasang di situs-situs web toko online dan website berita.

Blogger sudah menyediakan widget ini dengan nama Featured Post.

Tampilan featurd post bawaan blogger sederhana. Untuk memasangnya tinggal tambahkan widget di Layout > Add a Gadget.

Berikut ini beberapa widget featured post yang bisa dipasang di halaman depan blog, selain featured post bawaan blogger di atas.

Risikonya, loading blog halaman depan jadi lambat karena ada kode javascript yang butuh waktu untuk memanggilnya saat blog dibuka.

Cara Mamasang Featured Post Slider di Halaman Depan Blogger

STYLE 1

Kode:

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznyiZU9A1E2xJ5D4eDiHtFGNZ2kyi8qGmMKJ7iOjFx4SrBObWWZ3_CBSzzuutUBefuUsGysChNvL7OXQf2cWXOE3ktpy2uf55AsCoaU6wbIPhHBysxJ6rZ9OEkOMAij36yUGEcAwLYnI/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://blogromeltea.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGeDUzfCKWKxDwN_9cIKcDf69y7HaNnH6Hj6ECpM6RyfC_OK7tCrHf3bY-D0n6kxnxhgKG34T_EEHLGU3Cbo5R5Lhny2Z_bTPP3Zwb__xps0ZGM0YE6dE3hhQJP0gmGPXXU_OWIASGVQ/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>

Cara Pasang:

1. Klik Layout (Tata Letak) > Add a Gadget > pilih HTML/Javascript
2. Copas kode di atas ke kolom isi.
3. Perhatikan kode warna merah. Ubah alamat blognya.
4. Save.

Tutorial lengkap di Helplogger.

Munculkan di Halaman Depan Saja

Untuk menampilkannya hanya di halaman depan saja (homepage), tambahkan kode di dalam template.

1. Cari widget Featured Post yang baru dipasang
2. Tambahkan kode

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

setelah kode

<b:includable id='main'>

Tambahkan pula kode penutup

</b:if> 

sebelum kode penutup widget

</b:includable>

STYLE 2

Cara Memasangnya

STYLE 3

Cara Pasang

STYLE 4

Cara Pasang

STYLE 5

Cara Pasang

Banyak Pilihan Featured Post Slider di link Style 5 ini.

Itu dia Cara Mamasang Featured Post Slider di Halaman Depan Blogger. Wasalam.*