How to Give Star Rating Effect In Popular Post For Blogger.

This time I will share with you a trick to add the icon in the widget of popular posts with star rating with Font Awesome. Popular posts on blogger blog make its looking nice with this trick


Surely here buddy already understands the use and benefit of the Popular Post Blogger widget. This star rating effect was inspired by star rating Popular Post widget on WordPress platform which serves to show the results of the voting were given a visitor on a particular article. So this tricks will help you to build star rating popular post widget on blogger platform.

[accordion][item icon="eye" title="DEMO"]
[/item][/accordion] Well, for those who want to try this trick that the Popular Post widget looks more attractive please follow the following simple steps:

Follow Steps:

  • Login back to your blogger account Select your blog < Template < Edit HTML
  • Save a backup of your blog template code first, now click inside the template code box.
  • Search for (Ctrl+F) </head> > copy (Ctrl+C) the following code and paste it (Ctrl+V) before ) </head>

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


    *If this awsome link above previously has been installed on your blogger template then skip this step..


  • Search for (Ctrl+F) </b:skin> > copy (Ctrl+C) the following code and paste it (Ctrl+V) before ) </b:skin>
.
/* 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';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';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}

  • Then save the template and see the results that you have done it successfully.

  • Any type of information please Contact us.
    Labels: ,

    Post a Comment


    1. buy-facebook-reviews Why Should You Buy Facebook Reviews?
      Seeing the need plus demand, numerous firms already offers promotion services that could help you entice thousands of followers toward your site as well as for a sensible fee. If you want toward get seen as well as recognized on the social media, 5 star rating is the finest choice as this is more evident for all the neti zens. By this, you could ensure a big improvement to your business with excessive effect toward your social media promotion strategy.

      ReplyDelete

    [blogger][facebook][disqus]
    Swicther!
    Layout
    Boxed Full
    Boxed Background Image
    Main Color
    #007ABE

    Shawon Khan

    {picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjkSsWvmjIpQ_ICXr5bGfT4RPhd5Vrxek-oaojrkvS3JiGv9vw6CubrWWVDfcVeVheD61_MlnQHrsEfAVH3JVIc_0zb-RwuasrPCJQBYPOaDaZ7LVdKorVE2kIhrh8sl-9a_s-R7ReQzX/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

    Contact Form

    Name

    Email *

    Message *

    Powered by Blogger.