Fully Different Style Popular Posts Widget

Create free fully different style popular posts widget on your blogger blog. This widget is for your blog to seems like attractive, its very easy to put on your blog, you just have to follow some simple steps.

Step 1 : Adding Popular Posts Widget 

Go to Blog Title > Layout > Add a Gadget > Popular Posts. After adding the widget Save the settings.

Step 2 : Adding The CSS 

Firstly go to Blog Title > Template > Edit HTML. Expand <b:skin>...</b:skin> if it is not expanded. Press Ctrl + F. Type ]]></b:skin> in search box and press enter key. Add the below given code just above ]]></b:skin>

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}

.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}

#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

After adding the above code save the template.

Step 3 : Editing The HTML

Now search for <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget> You may/may not expand this code. All you have to do is replace the whole code with the code given below.

<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'>

      <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'><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 -->

            <div class='item-content'>

              <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 class='item-snippet'><data:post.snippet/></div>

            </div>

            <div style='clear: both;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

That's it you are done now. You and your visitors can now see this different style of Popular Posts widget on your blogger blog.