Style Your Popular Posts Widget In Grid Style With Spin Effect

Blogger is all all about how you present your blog to your readers.The more the eye catching feature , better will be the effect and impression that your reader will have about your blog.Now , every blogger uses a few default widgets such as Popular Posts.There are millions who use this widget.So what makes your blog different if you use the default one.Today we will customize the popular posts widget and make it look unique.

Live Demo

Pre-requirements For the Customization 

• Go to blogger and add a Popular Posts Widget (if you haven't already)
• Change the settings of Popular post and tick mark only Images 

Customizing Popular Posts 

• Now Go to Template/Design > Edit HTML . DO NOT Click on the Expand Widget Templates checkbox. Leave it unchecked, and look for  PopularPosts1 (Do a Ctrl +F to find it in your template) and you will get some line like this : 

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

Change This line to

<b:widget id="PopularPosts1" locked="false" title="Popular Posts" type="PopularPosts"><b:includable id="main">
  <b:if cond="data:title"><h2>
<data:title></data:title></h2>
</b:if>
  <div class="widget-content popular-posts">
<ul>
      <b:loop values="data:posts" var="post">
<li>
        <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" href="http://www.blogger.com/blogger.g?blogID=5698257744313718638"><data:post .title=".title"></data:post></a>
          <b:else>
            <!-- (2) Show only snippets -->
            <div class="item-title">
<a expr:href="data:post.href" href="http://www.blogger.com/blogger.g?blogID=5698257744313718638"><data:post .title=".title"></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=".snippet"></data:post></div>
</b:else></b:if>
        <b:else>
          <b:if cond="data:showSnippets == &quot;false&quot;">
            <!-- (3) Show only thumbnails -->
            <div class="item-thumbnail-only">
<div class="item-thumbnail">
<a expr:href="data:post.href" expr:title="data:post.title" href="http://www.blogger.com/blogger.g?blogID=5698257744313718638">
    <b:if cond="data:post.thumbnail">
                    <img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
       <b:else>
        <img alt="" border="0" expr:height="data:thumbnailSize" expr:width="data:thumbnailSize" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5_Fu_ZcndqMPLQH9d34CMd0KDQV0lH2PPcAODdhqaKZ8dIj-6dQeF7mMwQ_hjdyQOgG_rhed99F0vCr0NyzrQgnHet_i7Bl8wvTFQUcxqHXB13jUDS9RJ0Or7BrsOcHZFZOqdXPktxQ/s72-c/default.png" />
       </b:else></b:if>
                  </a>
                </div>
</div>
<b:else>
            <!-- (4) Show snippets and thumbnails -->
            <div class="item-content">
<b:if cond="data:post.thumbnail">
                </b:if><br />
<div class="item-thumbnail">
<a expr:href="data:post.href" href="http://www.blogger.com/blogger.g?blogID=5698257744313718638" target="_blank">
                    <img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />
                  </a>
                </div>
<div class="item-title">
<a expr:href="data:post.href" href="http://www.blogger.com/blogger.g?blogID=5698257744313718638"><data:post .title=".title"></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=".snippet"></data:post></div>
</div>
<div style="clear: both;">
</div>
</b:else></b:if>
        </b:else></b:if>
      </li>
</b:loop>
    </ul>
<b:include name="quickedit">
  </b:include></div>
</b:includable>
</b:widget>

Now search for : ]]></b:skin> , copy this code above it

.popular-posts .item-thumbnail{float:left; filter:alpha(opacity=99);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;} .popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
.popular-posts .item-thumbnail:hover{padding:0!important;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transition-duration:700ms;-webkit-transition-duration:700ms;-o-transition-duration:700ms; filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
.shareit {
top: 250px;
left: auto;
z-index: 0;
margin-left: -140px;
width: 90px;
position: fixed;
overflow: hidden;
padding: 3px;
margin-bottom: 20px;
}

Save your template

Written by Aman

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.