Add Circle Image Style To Popular Post In Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

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> code

#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 == &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>
                                <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 == &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'/>
</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/AVvXsEjWVs8uqHLrwWi2n1iKcoFuDXrhz2I1BLACKS0SoVgUsFBbJSorT1ahiWdHtAOgT0Rtso9HS_dgn-Rpd98AtBmhhreeXAmSeGVVtg-84vPzUO2PCH0Geq1uDC_mfCRrp3T8wDI9gEA-FY0/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.