Automatic Featured Posts Slider Widget For Blogger

Anyone alongside a weblog wants readers to remain rather than motility on to another. It's non existence 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 direct a opportunity at the rankings game?

The query at i time is: how just gain you lot entice them to read a few to a greater extent than of your weblog posts?

First off, you lot don't know just what brought a reader to your site. Well, you lot sort of do, if you lot have got Google Analytics in addition to all that. But that's beside the point. It wouldn't live productive for you lot to stare at GA the entire twenty-four lx minutes menses hoping that it volition tell you lot that yes, somebody has been perusing your blog.

The indicate existence driven at hither is that you lot have got to offering to a greater extent than on your blog. It's non plenty that you lot instruct traffic from search engines in addition to other sites; you lot also have got to add together some extras that volition entice visitors to remain longer.

How just gain you lot gain that?

The Tactics of Persuading Users to Stay

Bloggers have got 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 around for a issue of years in addition to inward that span, it has produced some slap-up content that received quite the issue of shares, likes, +1s, comments on then on. Wouldn't that live the form of ship service you lot desire featured? Unless your reader was looking for that theme specifically, there's picayune direct a opportunity that they mightiness uncover that jewel if you lot don't choose 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 just what this ship service is for. Here's an awesome Featured Posts slider widget that you lot tin 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 in addition to 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/AVvXsEh2MK1KwJD6-yCHy1oUXQeqsVnGPIW-Sg5WkemVdBGvV7vQh8i0zRoNP73qsYLyyG-3DPzb4IyZOMWZl39GRiZ6BZ9NhmAh_aab8SuMrDE1pdbK9i_NtwD4Zcordn4nC7_IpJC77j2NHzg/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://inyourpocketnow.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
role 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/AVvXsEjSL2v7Sgp7W7eb2c_I6mZNLAUPRXvUQi4ZjoXdW9O0vXsZQBU8kiMNhVu7esAeKpXRGrvLMTWVOgvKwA5Q7spj6KXWI1xrzRRA1JJeKfmXtB1bSS_c4WoSLpsmCU2v7UiZ9thzPA15Gek/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 - supercede "https://inyourpocketnow.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 alter the slides seat inward milliseconds
  • autoplay - supercede true alongside false if you lot don't desire the slides to alter automatically.
3. Once you lot are done alongside the settings, click the 'Save' button.

Now, this code is for a slider widget which agency that instead of simply a random listing of Featured Posts, you lot instruct to display them alongside images (if they have got one) in addition to you lot tin include effects too. You tin also command how many slides should live shown because it simply wouldn't live prudent to characteristic your entire oeuvre, right?

Plus, existence a slider widget, it adds a prissy picayune visual to your site. And nosotros all know how visuals are of import inward enticing people to stay, don't we?

Comments