Add Spinning Hover Effect To Popular Posts Widget In Blogger

Popular Post widget helps to identify most popular
post in your blog.So, Blogger already  added the
that features for every blog.We can customize is
with great look. So, this is the tutorial for it.In earlier
i wrote a post about.How To Add  Multi-Color
Popular Posts Widget For Blogger. Actually it was a
color effect. But this tutorial helps you to customize
your popular post with Spinning  hover style.It giving
great look to your blog. Its not too hard to add it to
your blog.Why don't you try it? just try this below steps

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 {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

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.