Popular post widget is also blogger default widget,blogger allow us to easily add a “Popular Post” widget that we select from list of gadget and we can add that in our blog by going to the Layout of our blog but to give the “Popular post widget” new and good look we need to make some change in css coding,so today we are provide 5 beautiful popular post widget for blogger with awesome hover effect popular post widget is also attract visitors after adding this widget to your blog you can make good impression on your visitors and increase number of page viewed.
How To Add Popular Post widget to Your Blog
To add custom popular post widget to your blog follow these steps
- Click on the “Layout”
- Click on the “Add Gadget” where you want appear your popular post such as the Sidebar
- Scroll down and select “Popular Post”
- Configure the widget to show only the title of post as show below
- Now Click on the save
5 different css popular post widget style
- Choose any style and copy the css code
- Click on the Template >> Edit html and find ]]></b:skin> to find it press ctr+f and copy the below code and past it before the ]]></b:skin> tag
Here a css style just choose one with image and copy the code and past it before the ]]></b:skin>
Style 1:
#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #FF9900; height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: ”;left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #FF9900; /* background color of the right arrow*/}#PopularPosts1 ul li a{color: #FF8000;text-decoration: none; font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #BFE3FE;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */} #PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}
Style 2:
/*— nafisflahi Popular Posts — */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/S
modosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #000000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #80C8FE;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Style 3:
#popular-posts ul { padding-left:0px; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border: 1px solid #dcdcdc; } .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border-bottom:1px dashed #dcdcdc; background:#ffffff; } .popular-posts ul li a { text-decoration:none; font:16px georgia,verdana; color:#3d87c4; } .popular-posts ul li a:hover { text-decoration:none; color:#333333; }
Style 4:
#PopularPosts1 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic;
}#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}
Style 5:
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget’s title */
text-align:left;
text-indent:18px;}
.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dcdcdc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { background:#FF8040; } .popular-posts ul li a { text-decoration:none; font:14px Georgia, verdana; color:#222222; } .popular-posts ul li a:hover { text-decoration:none; color:#fff; }
Now Click on the Save button and refresh the page to see the result
