Popular posts is a widget provided by blogger which shows a list of most viewed posts from your blog.We have already shared three hacks about popular posts widget (Multi Colored Popular Posts | Popular Posts Hack 1 | Popular Posts Hack 2).Today we will add spinning popular posts widget to blogger blog,in this widget when any user hover on the image thumbnail of popular posts the spinning effect activated and rotates the thumbnail until the user hovers out from it.We will add this hack with using pure CSS3 i.e this will not affect the the loading speed of your blog.But If you have not added popular posts widget to your blog still then you have it first.(Note-While adding popular posts gadget to your blog,tick the image thumbnail and save it) Now see how to add apply this hack.

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='http://3.bp.blogspot.com/-yIv8Rn_rvvA/T6-sigEHCYI/AAAAAAAABvY/BepU32JUC5g/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.

Post a Comment

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. @JayRyan09 - pls don't spam here this is your fourth time.

      Delete
  2. Thanks for this post! I have it now on my blog, just want to know how do you do the social bookmarks below your post here? It's cute and I want to use it too on my blog. Thanks in advance!

    ReplyDelete
    Replies
    1. Ok I will publish a tutorial on it soon.Keep connected with this blog.If you want it urgently the contact me through contact page I will send you the code :)

      Delete
  3. Pls help , im facing the error no bX-4xcpmw

    ReplyDelete
  4. my blog...its show thumbnail w/o snippets..why

    ReplyDelete
  5. Thanks for the tutorial is easy to understand and very useful

    ReplyDelete
  6. oh yeah!! 100% working for my blog... See This if want..

    http://hdripmoviz.blogspot.com/

    Follow the instruction carefully...

    ReplyDelete
  7. how to use this for blog post photo? the thumbnail one

    ReplyDelete
  8. Thanx, it works good for my blog (http://www.chinhluanvn.com/)

    ReplyDelete
  9. dude its nice, but i need some change in it please do that on next post.
    i want popular post on thumbnail images only and that must be spin lik this.
    i want it for my blog
    http://moviethandura.blogspot.com

    ReplyDelete
  10. I tried it in my website and got only thumbnails.I didn't get the title of my posts.Please help...

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top