How to add Featured Post Image Slider Widget Blogger

Featured Post Image Slider Otomatis
How to Install the Featured Post Image Slider Widget Auto Blogger 

FEATURED Post Image Slider Auto is a widget blogger that displays a large image plus the post title in the sidebar or on the front page. In appearance like illustrations of this post. 

Called "automatic" because of posts displayed settings are not manually, but automatically uses jQuery code . 

Here's How to Install the Featured Post Image Slider Auto Blogger as shared Help Logger . 

In the demo , Featured Post Image Slider mounted on the sidebar, to display the latest posts. Suitable for online store blog or photo gallery. 

Carousel slider on your web site / diary isn't truly required as a result of seldom clicked on by the user. Slides of this type just for aesthetic look, not seo and user friendly.

The compromise, use image slider / carousel that does not suck ( How to Make Sliders Not Suck ), namely by turning off the autoplay his "ngalieurken". 

How to Install Auto Featured Post Image Slider



Here's how How to Install Auto Featured Post Image Slider in Sidebar Blogger as in the demo. 

1. Layout > Add a Gadget in Sidebar> HTML / JavaScript 
2. Title Fill with "Featured Posts" or Empty 
3. Copy and Paste the following code in the "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://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'>
//Edit this Section Start
//<![CDATA[
featuredbwidget({ 
listURL:"https://nameblog.blogspot.com/", 
featuredNum:5, 
listbyLabel:false, 
feathumbSize:350, 
interval:3000, 
autoplay:true,
featuredID:"#featuredbwidget"
});
//End Edit Section
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>

Note! 
  • listURL - replace with your blog URL address
  • featuredNum - number of posts, can be changed
  • listbyLabel - if it will display posts with specific labels, change into lissbyLabel: "Label Name"
  • featthumbSize - size or dimensions of the image in pixels
  • interval - turn pictures in seconds'
  • autoplay - widened true change false if it will be off autoplaynya
  • Green color code is a link to the jQuery code. If your template already exists in the code, delete it, do not be included.

4. Save! 

Replace at Home - Homepage


Code Auto Featured Post Image Slider above can also be installed on the front page (homepage), not in the sidebar. 

The following code Auto Featured Post Image Slider that has been slightly modified, to be mounted on the front page of the blog. 

The modified is becoming 300px image height and autoplay off (false). You could change again as you wish. Demo on the front page of this blog(click) . 

1. Layout> Add a gadget on top gadget "Blog Post">HTML / JavaScript 
2. Title Fill with "Featured Posts" or Empty 
3. Copy and Paste the following code in the "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://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 type='text/javascript'>
//Edit this section Start
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com",
featuredNum:5,
listbyLabel:false,
feathumbSize:300,
interval:3000,
autoplay:false,
featuredID:"#featuredbwidget"
});
//End edit section
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>

4. Save! 

Note Again!

Featured post slider image so that it only appears on the front page, there appeared on the inside pages (single post), then add the conditional tags code <b: if cond='data:Data == blog.url:blog.homepageUrl'> and </b:if> in the template. 

Be like this :

<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>

Similarly How to Install Auto Featured Post Image Slider in Blogger. Just to keep the record (code) and share with you who have not yet discovered.Sincerely, (source: http://www.web-development.cf). *
I hope this article 

Subscribe to receive free email updates:

0 Response to "How to add Featured Post Image Slider Widget Blogger"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.