(New) Featured Posts Widget For Blogger With Thumbnails - Do Tech Blog

(New) Featured Posts Widget For Blogger With Thumbnails

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.


Featured-Posts-Widget-For-Blogger-With-Thumbnails

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-demo

Featured-Posts-demo


 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


blogger-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)


add-gadget


Step4: Now you Click on HTML / JavaScript


blogger-gadget

(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://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/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://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/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


blogger-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)


add-gadget


Step4: Now you click on Featured Post 


blogger-gadget


Step5: Now you will have a popup show of featured post gadget here you can customize the featured post as per your choice.

configure-featured-post


(You can get this blog to show the featured post according to your blog's label)


save

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.

No comments :

Post a Comment

;