July 31, 2016

Cara Memasang Featured Post Image Slider Otomatis di Blogger

By Romeltea | Published: July 31, 2016

Featured Post Image Slider Otomatis
Cara Memasang Widget Featured Post Image Slider Otomatis di Blogger

FEATURED Post Image Slider Otomatis adalah widget blogger yang menampilkan gambar besar plus judul posting di sidebar atau di halaman depan. Penampakannya seperti ilustrasi gambar posting ini.

Disebut "otomatis" karena settingan posting yang ditampilkan tidak manual, tapi otomatis menggunakan kode jQuery.

Berikut ini Cara Memasang Featured Post Image Slider Otomatis di Blogger sebagaimana di-share Help Logger.

Di demonya,  Featured Post Image Slider dipasang di sidebar, dengan menampilkan posting terbaru. Cocok buat blog toko online atau galeri foto.

Slider atau Carousel di website/blog sebenarnya tidak diperlukan karena jarang sekali diklik oleh user. Slide semacam ini hanya untuk estetis tampilan, tidak seo dan user friendly. Baca deh: Jangan Gunakan Gambar Otomatis Slider atau Carousel!

Komprominya, gunakan image slider/carousel yang tidak suck (How to Make Sliders Not Suck), yaitu dengan cara mematikan autoplay-nya 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3nX16CrKa-QyvpDWhFh6lCMfSx1OqGia-aXTGG3maVmzQANjAjjeNDd1qWP1uRKZfDQDH2DIEocGtRamgczh5TsG7kUVHX2LjBNrlvERWhRT_-e5Fb3d4YtAl7hyphenhyphenNrSRnAjYG_2NwNc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiAxUy1v2VCOJchyphenhyphenuz_V1slaHWaWmD1Z73G_ejr9n7GCBFALwsUwGqHw0wvP4xhhSal2v3pasdz6YHxfkPI4eX6jzG7g64U5LYMJjS3dIPwwKHZeZ1eUuYXWf33sNp6HVlr0T0DRNyK6Y/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>


Catatan
  • listURL - ganti dengan alamat URL blog Anda
  • featuredNum - jumlah posting, bisa diubah
  • listbyLabel - jika akan menampilkan posting dengan label tertentu, ubah menjadi lissbyLabel:"Nama Label"
  • featthumbSize - ukuran atau dimensi gambar dalam pixel
  • interval - pergantian gambar dalam detik'
  • autoplay - ubah true manjadi false jika akan dimatikan autoplaynya
  • Kode warna hijau adalah link ke  kode jQuery. Jika di template Anda sudah ada kode tersebut, hapus saja, jangan disertakan.

4. Save!

Pasang di Halaman Depan - Homepage

Kode Featured Post Image Slider Otomatis di atas bisa juga dipasang di halaman depan (homepage), bukan di sidebar.

Berikut ini kode Featured Post Image Slider Otomatis yang sudah sedikit dimodifikasi, untuk dipasang di halaman depan blog.

Yang dimodifikasi adalah tinggi gambar menjadi 300px dan autoplay dimatikan (false). Anda bisa ubah lagi sesuai dengan keinginan. Demonya di halaman depan blog ini.

1. Layout > Add a Gadget yang di atas gadget "Blog Post" > 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:250px}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/AVvXsEhK3nX16CrKa-QyvpDWhFh6lCMfSx1OqGia-aXTGG3maVmzQANjAjjeNDd1qWP1uRKZfDQDH2DIEocGtRamgczh5TsG7kUVHX2LjBNrlvERWhRT_-e5Fb3d4YtAl7hyphenhyphenNrSRnAjYG_2NwNc/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 type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com",
featuredNum:5,
listbyLabel:false,
feathumbSize:300,
interval:3000,
autoplay:false,
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/AVvXsEiiAxUy1v2VCOJchyphenhyphenuz_V1slaHWaWmD1Z73G_ejr9n7GCBFALwsUwGqHw0wvP4xhhSal2v3pasdz6YHxfkPI4eX6jzG7g64U5LYMJjS3dIPwwKHZeZ1eUuYXWf33sNp6HVlr0T0DRNyK6Y/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>

4. Save!

Catatan Lagi
Supaya featured post image slider itu hanya muncul di halaman depan, tidak nongol di halaman dalam (single post), maka tambahkan kode tag kondisional <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> di dalam template.

Jadinya seperti ini:

<b:widget id='HTML8' locked='false' title='' type='HTML' visible='true'>
                <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
              </b:widget>

Demikian Cara Memasang Featured Post Image Slider Otomatis di Blogger. Sekadar menyimpan catatan (kode) dan berbagi dengan Anda yang belum menemukannya. Wasalam.(http://www.romelteamedia.com).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

17 comments on Cara Memasang Featured Post Image Slider Otomatis di Blogger

  1. Numpang tanya Gan. Kalo "Cara Memasang Widget Featured Post Image Slider Otomatis di Blogger" seperti ini ingin ditampilkan di laman Galeri bagaimana scriptnya? Mohon bantuannya.

    ReplyDelete
  2. siip gan..eh ngomong2 sy pake template agan romeltea yg sudah sy modifikasi gan....boleh mampir hehehe

    ReplyDelete
    Replies
    1. Sip, jurnalistik template ya, keren! :)

      Delete
  3. sumpah keren banget gan makasih ya,nnya nih cara merubah tinggi dan lebar gambar gimana ya ?? mohon di bales

    ReplyDelete
    Replies
    1. Ubah di kode css (width/lebar dan height/tinggi)

      Delete
    2. sekali lagi terimakasi mas dari bepuluh-puluh tutorial slide cuman ini yang paling keren suer dah :)

      Delete
  4. Gimana cara menampilkan hanya di home page saja, saya sudah merubah kode si template seperti tutorial ini tapi tetap tidak bisa

    ReplyDelete
  5. Masih aktifkah? Itu kalau ganti sumber gambarnya dimana ya?

    ReplyDelete
    Replies
    1. Gambar otomatis dari gambar di postingan

      Delete
  6. Kodenya mesti ada juga ya disisipi ke template blognya ya mas? Lumayan panjang juga kode scriptnya :)

    ReplyDelete
    Replies
    1. Kode itu makin panjang makin baik, soalnya menghindari render block, jadi fast loads

      Delete
  7. Om, gimana caranya supaya bisa nampilin iklan di related article kyk di punya om ini?

    ReplyDelete
  8. Cara atur biar post tertentu mau di slider gan, gak berdasar label atau recent gimana?

    ReplyDelete
  9. Terima kasih sangat membantu kawan

    ReplyDelete
  10. Sangat membantu. Tapi tampilannya slide gambar nya blur. Bagaimana cara mengatasi nya

    ReplyDelete

Contact Form

Name

Email *

Message *