Customize Blogger's Popular Posts Widget : 7 Different Styles

5:53 AM

You can add a 'Popular Posts' widget to Blogger easily from the 'Layout' of you blog.  In this post I am going to show you how to customize the official popular post widget given by Blogger. The most important thing is we are not going to add any JavaScript/HTML widget here. We just change the look of it.

This is a worthy approach to keep your visitors busy and enable them to spend more time on your blog.
At first you have to add the widget given by blogger to your blog. If you already added ignore this step.

Steps

  1. Go to Blogger > Layout > Add a Gadget > Popular Posts
  2. Make settings on widget (whether showing image thumbnail and snippet) and Save
  3. Go to Template > Edit HTML > Find ]]></b:skin>
  4. And paste given CSS Code just above it. And Save the Template.
Popular-Post-Widget-Blogger

Make these settings for style 1,2,3,4. You can change change the number of posts as your wish.widget-settings-1
Make bellow setting for style 5,6,7. You can change the number of posts.
blogger-popular-post-customize

Style 01

.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 2

/***** Popular Post *****/
.popular-posts ul { padding-left: 0;
counter-reset: trackit;
}
.popular-posts ul li {
border-bottom: 1px solid #f0f0f0;
list-style: none outside none !important;
margin-left: 0 !important;
overflow: hidden;
padding: 10px 0 !important;
transition: all 0.25s linear 0s;
counter-increment: trackit;
}
.PopularPosts .item-thumbnail img {
display:none }
#PopularPosts1 a, #PopularPosts1 a:hover{
color:#959595;
font-size:.9rem
}
.widget-content.popular-posts {
border-top: 1px solid #CCC;
padding: 2.5em 0 0;
margin: -25px 0 0 0;
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
#PopularPosts1 ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #C4C4C4;
}
#PopularPosts1 li:first-child{
border-top:1px solid #f0f0f0
}
#PopularPosts1 li:nth-child(odd)
{background:#f5f5f5
}
#PopularPosts1 h2{
padding-right:.4em;
padding-left:1em
}

Style 03

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li:hover {
border:4px groove #fff;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
#PopularPosts1 ul li a {
-webkit-text-size-adjust: auto;
-webkit-text-stroke-width: 0px;
color: #ffffff;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 18px;
margin: 0px 40px 0px 0px;
min-height: 30px;
orphans: 2;
padding: 0px;
text-align:-webkit-auto;
text-decoration: none !important;
text-indent: 0px;
text-transform: none;
white-space: normal;
widows: 2;
word-spacing: 0px;
}
#PopularPosts1 ul li .item-thumbnail{
float:left;
border:0;
margin-right:10px;
background:transparent;
padding:0;
width:51px;
height:51px;
}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
position:absolute;
top:10px;
right:5px;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border:2px solid #ccc;
background:#353535;
box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
width:30px;
height:30px;
line-height:1em;
text-align:center;
font-size:28px;
color:#fff;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{
background:#000000;
width:90%;
}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{
content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#C50101;width:93%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#1a1a1a;width:93%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#C50101; width:93%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#1a1a1a ;width:93%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{
margin:0;
padding:0px 0;
list-style-type:none;
}
#PopularPosts1 ul li{
position:relative;
margin:6px 0;
border: 1px solid #c2c0b8;
-webkit-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.02) inset, 0 5px 0 -4px #222, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #222, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #222, 0 17px 0 -11px #c2c0b8;
padding:10px;
}
.PopularPosts .item-title a{
font: normal bold 36px Segoe UI;
font-size:16px;
color: #ffffff;
}
.PopularPosts .item-title a:hover{
color:#ffffff;
text-decoration:none;
}
.widget-content.popular-posts li{
font: normal normal 16px Segoe UI;
}
.item-snippet {
height:2.5em;
overflow:hidden;
}

Style 04

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Style 05

#PopularPosts1{max-width:297px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}

#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Style 06

.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}

.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}

Style 07

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #3366FF;
 -moz-box-shadow: 3px 2px 5px #3366FF;
-webkit-box-shadow: 3px 2px 5px #3366FF;
box-shadow: 3px 2px 5px #3366FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #3366FF;
-webkit-box-shadow: 0px 0px 5px #3366FF;
box-shadow: 0px 0px 5px #3366FF;}
Note >> Some styles will not appear in Internet Explore.
Feel free to ask any questions about the post in comments. Have a nice day..

Credits

Tech Blog
advertise here !

Hi, I'm Shohag studying Computer Science Engineering at Dhaka International University. I love to write online and always try to share tech tutorial in this personal blog you  can join me on facebook and follow on twitter.

Subscribe via email


Related Posts

Previous
Prev Post »
Show comments
Hide comments

Don't Be Shy To Ask Your Question EmoticonEmoticon

Get Free 25$ For Sign Up Bonus

go.sisourav.com

Earn Free Money From Online