Hey Guys In today's article, you will know how you can add a featured posts widget for blogger with thumbnails to your blog. In this article you will be told about the stylish and fully responsive blogger featured post widget.
With which you can easily add to your blogger. In this article, you will be told the complete step by step, then stay with us to get complete information.
And I will also provide you blogger featured post HTML code in it. So let's start.
What is Featured post?
This is a gadget with the help of which we can show the posts or articles on our blogger blog that we like and which are also helpful for blog visitors.
That is, with the featured post, we can show those posts in the widget or slider of our blog which are the best of our blog.
Blogger Featured Post Benefits
We use several types of widgets to make our blog stylish and informative, in the same widget, there is a widget featured post.
This gives our blog a premium look. With this, we can add in any section of our blog such as at the top of the blog post, in the header section, in the sidebar, and in the footer section.
The biggest benefit of using Featured Post in your blogger is that It suggests blog posts and articles to visitors who visit our blog.
Due to which the chance of our blog being traffic increases, so you must use the featured post in your blogger.
How To Featured Posts Widget For Blogger With Thumbnails
#1 Featured Posts Widget For Blogger
If you want to add a featured post to your blogger, then in this article you will be shown some featured post blogger widgets which you can use for your blogger blog. To use them, you follow the steps shown
Featured Posts Widget Demo
Step1: First login your Blogger Account
(Your blogger's dashboard will open in front of you)
Step2: Now you Click on Layout
After clicking on the layout, the layout design of your blogger blog will show.
Step3: Where you want to show your featured post, like in the header section, in the Sidebar, in the footer section, then you click on the Add Gadget of that section.
(Then you will have a blogger gadget popup show)
Step4: Now you Click on HTML / JavaScript
(Then you will have HTML / JavaScript code editor open)
Step5: Then paste the blogger featured post HTML code of the featured post you want to use in HTML / JavaScript.
<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/AVvXsEh3nU7F0Ow3ra9Xrg714Nax00J9AJL6uXuBFZwZ8Nuylnnbr87W8iNVOzTPo7RXtvURO5hRtA-nMEu2RNU_kW_cRbejF_eIlCcsXmSptAdITBwftvEGS42ojHFHE1wFx8NjOZojf42shOg/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>
<script type = 'text/javascript' >
//<![CDATA[
featuredbwidget(
{ listURL: " Enter Your Blog URL ", 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/AVvXsEgWliJoQIjtr6rfElRHb2QooSGhOKKEu3ww4Ekrr7_G89Ik0ELRMUq_j5ohznq4p-LfHj0sKlBoWqYxbJpxsVygS3z4oTEoQPbgTFfSSLOdG56QDSZZzZr-nb7i4pBYot85SRMMkXaF_OA/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>
<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>
Step5: Click on Save
#2 Featured Posts Widget For Blogger
The second method is that you can use the featured post gadget provided by your blogger template, so know how to use it.
Step1: First login your Blogger Account
(Your blogger's dashboard will open in front of you)
Step2: Now you Click on Layout
After clicking on the layout, the layout design of your blogger blog will show.
Step3: Where you want to show your featured post, like in the header section, in the Sidebar, in the footer section, then you click on the Add Gadget of that section.
(Then you will have a blogger gadget popup show)
Step4: Now you click on Featured Post
Step6: Click on Save
If your blogger featured post is not showing, then the following reasons can be
- Did not paste your own blog URL correctly.
- Did not paste the code correctly in the Blogger gadget.
- If the image is not showing in your featured post, then make the image size of the blogger post smaller.
Also Read: 12+ Techniques To Reduce Bounce
Also Read: 24+ On-Page SEO Tools (Must Use)
Also Read: Blogger SEO - Complete Guide
 Featured Posts Widget For Blogger With Thumbnails ){kind=link}
3 Comments
Nice Post
ReplyDeletewhy thumbnail is squared ? how to fix
ReplyDeleteds
ReplyDelete