› ›

Cara Memasang Featured Post Image Slider Otomatis Di Blogger

Sabtu, 01 Agustus 2015 Edit
Cara Memasang Widget Featured Post Image Slider Otomatis di Blogger Cara Memasang Featured Post Image Slider Otomatis di Blogger
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 menyerupai ilustrasi gambar posting ini.

Disebut "otomatis" alasannya settingan posting yang ditampilkan tidak manual, tapi otomatis memakai 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 bahwasanya tidak dibutuhkan alasannya 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 bab "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/AVvXsEi9obwriE9RquJmgQZda8k5lQS3qYTMlQTqDRxLZutubiYnSEXyYmoIFiS8zHWxCNVP_vQbLsEArGjrz57Y1Q4df-1Nnp1r-VOR69DPsTjvESgqn8BNM-4NlD0qG6p_sChYpDDkOEEzT9o/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/AVvXsEjS9siH8TIciKMq89041ixfdBkOD0LJQ5-7UWQKY2Ix-dtdRHwYdFrXUij_3BY1Ml6pEANfRXXNOo6mZ_yRJVrcCwgC5Wn6B5sWIxp8hilMtV2rBfVM0nR9AqzWPmq0UQGXrc0Jcvr4njM/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, dapat diubah
  • listbyLabel - kalau 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 kalau akan dimatikan autoplaynya
  • Kode warna hijau yakni link ke  isyarat jQuery. Jika di template Anda sudah ada isyarat tersebut, hapus saja, jangan disertakan.

4. Save!

Pasang di Halaman Depan - Homepage

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

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

Yang dimodifikasi yakni tinggi gambar menjadi 300px dan autoplay dimatikan (false). Anda dapat 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 bab "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/AVvXsEi9obwriE9RquJmgQZda8k5lQS3qYTMlQTqDRxLZutubiYnSEXyYmoIFiS8zHWxCNVP_vQbLsEArGjrz57Y1Q4df-1Nnp1r-VOR69DPsTjvESgqn8BNM-4NlD0qG6p_sChYpDDkOEEzT9o/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/AVvXsEjS9siH8TIciKMq89041ixfdBkOD0LJQ5-7UWQKY2Ix-dtdRHwYdFrXUij_3BY1Ml6pEANfRXXNOo6mZ_yRJVrcCwgC5Wn6B5sWIxp8hilMtV2rBfVM0nR9AqzWPmq0UQGXrc0Jcvr4njM/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 isyarat 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 membuatkan dengan Anda yang belum menemukannya. Wasalam.(http://).*

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel