Add Circle Image Styles To Popular Posts in Blogger

A Blogger always wants good looking blogger widgets in their blog. In this post I’m going to share How To Add Circle Image Style To Popular Posts in Blogger. This popular post widget with circle image style give cool look to your Blogger Blog.
Add Circle Image Style For Popular Posts in Blogger Blog
Circle Image Style For Popular Posts

Actually popular post widget help you to identify popular post in your blog. In blogger already have this widget , so we can do some customize for make it attractive. This include with nice hover effect too.

If you want to add this widget in your blogger blog then read complete guide below. Blogger have already this widget for every blog so I’ve modify it for looking more better in Blog. This includes with a good looking Hover Effect. Follow all steps one by one if you want to implement this Blogger Widget in your Blogger Blog.

Steps For Adding Circle Image Style To Popular Posts in Blogger

Note : First Get A Backup copy of your Template.
  • Go To Blogger Dashboard >> Templates >> EDIT HTML.
  • Now Search For ]]></b:skin> tag and paste below code just above of this tag.

#PopularPosts1 {
max-width: 300px}
#PopularPosts1 dd {
float: left;
border-bottom: none;
margin: 8px 8px 0 8px;
background: none;
display: block;
padding: 0}
#PopularPosts1 img {width:75px;height:75px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;}
#PopularPosts1 img:hover {
cursor: pointer;-webkit-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;
-moz-box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;
box-shadow: 0 0 20px #0cb1f6, inset 0 0 20px #0cb1f6;}

  • Now Search for <b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’> 
  • After you found, scroll below until you see this code  </b:widget>
  • Now delete it start to end.
  • After delete is place below code in same place.

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<div class=’widget-content popular-posts’>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:showThumbnails == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<!– (1) No snippet/thumbnail –>
<a expr:href=’data:post.href’><data:post.title/></a>
<!– (2) Show only snippets –>
<div class=’item-title’>
<a expr:href=’data:post.href’><data:post.title/></a>
<div class=’item-snippet’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<!– (3) Show only thumbnails –>
<div class=’item-thumbnail-only’>
<b:if cond=’data:post.thumbnail’>
<div class=’item-thumbnail’>
<a expr:href=’data:post.href’ target=’_blank’>
<img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/>
<div class=’item-title’>
<a expr:href=’data:post.href’><data:post.title/></a>
<div style=’clear: both;’ />
<!– (4) Show snippets and thumbnails –>
<b:if cond=’data:post.thumbnail’>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><img expr:alt=’data:post.title’ expr:src=’data:post.thumbnail’ height=’60px’ width=’60px’/></a>
<a expr:href=’data:post.href’ expr:title=’data:post.title’ rel=’bookmark’><img alt=’no image’ height=’60px’ src=’’ width=’60px’/></a>
<div class=’clear’ />
<b:include name=’quickedit’ />

  • Now save your template. You are done.
  • Now open your blog in new tab and also tell us about your experience in comment box.

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.


So above guide is about How To Add Circle Image Style To Popular Posts in Blogger and i hope by using this widget readers are automatically attract to your blog and this can effect to your blog in increasing page views. If you have any query related to the article then drop a comment below. Hope you will like this post. Don’t forget to share on Blogging communities and with your blogger friends.

Thank You! Stay Blessed!

Paramjot Singh

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: