Fully Different Style Popular Posts Widget

Posted On // 16 comments


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

Parallel Blog Author
5 May 2013 at 06:31

nice one i like it.

Reply
Dean Author
3 July 2013 at 00:55

Cool widget.. ^_^

Reply
20 July 2013 at 08:30

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

Reply
20 July 2013 at 21:12

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.

Reply
4 September 2013 at 11:50

Can you make this work for recent posts?

Reply
6 September 2013 at 23:38

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

http://guatemotiva.blogspot.com/

Reply
19 November 2013 at 19:19

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

Reply
Pranay Amle Author
21 November 2013 at 03:34

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

Reply
Sarah Los Author
23 November 2013 at 06:26

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

Reply
Habibi Author
21 December 2013 at 03:10

I think I want to install it into my blog.

Reply
Allie Davies Author
17 January 2014 at 14:12

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

Reply
ajay Author
5 October 2014 at 07:35

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

Reply
David Author
1 May 2015 at 01:02

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

Reply
David Author
1 May 2015 at 03:35

Now its shows some errors

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

Reply
wadnoune Author
3 June 2015 at 11:42

hello
I have a problem width img alt in populaire post

how can add alt



Reply
Sirosh Nasir Author
1 November 2015 at 13:02

Thanks, It's working great :)

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Fully Different Style Popular Posts Widget |