Friday, September 18, 2020
Home Blogging Tips & Tweaks 4 Different Simple Popular Posts Widget for Blogger

4 Different Simple Popular Posts Widget for Blogger

To keep your visitors engaged in your blog longer than they anticipated you need to take extra measures like making use of some widgets which provides them information they will want to know more about. I have been blogging for a while now and came to realize that my blog’s bounce rate started dropping very fast since the day I decided to add a popular post widget. I think what is happening is that users now have an idea about the popular topics and posts trending in the blog, and so always decides to check them out after going through what actually brought them in the first place.

Unlike the recent posts widget I have been posting about, popular posts widget play a very important role in telling your visitors of the posts most popularly viewed on the blog. Just adding the widget to your blog might not receive the deserved attention it is supposed to get since it will be somehow not different from the rest of the widgets in your blog. If you want to make sure visitors get to recognize the popular posts in your blog easily, then you need to add an eye catching popular posts widget that is completely different from other widgets in the blog. Below are four different eye catching popular posts widget you can add to your Blogger blog.

Popular Posts Widget 1:

popular posts widget1

CSS Code:

#PopularPosts1 h2{

padding:7px 0 3px 0;

width:100%;

margin-bottom:10px;

font-size:1.3em;

text-indent:-12px;

font-size:18px;

text-align:center;

color: #757575; /* Color of the widget's title */

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:8px 0px 1px;

left:-7px;

width:290px;

}

#PopularPosts1 li{

position:relative;

margin:0 0 10px 0;

padding: 3px 2px 0 17px;

left:-5px;

width:285px;

}

#PopularPosts1 ul li{

background: #eee;

position: relative;

display: block;

padding: .4em .2em .4em 2em;

*padding: .2em;

margin: .5em 0;

background: #ddd;

text-decoration: none;

border-radius: .3em;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

top: 50%;

margin: -1.3em;

height: 2em;

width: 2em;

line-height: 2em;

font-size: 15px;

color: #fff; /* text color of numbers */

background: #FB8835; /* background color of numbers */

border: .2em solid #fff; /* border color */

-webkit-box-shadow: 0 8px 5px -7px #888;

-moz-box-shadow: 0 8px 5px -7px #888;

box-shadow: 0 8px 5px -7px #888;

text-align: center;

font-weight: bold;

border-radius: 2em;

position: absolute;

left: 0;

transition: all .3s ease-out;

}

#PopularPosts1 ul li:hover{

background: #eee;

}

#PopularPosts1 ul li:hover:before{

transform: rotate(360deg);

}

#PopularPosts1 ul li a{

font: 14px Georgia, serif; /* font size of post titles */

text-shadow: 0 -1px 2px #fff;

color: #444;

display:block;

min-height:25px;

text-decoration:none;

text-transform: uppercase;

}

#PopularPosts1 ul li a:hover{

color: #444;

}

Popular Posts Widget 2:

popular posts widget2

CSS Code:

#PopularPosts1 h2{

padding:8px 10px 3px 0;

width:100%;

margin:0;

font-size:16px;

position:relative;

left:-20px;

display:block;

border-bottom:2px solid #ccc;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

width:100%;

}

#PopularPosts1 li{ /* Styles of each element */

width:100%;

position:relative;

left:0;

margin:0 0 6px 10px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{ /* Style of the numbers */

content:counter(li);

counter-increment:li;

position:absolute;

top:3px;

left:-39px;

font-size:21px;

width:28px;

height:28px;

border-radius: 50%;

color:#777; /* Text color */

border: 2px solid #ddd; /* Rounded border color */

padding:0;

text-indent:9px;

}

#PopularPosts1 ul li a{

display:block;

position:relative;

left:-45px;

width:100%;

margin:0;

min-height:28px;

padding: 5px 3px 3px 39px;

color:#333; /* color of the links */

text-decoration:none;

font-size:14px; /* Font size of the links */

font-style: italic;


}

#PopularPosts1 ul li a:hover{

color:#3366ff;

margin-left:3px;

}

Popular Posts Widget 3:

popular posts widget3

CSS Code:

#PopularPosts1 h2{

position:relative;

right:-2px;

padding:8px 63px 6px 17px;

width:100%;

margin:0;

font-size:16px;

background:#4F4F4F; /* Background color */

color:#f2f2f2; /* Color of the widget's title */

text-align:left;

text-indent:18px;

}

#PopularPosts1 h2:before{

position:absolute;

content:"";

top:36px;

right:0px;

width: 0px;

height: 0px;

border-bottom:12px outset transparent;

border-left:12px solid #000000;

}

#PopularPosts1 h2:after{

position:absolute;

content:"";

top:-6px;

left:-5px;

width: 0px;

height: 0px;

border-bottom:24px outset transparent;

border-top:24px outset transparent;

border-left:24px solid #ffffff; /* Arrow background color on the left */

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{

width:100%;

position:relative;

left:0;

margin:7px 0 16px 12px;

padding:10px  4px 0 5px;

}

#PopularPosts1 ul li:before{

content:counter(li);

counter-increment:li;

position:absolute;

top:-2px;

left:-20px;

font-size:35px;

width:20px;

color:#888888;

}


#PopularPosts1 ul li a{

display:block;

font-size:16px; /* Font size of the links */

color: #666; /* Color of the links */

text-decoration:none;

transition: all .1s ease-in-out;font-weight: bold;

}

#PopularPosts1 ul li a:hover{

color:#3366FF;

margin-left:3px;

}

Popular Posts Widget 4:

popular posts widget4

CSS Code:

#PopularPosts1 h2{

position:relative;

padding:8px 10px 6px 10px;

width:100%;

margin-bottom: 5px;

font-size:17px;

color:#757575; /* Color of the widget's title */

text-align:left;

}

#PopularPosts1 ul{

list-style:none;

counter-reset:li;

padding:10px;

left:-8px;

width:100%;

}

#PopularPosts1 li{ /* Styles of each element */

width:100%;

position:relative;

left:0;

margin:0 0 1px 12px;

padding:4px 5px;

}

#PopularPosts1 ul li:before{

content: counter(li);

counter-increment: li;

position: absolute;

left: -30px;

top: 50%;

margin-top: -13px;

background: #8E8E8E; /* background color of the numbers */

height: 1.9em;

width: 2em;

line-height: 2em;

text-align: center;

font-weight: bold;

color: #fff;

font-size: 14px;

}

#PopularPosts1 ul li:after{

position: absolute;

content: '';

left: -2px;

margin-top: -.7em;

top: 50%;

width: 0;

height: 0;

border-top: 8px solid transparent;

border-bottom: 8px solid transparent;

border-left:10px solid #8E8E8E; /* background color of the right arrow*/

}

#PopularPosts1 ul li a{

color: #444;

text-decoration: none;

font-size:15px;

}

#PopularPosts1 ul li {

position: relative;

display: block;

padding: .4em .4em .4em .8em;

*padding: .4em;

margin: .5em 0 .5em 0.4em;

background: #ddd;

transition: all .3s ease-out;

text-decoration:none;

transition: all .1s ease-in-out;

}

#PopularPosts1 ul li:hover{

background: #eee; /* Background color on mouseover */

}

#PopularPosts1 ul li a:hover{

color:#444; /* Link color on mouseover */

margin-left:3px;

}

How to Apply Any of Them to Blogger Blog:

The above popular posts widgets can be added to a Blogger blog page by simply following the procedure below;

If you do not want to go through the below method of adding CSS codes to Blogger templates, click on this guide Alternative Way to Add CSS Codes to Blogger.

  • Login to your Blogger Dashboard.
  • Go to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML box and search for ]]></b:skin> with the help of Ctrl + F.
  • Now copy the CSS code of any of the popular posts widget above and paste just before/above ]]></b:skin>.
  • Click on Save Template and you are done.

Hope you found this helpful.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments