Star Rating Effect For Blogger Popular Posts

Friends, Today I am going to share a trick to add Star Rating effect into blogger popular posts widget using font awesome.

Adding this effect to your blogger popular posts widget makes some additional benefits. It makes your popular posts more attractive. After adding this effect it's look like a WordPress plugin. The WordPress plugin are providing user rating and that rating will show on the bottom of popular posts list, but in blogger it’s complicated because there is no internal facilities to add a user rating setup. This effect only display a fixed rating.  It’s simple and you can easily add this effect to your blog.

Well, those who wants to try this trick follow the following simple steps:

As usual Log in to Blogger >> Template >> Edit HTML

This widget uses Font Awesome, please add the following CSS link above </head>

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

If the above link already installed, please skip this step.

Now find this code ]]></b:skin> and just above it paste the following code:

/* 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:'\f005\f005';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:'\f005\f005\f005\f005\f005';}.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';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}

Save your template and you are done! Visit your blog and you will see the star rating effect under each popular posts. Thank You!