Step 1: Go to 'Layout' > click the 'Add a Gadget' link in the sidebar area and select 'HTML/JavaScript' gadget from the pop-up window.
Step 2: Copy the following code and paste it inside HTML/JavaScript gadget
<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/AVvXsEgDWpUjF-LzA3B-Te4XcKnxWzqKLXG1ch_iP9GTHPLJumGz64Xxp6ljVu_i87RlU4QtK2dR2KBMI1WdXPoF96UBHIs03cRfxn8_rskblb-OGRyiuARAkENmZWUREuJxf-MpavtzgZyc8T0/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://atozbloggertips.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/AVvXsEj5gIiGeRIpTDkB4KHtwv6LPlbEMcVAOhhIDcfO_DlBA6PNkhUSnSyVZLXkHqZ9rFEu4vNS7wxErxDuWV671GdmjbiTm8XONeYte7gaaZdikHxDHKBU-eFifecCdBHm7pzu4L-vd9aLFf8/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>
listURL: replace "https://atozbloggertps.blogspot.com" with your blog URL
featuredNum: add the umber 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 do not want the slides to change automatically.
Step 3: Once yo are done with these settings, click the 'Save' button.
Now, this code is for a slide widget which means that instead of just a random list of Featured Posts, you get to display them with images and you can include effects too. You can also control how many slides should be shown because it just would not be prudent to feature.
22 Comments
WHY THE IMAGES IS NOT COMING IN THE POST
ReplyDeleteIf your post having any images definitely showing in featured post, other please check the code whether it is any wrong in any line...
DeleteMe same, Why Image is not showing ? Code just copy and past with the change of own blog site url only, thats all. But what about the change of image url for induvisual ? Not that need to change?
Deleteon my screen there is 2 arrows left and right, they are now even on my threads. is there a way to remove them?
ReplyDeleteIn my video there are no arrows like left and right, please check the code where you are done wrong...
DeleteVery thks bro
ReplyDeleteYou Welcome!!
Deletehow to reduce the height of the image, bro
ReplyDeleteThere is no option for reducing height of the image bro, it will automatically taken that post image for your already assigning height and width of the featured posts slider widget
DeleteHow do I reduce the size of the featired post image?
ReplyDeleteThere is no option for reducing height of the image bro, it will automatically taken that post image for your already assigning height and width of the featured posts slider widget
DeleteIt show only on Home Pages. How it show all pages in blogger. Please Help me Thank you
ReplyDeletetake one 'HTML/JavaScript' widget in layout, then copy and paste the code it in, if that widget is visible for all pages then definitely featured post slider also visible in all pages
Delete
ReplyDeleteThanks for ur reply
Thank u fpr ur valuable reply sir. But it only shows on computer view. Not in mobile view.Only shows on Home page. Other pages shows only arrow mark. What shall i do sir? help me sir. Thank you
ReplyDeleteonce check my blog home page, in the right side widgets namely Total Page Views, Featured Posts, About Author etc.. These all widget will shown in all posts.
DeleteAnd also check your code again line by line if there any mistakes or errors are in that.
If home page widget featured post will display with recent posts, then it will automatically displayed where your featured post widget displaying.
I have added your code and replaced the changes but i am in blog it is not showing any images
ReplyDeleteCan you please let me know How to add images?
if post is having any images, that images will display in gadget, no need to add separate images
DeleteVery nice...I am very happy to see this post because it is very useful for me because there is so much information in it.
ReplyDeleteThanks for sharing the best article post.
Visit My website : www.Techtonr.xyz
Please Checkout :
Please Click here...
Can you please provide me the same template which you are using on this site. Please
ReplyDeletehello sir, how can you decrease the height and wide of the slider?
ReplyDeletethank you
I am not done that type, it will automatically taking height and width
Delete