Automatic Featured Posts Slider Widget For Blogger
Saturday, January 23, 2016
Edit
Anyone alongside a weblog wants readers to remain rather than motion on to another. It's non beingness selfish but afterward somebody 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 have got a fighting peril at the rankings game?
The enquiry instantly is: how just attain y'all entice them to read a few to a greater extent than of your weblog posts?
First off, y'all don't know just what brought a reader to your site. Well, y'all sort of do, if y'all have got Google Analytics too all that. But that's beside the point. It wouldn't live productive for y'all to stare at GA the entire hateful solar daytime hoping that it volition tell y'all that yes, somebody has been perusing your blog.
The indicate beingness driven at hither is that y'all have got to offering to a greater extent than on your blog. It's non plenty that y'all larn traffic from search engines too other sites; y'all also have got to add together some extras that volition entice visitors to remain longer.
How just attain y'all attain that?
Now, what if y'all desire to highlight Featured Posts, for example? Let's nation that your weblog has been to a greater extent than or less for a issue of years too inwards that span, it has produced some corking content that received quite the issue of shares, likes, +1s, comments on too then on. Wouldn't that live the sort of shipping y'all desire featured? Unless your reader was looking for that topic specifically, there's petty peril that they mightiness uncover that jewel if y'all don't select it to their attention.
Thankfully, it's quite possible to add together a Featured Posts slider for Blogger. And if y'all don't know how to brand i yourself, this is just what this shipping is for. Here's an awesome Featured Posts slider widget that y'all tin utilisation on your blog.
2. Add the code below within the empty box:
Now, this code is for a slider widget which way that instead of only a random listing of Featured Posts, y'all larn to display them alongside images (if they have got one) too y'all tin include effects too. You tin 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 overnice petty visual to your site. And nosotros all know how visuals are of import inwards enticing people to stay, don't we?
The enquiry instantly is: how just attain y'all entice them to read a few to a greater extent than of your weblog posts?
First off, y'all don't know just what brought a reader to your site. Well, y'all sort of do, if y'all have got Google Analytics too all that. But that's beside the point. It wouldn't live productive for y'all to stare at GA the entire hateful solar daytime hoping that it volition tell y'all that yes, somebody has been perusing your blog.
The indicate beingness driven at hither is that y'all have got to offering to a greater extent than on your blog. It's non plenty that y'all larn traffic from search engines too other sites; y'all also have got to add together some extras that volition entice visitors to remain longer.
How just attain y'all attain that?
The Tactics of Persuading Users to Stay
Bloggers have got employed a diverseness 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 inwards 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 y'all desire to highlight Featured Posts, for example? Let's nation that your weblog has been to a greater extent than or less for a issue of years too inwards that span, it has produced some corking content that received quite the issue of shares, likes, +1s, comments on too then on. Wouldn't that live the sort of shipping y'all desire featured? Unless your reader was looking for that topic specifically, there's petty peril that they mightiness uncover that jewel if y'all don't select it to their attention.
Thankfully, it's quite possible to add together a Featured Posts slider for Blogger. And if y'all don't know how to brand i yourself, this is just what this shipping is for. Here's an awesome Featured Posts slider widget that y'all tin utilisation on your blog.
How to Add Featured Posts Slider Widget inwards Blogger
1. Go to 'Layout' > click the 'Add a gadget' link inwards 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/AVvXsEgtG5zCwurdgmV87MX5RGRt3CkBnpcgxndhMkpTc4jcMhJJTSNznCsRcesUKHDURpYndpZ3Cz-MOWtkoQ4n1it7oeAAuNglI2236wy3fXPOjmDtjSPy5GBzbe-oVQrpRZuGxLOK05UN6Jc/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:" ",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
portion 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/AVvXsEiCVER3MqrTsLq4XLjcBpaDNhlFoYHnRTdREtt66FUs2TZZufLMGf9u7C_ErTaojbDYOnkjYvH6wsRUkGeSzqlPyU1pLj3ZpxphOgUSCN89b9e9dlLy9teDITT08gHOspQC0ZPvtO_ked4/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" inwards 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 - supplant " " alongside your weblog URL
- featuredNum - add together the issue of posts to display inwards the slider
- listbyLabel - if y'all 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 inwards pixels
- interval - fourth dimension taken to alter the slides seat inwards milliseconds
- autoplay - supplant true alongside false if y'all don't desire the slides to alter automatically.
Now, this code is for a slider widget which way that instead of only a random listing of Featured Posts, y'all larn to display them alongside images (if they have got one) too y'all tin include effects too. You tin 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 overnice petty visual to your site. And nosotros all know how visuals are of import inwards enticing people to stay, don't we?