Elegant Popular Posts Widget for Blogger Tweak

Posted On // 48 comments
Popular Posts Blogger
Ever wanted a really elegant and beautiful popular posts widget for your blogger blog? If yes, then you have landed on the right place. Today I am back with yet another unique and amazingly looking popular posts widget customization.
I had my exams which ended just a couple of days before so I was thinking of something substantial to post. A image of this came to my mind and its here for all of you to use.

I have already posted quite a few Popular Posts customization posts. They are -

 So the widget I am going to add today looks quite different from the rest of the collection. You can see the demo of the customized Popular posts widget by clicking the button below.

Live Demo

Once you have seen the demo, to add the Popular posts customized widget follow the given steps.

Adding the Popular Posts Widget

Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.

Adding the CSS

Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>
/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content { position: relative; }

Also note that you have removed all the previous Popular Posts CSS codes (if any) before adding this one or the result will be the combination of the two.

Adding the JS

Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, search for </body> and paste the below given code just above it.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
    <script type='text/javascript'>
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');

After adding the code save the template. PS. Remove the code in red if you already have it in your template.

You are done now. Now you and your visitors can see this elegant Popular posts widget on your blogger blog. Also it is my earnest request to you that please do not remove the comments added in the codes. They will not be displayed in your blog. Only the person viewing the code can see this.


Anonymous Author
17 March 2014 at 17:28

hello will u share the popular post widget which are u using on this blog. above this comment

ItsGhani Author
22 March 2014 at 08:37

Nice tutorial and Thanks for sharing. Your site is ultimate blogging helper. <3

Bro I had a problem with my blog that Google is crawling.my Blog labels also, due to which it shows duplicate meta description error. Please suggest me any solution?

Best Blogger Tricks 2014

Dhiraj Author
23 March 2014 at 09:43

This can be done by editing the Robot.txt file.. Google for more info, there are quite a lot tutorials which will help you.

Sudheer Yadav Author
1 April 2014 at 23:26

I am planning to use this on my indian movie blog http://guruofmovie.blogspot.in/

Malik Author
2 April 2014 at 14:09

Quite informative. Just wanted to drop you a quick note to say thank you for a great resource.

Blogger Bearned

Unknown Author
4 April 2014 at 14:57


Liyana Aris Author
25 April 2014 at 12:11

Hello there,

I've been looking for a good-looking popular post widget for a while and I must say yours is the most good-looking one so far. I've applied it to my blog and I love the effect.

Thanks so much!

16 May 2014 at 20:15

Nice widget, but it does't work for my blog. I want your help. My blog; Tiny Serval

Ghazi Author
27 May 2014 at 00:35

Nice Tutorial.Keep sharing with us.

1 June 2014 at 20:30

Hi amazing tutorial! Ended up with a great look - did a bit of editing myself as well :)

To take it a step further, was wondering if I can change the date range? So choose my own dates instead of just 7 days, 30 days or all time. There doesn't seem to be any instruction out there on how to do it.


3 June 2014 at 11:39

Cool tutorial bro.. Thanks for share . Hope I will get benefited by this article Thanks a lot .

JasrajBedekar Author
14 June 2014 at 20:48

It does not work on my blog do i need to add an image at the start of every post to enable thumbnails

Anonymous Author
15 June 2014 at 18:07

Great and really cool widget!!!

It doesnt work with google chrome browser

Victoria Author
12 July 2014 at 07:37

You should see that option under the Popular Posts widget itself

21 July 2014 at 10:35

Hi it is already shared here- http://www.allbloggertricks.com/2013/04/popular-posts-v2-widget-customization.html

T&B Author
8 August 2014 at 21:34

I love the look of this, but for some reason it is not working on my blog. I can get the standard blogger widget up but then none of the edits to change the look work. I followed the directions as written. Any ideas why it may not work?

Sumeet Sharma Author
11 August 2014 at 13:06

This is the best popular post widget, but when we see this widget in mobile version of our website, then the title goes behind the image, please correct it and upload the complete correct code asap :)

T&B Author
12 August 2014 at 02:58

I figured it out, but now I can't figure out how to get rid of the bullets or dots in front of each thumbnail. Any ideas anyone????

Grace Joseph Author
20 August 2014 at 01:29

Good tips, i'll try this

Fanboy Author
24 August 2014 at 07:56

I was looking for this ..
Thank you

Katie Brown Author
3 September 2014 at 05:29

Is there a way we can customize your this one? Like change the font or color of the font?

10 September 2014 at 23:54

love u

Unknown Author
23 September 2014 at 22:50


Thanks a billion for this tutorial it looks so elegant and crisp! Just what I was looking for :D
Now my problem is: I want the widget to be in my header area, so above my posts, but when I place it here the popular posts are still ABOVE one another. I want the pictures to be NEXT to eachother, how do I do this?

Thanks a lot,

Maria. www.phentastic.com

Unknown Author
24 September 2014 at 13:20

Hello again,

Here is the blog I'm working on: http://thesuckerforfashion.blogspot.dk/

I've customized the CSS a bit to make it look the way I want it.

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { height: 190px; margin: 0; overflow: hidden; position: relative; width: 33%; }
.PopularPosts .item-title { position: relative; width: 33%; }
.PopularPosts img { display: block; height: auto; position: absolute; width: 300px; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; padding: 10px 0; position: absolute; text-align: center; top: 95px; width: 33%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2); }
.item-content { position: relative; width: 100%; }

Now all I need to do is display the thumbnails along with their titles and descriptions NEXT to each other!
I've tried adding float and what not but nothing seems to work. Can you please help me out here?


Roy Author
3 October 2014 at 23:55

thanx this is very helpfull for me..

銀行攻略 Author
15 October 2014 at 11:54

hi i have a question
do we have any way to show more than 10?~^^

Unknown Author
19 October 2014 at 06:19

Nothing is change when i add widgets please help me

Unknown Author
28 November 2014 at 13:56

Is there a way to show the full image, just resized? For some reason it cuts off half my images :(

Unknown Author
24 February 2015 at 02:23

thanks for sharing :)

Rahul Yadav Author
17 April 2015 at 20:18

Thanks for this tip!! love learning more about blogger!
Take look at Blogger Tips and Tricks

26 July 2015 at 03:59

Hi, I love the look of this gadget, but it looks like a mess on my blog! Can you see what I did wrong?


Sam Hasbar Author
24 August 2015 at 15:04

Nice tutorial and thanks for sharing. :)

Unknown Author
20 October 2015 at 17:16

Thank you so much. I added it on my blog


9 December 2015 at 21:53

i find for popular post code in blogger so i can put it anywhere, maybe you have a solution.. :|

31 December 2015 at 01:59

The post snippet does not show properly over the image. How do I adjust that?

Arti Honrao

Owen paijo Author
10 February 2016 at 15:28

There are many popular posts widget, and one of them is like in this article. thanks for share.

22 February 2016 at 21:23

Very helpful posts..

7 July 2016 at 22:38

Very nice Blogger Temple. It is SEO friendly and Mobile friendly. Your website contains best Blogger templates, Blogger widgets and Blogger Guide

23 July 2016 at 20:46

wawww.. i must try this on my blog now.. thnks admin

26 January 2017 at 05:30

thank you for sharing brother, goodjob

17 November 2017 at 09:48

Snippets has already checked, but the not showing on popular post. how to fix this?

MM Nauman Author
17 November 2017 at 13:59

@Anto Ramana - excelive First You See In you template whether there is predefined styles for popular posts widget if you have then delete it. Then you add this widget by following the tutorial. If you are not familiar with blogger coding then we will help you.

Ehasan Sabri Author
22 January 2018 at 21:03

I am your fan sir

31 January 2018 at 16:34

thank you for sharing brother, goodjob

obat bius Author
31 January 2018 at 16:36

nice post

Cara Manual Author
16 February 2018 at 19:01

Nice widget popular post...

Anonymous Author
10 June 2018 at 19:36

You share nice tutorial related blog, which give me some good ideas in creating my own blog, For more detail you can
Visit our site here


Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Elegant Popular Posts Widget for Blogger Tweak |