CARA MEMBUAT FEATURED POST SLIDER DI BLOGGER

ilustrasi featured post
Ilustrasi
Pada setiap template bawaan blogspot sudah tersedia gadget Featured post, tapi itu sudah lazim ya kan?. Nah kalau sobat sudah bosan dengan style lama tidak ada salahnya merobah featured Post atau Entry yang di unggulkan tersebut dengan cara ini:
  1. Masuk ke PENGATURAN blogspot
  2. Klik tambahkan Gagdet
  3. Pilih gagdet HTML/Javascript
  4. Pada halaman kosong yang muncul tambahkan kode berikut dibawah ini:
blanko kosong untuk widget HTML JavaScript

<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:auto;height:auto;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://sendirisite.blogspot.com/", featuredNum:5,listbyLabel:false,feathumbSize:730,interval:3500,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://sendirisite.blogspot.com/" dengan link sobat sendiri
  2. FeaturedNum: Ganti dengan berapa jumlah fitur yang sobat inginkan
  3. ListLabel: Jika misalnya sobat 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 750 dst. Ingat semakin besar angkanya semakin jernih gambarnya. Saya sarankan 730.
  5. interval: Waktu slider berjalan, bisa dilambat atau dicepatkan tinggal robah nilai waktunya misalnya: 3000, 4000, dst.
  6. Autoplay: Ganti true dengan false kalau sobat 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.

Trik ini bekerja pada hampir semua template bawaan atau template default blogspot, baik yang lama (klasik) hingga yang terbaru.


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
    Replies
    1. tuh belajar coding sampe kek gitu berapa kama mas ?

      Delete
    2. Gak ngitung waktu soalnya belajar sendiri, hobi sih he he he..kayaknya tahunan sih

      Delete
  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
  4. wow.... bermanfaat.
    Thank you for sharing

    ReplyDelete
  5. Bisa melihat demonya mas? mungkin kalau cocok bsa aku pake di blog hehe

    ReplyDelete
    Replies
    1. Itu kan ada link demonya harus lihat beberapa saat karena kecepatan slidernya saya bikin 4000 ms (lambat)

      Delete
  6. Kalau dimodifasi pakai kode scrip ni tambah keren nih,..he-he,...nanti kalau ada waktu saja coba 😀

    ReplyDelete
  7. Bagus .. Mungkin nanti saya bisa mencoba di blog saya.

    ReplyDelete
  8. Ijin menyimax Gan, makasih sudah mau berbagi.
    Salam.

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more