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.
Adding Circle Image Style To Popular Posts in Blogger Blogs
Step 1 – First of all go to the www.blogger.com .
]]></b:skin>
#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;
}
<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>
<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 == "false"’>
<b:if cond=’data:showSnippets == "false"’>
<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 == "false"’> <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>
