3 Popular Post Widget With Rating Star For Blogger

Each and every blog must have a Popular Post widget in order to show the top performing posts of a blog to it’s visitors.Simply showing a Popular Post widget does not grab any visitors attention, So it should be really unique and an eye-catching one.

Most of the visitors to your blog does not notice you popular posts widget if it is not much good and beautiful to see.In order to make the widget to seen by all, it should be a good looking one.

Today in this article I’m sharing Top 3 Popular Posts widget for blogger which comes with Font Awesome icons and a different variety of fonts and color combination along with orange rating stars.

Check: How to add Snow Falling Christmas effect to your blogger blog

Features To Consider:

  • Font Awesome icons used
  • Orange Star Rating added
  • 3 different color varients
  • Easy to install and maintain
  • Unique font

Preview:

How to Install Popular Post Widget?


Step 1: Go to Blogger Dashboard > Template > Edit HTML

Step 2: Now paste the below given Font Awesome codes just above the </head> tag.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 3: Now again search for ]]> </ b: skin> or </ style>  tag and paste the below given code just above it(Choose code as per your choice)

CSS – Style 1

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f006f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f006f006f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f006f006f006f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f006f006f006f006f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

CSS – Style 2

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f006f006f006f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

CSS – Style 3

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Step 4:  Now go to layout > Add a Gadget >Popular Post > Save

All Done.

Now you have added this extra good Poular Post widget to your Blogger Blog.
Do remember this widget uses Font Awesome icons, So make sure that you install the Font Awesome Stylesheet before going in.

Also, check, How to add pop up Email subscription Widget

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *