Cute Custom Popular Post Widgets For Blogger

The default blogger blog's popular post widget is unattractive and doesn't catch the attention of readers. So, I designed these two cute custom popular post widgets for blogger blogs. 

Both of these comes with "round thumbnails"  which make these look even more stylish. One of these is pink and cute and other one with stripes is stylish. Adding any of these  widget to your blogger blog will grab  the attention in no time and you'll get more clicks on your popular posts which will further boost the seo of your popular posts. The best part about these "stylish widgets" is that these are created with pure css only. No images have been used. So, adding these  widgets to your blogger blog won't affect the loading time of your blog at all. Adding this widget to your blog is as easy as counting 123.. Just follow the steps given below:

Features Of This Cute Popular Post Widget With Round Thumbnails:

• No Images used in this widget.
• Created with pure css only.
• Doesn't affect the loading time of your blog at all.
• Light-weight code.
• Supported by all major browsers
• Degrades gracefully in lower browsers. 

How To Add Custom Popular Post Widget To Blogger:

To Install this widget, Follow one of the two procedures given:

Step 1: Login to blogger dashboard and select your blog.

Step 2: Select Template option.

Step 3: Click on Customize button.

Step 4: Select Advanced option from the list.

Step 5: Select Add CSS option from the list(the last option in list).

Step 6: Paste one of following codes in the Css text area and click on Apply To Blog button.

OR

Step 1: Login to blogger dashboard and select your blog.

Step 2: Select Template option.

Step 3: Click on Edit HTML button.

Step 4: Prss cntrl+F and Search for ]]></b:skin>.

Step 5: Paste the code above ]]></b:skin>.

Step 6: See the Preview of blog by clicking on Preview button and then click on Save Template button.

PREVIEW

CODE

#PopularPosts1 ul{

counter-reset: li;

background-color:white;

background-image: radial-gradient(pink 15%, transparent 16%),

radial-gradient(pink 15%, transparent 16%);

background-image: -moz-radial-gradient(pink 15%, transparent 16%),

-moz-radial-gradient(pink 15%, transparent 16%);

background-image: -o-radial-gradient(pink 15%, transparent 16%),

-o-radial-gradient(pink 15%, transparent 16%);

background-image: -webkit-radial-gradient(pink 15%, transparent 16%),

-webkit-radial-gradient(pink 15%, transparent 16%);

background-size:30px 30px;

background-position: 0 0, 15px 15px;

border:1px solid #ffc0cb;

padding:10px;

}

#PopularPosts1 li{

background:pink;

margin: 10px;

padding-left:5px;

border-radius:10px;

}

#PopularPosts1 li a{

color:white;

}

#PopularPosts1 ul li:before{

counter-increment:li;

content:counter(li);

position:absolute;

left:-10px;

font-size:33px;

width:40px;

text-align:center;

z-index:5;

background: white;

border:2px solid pink;

border-radius:50px;

-moz-border-radius:50px;

--webkit-border-radius:50px;

color:pink;

}

.popular-posts .item-thumbnail img {

padding-right:0px;

 -webkit-border-radius: 100px;

  -moz-border-radius: 100px;

  border-radius: 100px;

}

PREVIEW

CODE

#PopularPosts1 ul{

background-color:white;

background-image:linear-gradient(black 50%, white 50%);

background-image:-moz-linear-gradient(black 50%, white 50%);

background-image:-o-linear-gradient(black 50%, white 50%);

background-image:-webkit-linear-gradient(black 50%, white 50%);

background-size:10px 10px;

padding:8px;

}

#PopularPosts1 li{

background:#ff66cc;

box-shadow:2px 2px 2px;

border-radius:10px;

margin:8px;

padding-left:5px;

}

#PopularPosts1 li a{

color:white;

}

.popular-posts .item-thumbnail img {

padding-right:0px;

-webkit-border-radius: 100px;

  -moz-border-radius: 100px;

  border-radius: 100px;

}

Note: You can change the colors of this widget if you wish to. Just change the color codes in the above code.
See color codes here.

So, this was all about how you can add a cute custom popular post widget with round thumbnails to  your blogger blog. For adding more cute widgets to your blogger blog read:

HOW TO DESIGN SIDEBAR HEADINGS IN BLOGGER
ADD DESIGNER EMAIL SUBSCRIPTION WIDGET BELOW POST IN BLOGGER
5 CUTE HORIZONTAL MENU BARS FOR BLOGGER
CUTE CUSTOM LABELS WIDGET FOR BLOGGER BLOG

Get Access To All The Updates And Freebies

Sign Up For Our NewsLetter...