Friday, September 14, 2012

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.

circle-popular-post

Add Spinning Hover Effect To Popular Posts Widget In Blogger
How To Add Multi-Color Popular Posts Widget For Blogger
Add V2 Style Popular Posts Widget With Multi Color For Blogger


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/AVvXsEjsQs2fg1qJy_5AmYgCAiv3JatnY9yePPKR3j4x5bSFe-Iy-Y30NBNv5yDUUCf6FIvQtBuw5iWks0sAJYdSe7Y3Z5wpuRwIjMPjgTSaGrQXpXY-qx7_z86CsCLqKhOhUeezr2LLge_Y_ak/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.

2 comments:

  1. This tutorial is very helpful
    keep updating the page and i will come back to visit very often

    ReplyDelete
  2. This Tutorial is so helpful for all of us!
    Have a glimpse of my blog as well : Submit Your Blog Feed To Google News

    ReplyDelete