Popular posts widget is one of the most commonly used widgets on
each and every blog. Blogger has its own default popular posts widget for its
blogs but this widget is not very attractive. It displays a simple list
of popular posts without any customization in it.. For this reason it looks
very ugly and effects the whole design of the blog. But one good thing about
this widget is that it can be easily customized by using CSS code. In this post we will discuss 4 different
styles for customizing default popular posts widget in blogger
Adding popular posts
widget to blogger :
·
Go to your blogger
dashboard.
·
Select Template option.
·
Select Edit HTML.
·
In the template code
find ]]></b:skin>
·
Just above it paste
code of one of the following popular posts widget and save the Add 4 stylish custom
popular posts template.
Style 1 :
Code:
.popular-posts
ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px
20px !important;
border: 1px solid
#dddddd;
-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-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1)
100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /*
Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
}
.popular-posts ul
li:hover {
-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:2px 2px 4px #333333;
border:1px solid
#333333;
color:#fff;
}
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
.popular-posts ul li
a:hover {
text-decoration:none;
}
Style 2:
Code :
.popular-posts
ul{padding-left:0px;}
.popular-posts ul li
{background: #ffffff no-repeat scroll
5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px
20px !important;
border: 1px solid
#dddddd;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
.popular-posts ul
li:hover {
border:1px solid
#555555;
}
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
.popular-posts ul li
a:hover {
text-decoration:none;
color:#555555;
}
Style 3 :
Code:
.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;
}
Style 4 :
Code:
.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;
}
You might also like : Blogger , Blogger widgets
No comments:
Post a Comment
Please feel free to comment regards this post