CARA MEMBUAT FEATURED POST SLIDER DI BLOGGER

Featured post tentu saja ada pada template bawaan blogger, dan itu sudah nampak tua modelnya lalu bagaimana kalau kita membuatnya berbeda daripada tampilan aslinya? Dimana featured post akan hadir bukan hanya satu tapi dua, tiga atau empat featured post dan bersifat slider pula. Slider artinya featured post yang kami maksud bergulir otomatis dari kiri ke kanan halaman blog dan tempatnya kami sarankan dibagian side bar blog baik kanan maupun kiri blogger kita.
Mari kita mulai:
  1. Pergi ke PENGATURAN
  2. Klik tambahkan Gagdet
  3. Pilih gagdet HTML/Javascript
  4. Pada halaman kosong yang muncul tambahkan kode berikut dibawah ini:
<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://editblogtema.net/",
featuredNum:4,
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>


Selanjutnya ikuti arahan kami, perhatikan pada kode yang kami sorot dengan warna kuning:
  1. List URL : Ganti link "https://editblogtema.net" dengan link anda sendiri
  2. FeautedNum: Ganti dengan berapa jumlah fitur yang anda inginkan
  3. ListLabel: Jika misalnya anda ingin menampilkan hanya label atau tag "teknologi" maka tinggal tulis label "teknologi" Jadi ditulis sebagai berikut: ListLabel:"teknologi"
  4. FeaThumSize: Untuk menentukan seberapa besar ukuran thumbnail tinggal robah angka 350 menjadi 250 dst
  5. interval: Waktu slider berjalan, bisa dilambat atau dicepatkan tinggal robah nilai waktunya
  6. Autoplay: Ganti true dengan false kalau anda tidak menginginkan featured posts berjalan otomatis.
Demikianlah cara membuat featured posts yang berbeda atau custom feautred posts jika kita tidak menginginkan model bawaan featured post yang monoton pada template bawaan blogger.
Lihat DEMO
sofyan yaan Seorang yang berusaha keras belajar sendiri perihal matimatika, sains, koding, web desain dan seni melukis konvensional. Seorang yang dengan menahan emosi dan perasaan manusia dan menutupinya dengan logika...

8 comments:

  1. Wah keren nih. Tapi ngaruh gak sama kecepatan blog nantinya?

    ReplyDelete
    Replies
    1. Ya pada beberapa jenis tema Sedikit mempengaruhi kecepatan loading... Diatasi dengan kode "async"

      Delete
  2. Nunggu yang dah jadi aja :)

    ReplyDelete
  3. Mas Sofyan, pertama-tama saya kagum dengan pengetahuannya soal coding dan lain-lain. Jujur mas, saya ingin sekali belajar hal-hal seperti ini, tetapi ampun duluan pusing mas, hehhee pusingnya dengan kode-kode di atas. Mungkin suatu saat saya belajar di sini.

    Oh ya mas, saya bingung, beberapa teman-teman blogger yang saya kenal selalu menulis dengan kata kami, lantas saya tanya mas/mbak mengelola blog tim ya, jawabannya, ga mas sendiri. Nah letak kebingunagan saya adalah mengapa harus pakai kata kami, menurut saya kami itu lebih dari satu, tetapi kalau satu orang yang kelola mengapa tidak disebut saya atau aku...

    Mohon penjelasannya mas, apakah ini berhubungan dan profesionalitas sebuah blog atau bagaimana mas? salam

    terima kasih atas pencerahannya...

    ReplyDelete
    Replies
    1. he he he ini pasti membalas pertanyaan saya pada blog mas karakabu yang satunya itu kan? Ya saya dan Anissa mengelola beberapa blog, kadang dia menulis atas nama saya dan begitu sebalinya tanpa disadari. Dia masih kelas 3 SMA jadi saya harus lebih banyak menulis. Ini jawabannya semoga menjadi clear.

      Delete
  4. wow.... bermanfaat.
    Thank you for sharing

    ReplyDelete