Wednesday, 20 July 2016

Automatic Blogger Featured Posts Slider Widget 2016




Anybody with a site needs perusers to stay as opposed to proceed onward to another. It's not being egotistical but rather after somebody has perused one post, you'd unquestionably need them to peruse another, privilege? All things considered, would it say it isn't one of the precepts of SEO to make individuals stay longer on your online journal on the off chance that it needs to have a battling chance at the rankings amusement? 

The inquiry now is: how precisely do you allure them to peruse a couple of a greater amount of your blog entries? 

Most importantly, you don't know precisely what conveyed a peruser to your site. All things considered, you kind of do, on the off chance that you have Google Examination what not. Be that as it may, that is unimportant. It wouldn't be profitable for you to gaze at GA the whole day trusting that it will let you know that yes, somebody has been scrutinizing your web journal. 

The fact of the matter being driven at here is that you bring to the table more on your online journal. It's insufficient that you get movement from web crawlers and different destinations; you likewise need to include a few additional items that will lure guests to stay longer. 

How precisely do you do that? 

The Strategies of Influencing Clients to Sit tight 

Bloggers have utilized an assortment of strategies to influence perusers to sit tight. For one, they stack the sidebar with widgets for Well known Posts, for instance. Obviously, it would be in light of a legitimate concern for your perusers to know which different posts on your web journal are picking up footing. Perhaps those pieces are important to them also. Therefore, you have one surefire method for making perusers sit tight. 

Presently, imagine a scenario in which you need to highlight Included Posts, for instance. Suppose that your online journal has been around for various years and in that range, it has created some extraordinary substance that got a remarkable number of shares, preferences, +1s, remarks on so on. Wouldn't that be the sort of post you need included? Unless your peruser was searching for that subject particularly, minimal chance they may reveal that pearl in the event that you don't draw it out into the open. 

Thankfully, it's very conceivable to include a Highlighted Posts slider for Blogger. Also, in the event that you don't know how to make one yourself, this is precisely what this post is for. Here's an amazing Highlighted Posts slider widget that you can use on your online journal.
Instructions to Include Highlighted Posts Slider Widget in Blogger 

1. Go to "Design" > click the 'Include a device' join in the sidebar zone and select 'HTML/JavaScript' contraption from the pop-up window.

2. Add the code below inside the empty box:

<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/AVvXsEj9OgStpRXHrp-9MRS_7pAGPuJKKMvK_mpiAaM9rI0-OLZKySbYz7H1k0VP8Yd07enQxt2yogbMyLVqQTD2MlTVygDwgap-GAbyTDm5_RlGEAoiOCZVMDDC4ld2YPnXe_2amk37ihmlKOY/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://helplogger.blogspot.com/",
featuredNum:9,
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/AVvXsEi1xOiEJrngXoM7SIaumIZLUpv5PU9iuF0VfzK-GjQM0KM-czAhyphenhyphenfnO40KraVFsDNgzSM24t1BcCNACpxWKuhamZ5UzMk4NCk1oaYSzjaRob2Hfz2PuKpGeoKQpLSfNm0lASgF5Oupio6M/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>

Settings

listURL - replace "https://helplogger.blogspot.com/" with your blog URL
featuredNum - add the number of posts to display in the slider
listbyLabel - if you want to display posts by category / label, such as the tag fashion, it will be written as listbyLabel: "fashion"
feathumbSize - the size or dimension of the image in pixels
interval - time taken to change the slides position in milliseconds
autoplay - replace true with false if you don't want the slides to change automatically.

3. Once you are done with the settings, click the 'Save' button.

Now, this code is for a slider widget which means that instead of just a random list of Featured Posts, you get to display them with images (if they have one) and you can include effects too. You can also control how many slides should be shown because it just wouldn't be prudent to feature your entire oeuvre, right?

Plus, being a slider widget, it adds a nice little visual to your site. And we all know how visuals are important in enticing people to stay, don't we?

Subscribe to get more videos :