Home Blogging Awesome Popular Posts Widget With Counter Box For Blogger

Awesome Popular Posts Widget With Counter Box For Blogger

By
Tech Ora
-
3
SHARE
Popular Posts is the main key of your blog, because when any new visitor come to your site, first they see which posts are most popular, and most visited, then they also visit these sites. In blogger blogs, there are default popular posts widget exist and almost every blogger can add this into their blogs.
But if you want to add some styles in it then you can add some HTML + CSS code in it to styled it. This widget is used to show your golden posts / contents which are performing well and getting huge amount of traffic into your blogs. Also try to check out the best clock widgets which we shared earlier.
There are a a lot widgets are also shared many people out there, but i’m sharing the most stylish and awesome widget which you like most. I’m sharing stylish popular posts widget with counter box and also with shows thumbnails feature. Below are some features of this widget.
Awesome Popular Posts Widget With Counter Box For Blogger

Features of Awesome Popular Posts Widget

* It can shows thumbnails with post titles.

* When mouse hover, an amazing image zooming effect shows.

* Post titles are shown on the images with transparent dark color.

* Show Counter box.

* No any blurry images.

* Customize as you want. ( colors, width, height )

* And it’s free of cost. ( See below image )

 Screenshot:
Awesome Popular Posts Widget With Counter Box For Blogger

Add Popular Posts Widget into Your Blogger Blogs

Note That : If you installed any other popular post widget then first remove its code from the templates and then install this.

Step 1 : First login to your Blogger Account

Step 2 : Select your blog > Then Go Template > Click on Edit HTML

Step 3 : First Save your template backup and then edit HTML code.

Step 4 : Find this tag.

</body>

Step 5 : Just before this tag, paste the below code .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$('#PopularPosts1').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + tbn)});
image.attr('width',tbn);
image.attr('height',tbn);
});
});
//]]></script>
Note : If you want to change Thumbnail size, then please change the yellow color from this code.
Step 5 : After adding this, find using “CNTRL + F ” this piece of code.
]]></b:skin>

Step 6 : Copy below CSS Code and paste it just before it.

/***** Sidebar Popular Posts - www.techora.net *****/
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;
height: 130px;
list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla Animation duration*/
-o-transition-duration: 1.0s; /*Opera Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;
}

Step 7 : Now save you template and see out the result.

Change Setting from Layout Area in Blogger Blogs

Now everything is done, only one main step is behind, go to your Layout Area and click on popular posts widget and change its setting. Only change the setting as i display in the image below. Check the Image Thumbnail and un-check snippet option and then save your widget.

Awesome Popular Posts Widget With Counter Box For Blogger

Hope you will like this widget , and if you have any question then please feel free to ask me in the comment section below. For more blogging tutorials , simply subscribe my newsletter’s in sidebar form, and get my new updates into your inbox.

Stay tuned for more updates!

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

    • Thanks SL BLogger, for liking my article,Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.Site is user and mobile friendly and it provide catchy optimal view and interactional experience. So always use Responsive designs for your websites or blogs. Thanks Again

  2. Thanks SL BLogger, for liking my article,Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.Site is user and mobile friendly and it provide catchy optimal view and interactional experience. So always use Responsive designs for your websites or blogs. Thanks Again

Comments are closed.