Add Spinning Hover Effect To Blogger's Popular Posts Widget

How To Apply This Hack

1. Go to Dashboard > Template
2. Download a copy of your template first.
3. Tick the Expand Widget Templates check box.
4. Now find for below code in your template

]]></b:skin>

Add below code just above/before of above 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);
}

Now be careful in this step.

Find below piece of code in your template

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.
.
.
.
</b:widget>

replace above piece of code with below one

<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/AVvXsEgqLgAAK9XkjpL0hnVbeko_aPVVe_APNGJR30YJ6VkZMxGRY7EuBfycT6cbutGxShgCnADJnA-jGpRmC1y4D2iFOh3APdyXbQT6o8yMpmvkDvvlsYYpCOWS_0z4c-YNJkoQw4KzLWaxhxk/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>

Now save your template and you are done... :)

If you have any queries then feel free to ask me.I will reply to your questions as soon as time allows.

Tweet