GoWidget this time I will
give you tricks on how to add an icon to the star rating in the Popular Posts
widget with Font Awesome.Surely here you already
understand the use and benefits of the Popular Post widget in Blogger. Addition
effect is inspired by star rating Popular Post widget on WordPress platform
that serves to display the results of voting that the visitor on a particular
article.
Well, for those who want to
try this trick so Popular Post widget looks more attractive please follow the
simple steps below :
Add Effect Star Rating in
Latest Post with Font Awesome
This widget uses Font
Awesome, please add the following CSS link above </head>
CSS - GoWidget
If the link below previously
been installed, please skip this step.
1. Login to Blogger >> Open Template Editor >> Add the code below before ]]> </ b: skin> or </ style>
Style
1
CSS - GoWidget
/* 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:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul
li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul
li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\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}
Style
2
CSS - GoWidget
/* 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}
Style
3
CSS - GoWidget
/* 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}
2.
Next save the template and view the
results.
Here I do not give a live
demo, demo could see my friend see in the picture above post or
can also visit the blog dummy Twisted Shape
<http://twistedshape.blogspot.co.id/2015/1/memasang.pop.up.about.us.ala.arlina.design.html>
So from me to trick How to
Give Effect Star Rating in Latest Post with Font Awesome, sorry if there are
shortcomings and hopefully useful.