Add Circle Image Style To Popular Post In Blogger

In this post im going to explain, how to add circle
image popular post widget to your blogger.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. Earlier i
posted three popular widget design. ill keep link
blow.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3.Find this code  by using Ctrl+F  ]]></b:skin>
4.  Paste below code Before ]]></b:skin> coden N

#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 { width:77px;height:77px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center; 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;}

5.Again Now Find this code  by using Ctrl+F  

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
6. After you found, scroll below until you see this code  </b:widget>
7. Now delete it start to end.
8. 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'> <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"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <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"'> <!-- (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'/> </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/> <!-- (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> <b:else/> <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1PNfsig5gM_Q2TOvoMOdFQHw42nwNbvL0th6ltI5q4vCFjzkLhIjIOKZzJOKOt1KkNdsinrhM2IS6secSbQeko30HkJwd5SSsx5JNuUmKIu3btpVKf0jYf_jC3Mal7xIKoU93DSmwyQ/s1600/helperblogger-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>
9. Now save your template. You are done.