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..
/* 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}
Any type of information please Contact us.
ReplyDeletebuy-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.