Automatic Featured Posts Slider Widget for Blogger

Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you...

Anyone with a blog wants readers to stay rather than move on to another. It's not being selfish but after someone has read one post, you'd definitely want them to read another, right? After all, isn't it one of the tenets of SEO to make people stay longer on your blog if it has to have a fighting chance at the rankings game?

The question now is: how exactly do you entice them to read a few more of your blog posts?

First off, you don't know exactly what brought a reader to your site. Well, you sort of do, if you have Google Analytics and all that. But that's beside the point. It wouldn't be productive for you to stare at GA the entire day hoping that it will tell you that yes, someone has been perusing your blog.

The point being driven at here is that you have to offer more on your blog. It's not enough that you get traffic from search engines and other sites; you also have to add some extras that will entice visitors to stay longer.

How exactly do you do that?

The Tactics of Persuading Users to Stay

Bloggers have employed a variety of tactics to persuade readers to stay. For one, they load the sidebar with widgets for Popular Posts, for example. Of course, it would be in the interest of your readers to know which other posts on your blog are gaining traction. Maybe those pieces are of interest to them as well. As a result, you've got one surefire way of making readers stay.

Now, what if you want to highlight Featured Posts, for example? Let's say that your blog has been around for a number of years and in that span, it has produced some great content that received quite the number of shares, likes, +1s, comments on so on. Wouldn't that be the kind of post you want featured? Unless your reader was looking for that topic specifically, there's little chance that they might uncover that gem if you don't bring it to their attention.

Thankfully, it's quite possible to add a Featured Posts slider for Blogger. And if you don't know how to make one yourself, this is exactly what this post is for. Here's an awesome Featured Posts slider widget that you can use on your blog.




How to Add Featured Posts Slider Widget in Blogger

1. Go to 'Layout' > click the 'Add a gadget' link in the sidebar area and select 'HTML/JavaScript' gadget 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/AVvXsEgz4ET65AfnXr0R1TvuhZAR5j0LsbAw1sppta3yVh8-cj4_NvKiLJb8g4aolANQnJvgWbNghfoHcly7iuJ6h0z7O-owzLF6R5kHwdzQVX7Vg4icwM6SLVCDWnuPFXqjFVl8_3nYe6rjz4Q/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/AVvXsEj0InzbLyew7Nq5qxPluv5hnZdMkdylpAL32M1Tt3_m6koSW61OzZzp_8LBngMShinywYDoVPUXa1pMMSXCXLs4t2W-j-gCK9oNkj7GLrQyL0xctIlBrmuotlZbF07nsUiBNOfmm03q1V4/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>

Automatic Featured Posts Slider 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?

COMMENTS

HawkHost Sale 25% Ending Soon

SaibABC's Contact Form:

Name

adsense,10,adsense optimization,4,adsense tips,5,Amp,3,backlinks,2,Beautiful,26,Beautifully,3,Beauty,15,beginner's guide,12,Blog Design,57,Blogger,22,blogger pages,4,blogger posts,11,blogging tips,3,Bolero Hot,13,click bombing,1,Comedies,10,Comedy,8,Comments,9,css,27,Cuisine,32,Cuisines,39,custom domain,2,Dab Neeg,6,DabNeeg,36,Facebook,4,Fashion,27,Fighting,12,firebug,1,font awesome,1,GoodTrick,58,google analytics,1,google plus,4,Grid Style,17,HealthLife,57,Hmong Health,11,Hmong Music,6,homepage,1,how to,54,Hunting,55,Image Effects,13,Information,17,instagram,2,Instrument,5,invalid clicks,1,javascript,10,jQuery,16,KabTxuj,28,Karaoke,19,Karaoke Hit,12,labels,2,Liste Style,6,make money online,8,menus,7,Movie Hot,37,Movies,18,Music Hot,41,Musical,100,Navigation,5,navigation menu,5,Other Clips,6,popular posts,5,posts,11,recent comments,1,recent posts,3,related posts,3,robots,1,Sad Songs,17,SEO,16,sitemap,1,slideshows,3,social media,8,social media plugins,4,statcounter,1,static pages,2,Technology,17,Template,12,Templates,7,threaded comments,3,tools,1,Travels,1,Video Fight,7,Video Hot,22,Video Hunt,30,Widgets,47,Xov Xwm,2,
ltr
item
SaibABC - News, HealthLife, Beauty, Tips: Automatic Featured Posts Slider Widget for Blogger
Automatic Featured Posts Slider Widget for Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcYD4Dgf9FASajhSQzw932uSvK-O5f4v5Zauyh0ODpA8i2csucRdtYIf8SrgxakjLqXRpf_HqCb6t6yXnpOzI5I33EBK6fB8O2CcF-1Zxia7YDiLwwpLJuXqElNknSFi_Oc4qxRHPKEVy/s320/featured-post-slider-for-blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbcYD4Dgf9FASajhSQzw932uSvK-O5f4v5Zauyh0ODpA8i2csucRdtYIf8SrgxakjLqXRpf_HqCb6t6yXnpOzI5I33EBK6fB8O2CcF-1Zxia7YDiLwwpLJuXqElNknSFi_Oc4qxRHPKEVy/s72-c/featured-post-slider-for-blogger.png
SaibABC - News, HealthLife, Beauty, Tips
https://saibabc.blogspot.com/2021/05/automatic-featured-posts-slider-widget.html
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/2021/05/automatic-featured-posts-slider-widget.html
true
7959548849429202663
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy