As I said earlier, Adding popular post widget is a way to attract your
blog visitors. Because, it shows the posts, which are mostly visited by
people. So more than half of your blog visitors will surf more pages on
your blog. In previous post, I explained how to add numbered popular
post widget in blogger. Now I'm going to introduce that rounded
thumbnail popular post widgets to you. It is amazing widget like
numbered popular posts widget.
Already we are using this rounded thumbnail popular posts widget in our
blogs. It gives more impressions than others. So that we are
recommending this popular posts widget also. Let me explain how to add
this rounded thumbnail popular posts widget in blogger blog.
Add The Popular Posts Widget In Layout
Add the popular post widget in the right place to show this numbered popular posts widget on your blog using below steps.
Go to Blogger Dashboard ---> Layout section ---> Add a gadget ---> Popular posts
Add The CSS Code In Template
- Go to Blogger Dashboard ---> Template ---> Edit HTML
- Search for ]]></b:skin> using Ctrl+F
- Add the below CSS code just behind ]]></b:skin>
- Click on Save template button
<!----earnwithsajid.blogspot.com rounded popular posts stops---->
.PopularPosts .widget-content {
font-size: 15px;
margin: 0 !important;
}
.popular-posts ul {
margin: 0 !important;
padding: 0 !important;
}
.popular-posts ul li {
list-style: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #FFFFFF;
padding: 0 !important; }
.popular-posts ul li:first-child {
border-top: 0;
}
.popular-posts ul li:last-child {
border-bottom: 0;
}
.popular-posts ul li:hover {
background: #fafafa;
text-decoration: none;
}
.popular-posts ul li a {
color: black;
display: block;
padding: 18px 24px; } .popular-posts ul li a:hover {
color: orange;
text-decoration: none; }
.PopularPosts img { background: #fff;
border: 1px solid #CCCCCC;
display: block;
float: left;
height: 58px;
margin-right: 8px;
padding: 3px;
width: 58px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.PopularPosts {
background: #F2F2F2;
border: 1px solid #E3E3E3;
}
.PopularPosts h2 {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKwn3-_Vm4fnlqGNP4BA_KB46I5N4M8Wg91baB-WBDR6O2s2go9lysjw1H-XD6TLwkEh15wSPQcBlXjVTaStpX8u9e-Zc0hLuuRrvZC_LTkRBtXGWMQohkunX1Ld1r8lWmqJKsMZ4dehA/s1600/sidebar2_h22.png") no-repeat scroll 0% 0% transparent;
color: rgb(213, 213, 213);
height: 55px;
font-size: 14px;
font-weight: bold;
margin: 0px 0px -28px;
position: relative;
left: -8px;
top: -10px;
width: 365px;
text-align: center;
padding: 8px 0px 0px;
font-family: helvetica;
}
<!----earnwithsajid.blogspot.com rounded popular posts stops---->
That's all. You are done!
If you encounter any problem, feel free and comment below to get solution. Share your experience with us.
0 comments:
Post a Comment