Automatic Featured Posts Slider Widget For Blogger
Anyone alongside a weblog wants readers to remain rather than motility on to another. It's non beingness selfish but later on individual has read i post, you'd definitely desire them to read another, right? After all, isn't it i of the tenets of SEO to brand people remain longer on your weblog if it has to direct maintain a fighting direct a opportunity at the rankings game?
The enquiry forthwith is: how precisely compass you lot entice them to read a few to a greater extent than of your weblog posts?
First off, you lot don't know precisely what brought a reader to your site. Well, you lot sort of do, if you lot direct maintain Google Analytics too all that. But that's beside the point. It wouldn't live productive for you lot to stare at GA the entire twenty-four hours hoping that it volition tell you lot that yes, individual has been perusing your blog.
The betoken beingness driven at hither is that you lot direct maintain to offering to a greater extent than on your blog. It's non plenty that you lot instruct traffic from search engines too other sites; you lot also direct maintain to add together some extras that volition entice visitors to remain longer.
How precisely compass you lot compass that?
Now, what if you lot desire to highlight Featured Posts, for example? Let's tell that your weblog has been to a greater extent than or less for a issue of years too inward that span, it has produced some slap-up content that received quite the issue of shares, likes, +1s, comments on too thus on. Wouldn't that live the sort of post you lot desire featured? Unless your reader was looking for that theme specifically, there's piddling direct a opportunity that they mightiness uncover that precious rock if you lot don't convey it to their attention.
Thankfully, it's quite possible to add together a Featured Posts slider for Blogger. And if you lot don't know how to brand i yourself, this is precisely what this post is for. Here's an awesome Featured Posts slider widget that you lot tin privy utilisation on your blog.
2. Add the code below within the empty box:
Now, this code is for a slider widget which agency that instead of only a random listing of Featured Posts, you lot instruct to display them alongside images (if they direct maintain one) too you lot tin privy include effects too. You tin privy also command how many slides should live shown because it only wouldn't live prudent to characteristic your entire oeuvre, right?
Plus, beingness a slider widget, it adds a dainty piddling visual to your site. And nosotros all know how visuals are of import inward enticing people to stay, don't we?
The enquiry forthwith is: how precisely compass you lot entice them to read a few to a greater extent than of your weblog posts?
First off, you lot don't know precisely what brought a reader to your site. Well, you lot sort of do, if you lot direct maintain Google Analytics too all that. But that's beside the point. It wouldn't live productive for you lot to stare at GA the entire twenty-four hours hoping that it volition tell you lot that yes, individual has been perusing your blog.
The betoken beingness driven at hither is that you lot direct maintain to offering to a greater extent than on your blog. It's non plenty that you lot instruct traffic from search engines too other sites; you lot also direct maintain to add together some extras that volition entice visitors to remain longer.
How precisely compass you lot compass that?
The Tactics of Persuading Users to Stay
Bloggers direct maintain employed a diversity of tactics to persuade readers to stay. For one, they charge the sidebar alongside widgets for Popular Posts, for example. Of course, it would live inward the involvement of your readers to know which other posts on your weblog are gaining traction. Maybe those pieces are of involvement to them every bit well. As a result, you've got i surefire way of making readers stay.Now, what if you lot desire to highlight Featured Posts, for example? Let's tell that your weblog has been to a greater extent than or less for a issue of years too inward that span, it has produced some slap-up content that received quite the issue of shares, likes, +1s, comments on too thus on. Wouldn't that live the sort of post you lot desire featured? Unless your reader was looking for that theme specifically, there's piddling direct a opportunity that they mightiness uncover that precious rock if you lot don't convey it to their attention.
Thankfully, it's quite possible to add together a Featured Posts slider for Blogger. And if you lot don't know how to brand i yourself, this is precisely what this post is for. Here's an awesome Featured Posts slider widget that you lot tin privy utilisation on your blog.
How to Add Featured Posts Slider Widget inward Blogger
1. Go to 'Layout' > click the 'Add a gadget' link inward the sidebar surface area too select 'HTML/JavaScript' gadget from the pop-up window.2. Add the code below within 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/AVvXsEhRFgcFo2tCisxp8KjUncdkWzUYBzB9PjGvIpl7SqbAiU7arUEWf8CNxJzg-cyAOE3saK8Q7CU0-Iruy7r77E0RcdT2WIpr1KGLaEsGWLU1tE-4H36HYotE8Ue-B_jvFmvANpxuYwtudjQ/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"
});
component subdivision 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/AVvXsEgi12YhJNdYaYY3AsZSrRHv4jiGBOxUmu30C4kuzFfbz-4aKEQYufv3KNslcADqad0n3yiEpJlmbpDKPu9OWLr_pSwtlc3mXbHgHFFLPCXJ0Zws-7mc64aeqSvqYoHOGxY1JbKnuF22W1o/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" inward 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>
Automatic Featured Posts Slider Settings
- listURL - supervene upon "https://helplogger.blogspot.com/" alongside your weblog URL
- featuredNum - add together the issue of posts to display inward the slider
- listbyLabel - if you lot desire to display posts past times category / label, such every bit the tag fashion, it volition live written every bit listbyLabel: "fashion"
- feathumbSize - the size or dimension of the icon inward pixels
- interval - fourth dimension taken to modify the slides seat inward milliseconds
- autoplay - supervene upon true alongside false if you lot don't desire the slides to modify automatically.
Now, this code is for a slider widget which agency that instead of only a random listing of Featured Posts, you lot instruct to display them alongside images (if they direct maintain one) too you lot tin privy include effects too. You tin privy also command how many slides should live shown because it only wouldn't live prudent to characteristic your entire oeuvre, right?
Plus, beingness a slider widget, it adds a dainty piddling visual to your site. And nosotros all know how visuals are of import inward enticing people to stay, don't we?
