Fully Different Style Popular Posts Widget



I have already posted two CSS customizations for Popular Posts before, they are -
Popular Posts Widget with Hover Effect for Blogger
Popular Posts v2 Widget customization
This time I am going to post something different. You will have to edit the CSS as well the HTML for this new type of Popular Post widget.
The live demo of this widget can be seen by going to the below link and look at the right sidebar.



After seeing the demo it may be quite easier to know how it actually works. So the steps to add this widget to your blogger blog is given below.

Step 1 : Adding Popular Post Widget


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



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. [As per the new HTML editor]
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>

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

16 comments:

  1. This is great! Is there a way to make the images bigger?

    ReplyDelete
    Replies
    1. Yes it is possible. In the first code (CSS one) add the below given code in the end of it.

      [pre]
      #PopularPosts1 img {
      width: 100px !important;
      height: 100px !important;
      }
      [/pre]

      You may change the width and height (make sure they are same in size) as per your wish.

      Delete
  2. Can you make this work for recent posts?

    ReplyDelete
  3. I want it to open the link in the same page not a new page. What can I do?

    http://guatemotiva.blogspot.com/

    ReplyDelete
  4. I would like something similar for popular posts, is there a way to do that?

    ReplyDelete
  5. How to add to this blog.... http://windowgear.blogspot.in/

    ReplyDelete
  6. Can you make the images square? And in a vertical line?

    ReplyDelete
  7. I think I want to install it into my blog.

    ReplyDelete
  8. this is just what I've been looking for, thankyou!

    ReplyDelete
  9. hello sir, i need the same effect for recent posts widget, please help me

    ReplyDelete
  10. this is really cool widget and i apllied this to one of my blog
    thanks for this update and waiting for new
    i will often visit this page
    Thank you

    ReplyDelete
  11. Now its shows some errors

    Keep updating the blog please
    i will come back often to check this blog
    thank you

    ReplyDelete