Home Blogging How To Add Circle Image Style To Popular Posts in Blogger

How To Add Circle Image Style To Popular Posts in Blogger

0
SHARE

Today in this article, I’m going to tell you that, how to add circle image style to the popular posts in blogger blogs. It is the best and awesome blogger widget for all blogger users. As you see many times on all other blogs, the Popular Posts Widget are in rectangular style mostly. Also by default the popular posts widgets are in rectangular style. But here I’m show you how you can easily convert it into circle image style which are more awesome looking and very attracting for your readers.

How To Add Circle Image Style To Popular Posts in Blogger

Adding Circle Image Style To Popular Posts in Blogger Blogs

Step 1 – First of all go to the www.blogger.com .

How To Add Circle Image Style To Popular Posts in Blogger
Step 2 – Go to your blogger dashboard and select your blog. 
Step 3 – Go to your blogger template and click on “Edit HTML” expand your template.
How To Add Circle Image Style To Popular Posts in Blogger
Step 4 – Now click anywhere inside code and click  CTRL + F shortcut key for searching something.
How To Add Circle Image Style To Popular Posts in Blogger
Step 5 – Now copy this tag and paste inside the search box and ENTER .

]]></b:skin>

Step 6 – Copy below code and paste just before this ]]></b:skin> tag  and save your template.

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

Step 7 – After that again click CTRL + F and find this line of code.

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>

This code will be ended at  this </b:widget> tag. You can select all these code and replace it with the given code.
Step 8 – Now copy this code and replace with the above line of code.

<b:widget id=’PopularPosts1TN’ locked=’false’ title=’Popular Posts’ type=’PopularPosts’> <b:includable id=’main’> <b:if cond=’data:title’> <h2> <data:title/> </h2> </b:if>
 <div class=’widget-content popular-posts’> <ul> <b:loop values=’data:posts’ var=’post’>
<dd> <b:if cond=’data:showThumbnails == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<a expr:href=’data:post.href’><data:post.title/></a> <b:else/>
 <div class=’item-title’> <a expr:href=’data:post.href’><data:post.title/></a> </div>
<div class=’item-snippet’> <data:post.snippet/> </div> </b:if> <b:else/> <b:if cond=’data:showSnippets == &quot;false&quot;’>  <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’/> </a> </div> </b:if> <div class=’item-title’> <a expr:
href=’data:post.href’><data:post.title/></a> </div> </div> <div style=’clear: both;’ />
 <b:else/>  <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> <b:else/> <a expr:href=’data:post.href’ expr:title=’data
:post.title’ rel=’bookmark’><img alt=’no image’ height=’60px’ src=’https://lh3.googleusercontent.com/-vF7fozCgOq8/V2wk26RN3VI/AAAAAAAAG9g/pt7mtHyF2zAvsX3Z2xm
dPJWIE7JkXP78gCLcB/h120/techora-default-image.jpg’ width=’60px’/></a>
</b:if> </b:if> </b:if> </dd> </b:loop> </ul> <div class=’clear’ />
<b:include name=’quickedit’ /> </div> </b:includable> </b:widget>

Step 9 – Save your “Template” and go view your blog .