How To Customize Popular Post Widget In Blogger

Advertisements
Do you want to alter your Blogger’s Popular Posts Widget to make it more prominent and attractive for your visitors? Having a Popular Posts Widget in the sidebar has numberless advantages. It helps new visitors to pick those articles that are most trending on a website. However, Blogger’s Built-in Popular posts widget is not that much attention-grabbing in terms of designing and displaying. Therefore, if you wish to transform your Popular Posts widget into a masterpiece then, you have to rely on CSS Style sheets. After lots of request from our loyal readers, finally we have decided to share our custom popular post design that we are using on this MBL Blog. In today’s article, we will reveal its CSS Style sheet.

Adding Popular Post Widget To Your Blogger Blog:

The Steps are extremely straightforward so you can easily customize your widget without facing any problem what so every. Just follow the following instructions. 
  • Go To Blogger >> Your Blog >> Layout.
  • Add a Gadget >> Now within the list of widget look for “Popular Posts” and select it.
  • Now match the settings which are shown in the screenshot below.
  • Select “Last 7 Days” (Weekly).
  • Make sure you check the “Image Thumbnail” and “Snippet” because we need to display Small images along the trendy article, this will add more spice to your site. 
  • You can display up to 10 trendy articles, but we would recommend you to select 7 from the Drop down list.
  • Now go ahead and Save the widget and that’s it we have successfully integrated a Popular Post widget.

Customizing and Stylizing Blogger Popular Post Widget:

  • Once again go to Blogger >> Template >> (Create a backup in case anything went wrong). 
  • Select Edit HTML >> Proceed.
  • Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding.
/*--- MyBloggerLab --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

All Done: Finally, Press the Save Template button and you have successfully customized your y post widget. Now visit your site and enjoy the picture perfect results.

From the Editor’s Desk:

We are pretty sure, that after customizing this widget, you will surly see a fascinating change in your traffic because your new readers will fancy their chances by viewing one of your trendy articles. Moreover, it will also play foremost role in reducing your bounce rate. We are receiving bulks of request from our readers who are asking us to share our custom MBL Theme. However, we have no plans at the moment to share it because it has become the trademark of this blog. We are planning to have a giveaway our First Anniversary you never know we might roll out our Template. Take a lot care of your love ones till then peace, blessings, and happy styling. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

34 comments

October 15, 2012 at 12:18 PM

Thanks for this tutorial. Applied it on my blog :)

October 15, 2012 at 12:19 PM

Though I was know to this still thanks for sharing this post to others. :)

Editorial Team MOD
October 15, 2012 at 12:33 PM

OH! That's Quite Great Buddy! Peace

Editorial Team MOD
October 15, 2012 at 12:35 PM

Yes, I Agree with you this Technique is bit old but since we want to be a great Blogger resource so we are covering everything that comes into our way. We are really thankful to you for following us.. It Really Give us a huge boost. Peace

October 15, 2012 at 1:31 PM

That is awesome for me! Great Work Bro! :)
Keep it UP!

October 15, 2012 at 1:48 PM

applied successfully! But how to edit the Post title in this widget?
Thankyou for the post brother:)

Editorial Team MOD
October 15, 2012 at 1:55 PM

Actually, We cannot change the Post Tiles Manually Because this widget catches the Titles from your Articles. So, if you wish to change the Titles then you have to edit the titles of your posts. Thanks for Liking and commenting. Peace

October 15, 2012 at 4:52 PM

Thankyou Brother :D
Pc Genie Land

October 15, 2012 at 7:07 PM

Nyc but I think you can do more with this widget :) ¦ one question can you make a post on that widget which show author, label and comments just asking ?

Tricksandteach.com

October 15, 2012 at 7:10 PM

Can we only apply this to weekly popular posts or all time popular post

Editorial Team MOD
October 16, 2012 at 1:08 AM

Yep, surly you can customize it according to you needs. We will surly share that author label and Commenting widget. Just Wait and Stay tuned.

Editorial Team MOD
October 16, 2012 at 1:08 AM

You can Apply it each and everything From Weekly to All time Popular. Thanks

October 16, 2012 at 1:18 AM

thnx for your fast reply :D

Tricksandteach.com

Editorial Team MOD
October 16, 2012 at 1:20 AM

No Problem, We are there to Help. Peace

October 16, 2012 at 2:29 AM
October 18, 2012 at 5:07 PM

Hey,

Buddy Faizan, you rocked in this post :-)

Hoping for such great tricks :-)

Editorial Team MOD
October 18, 2012 at 9:17 PM

Thanks Bro, Your Views Made my day. Really Thanks for the appreciation and Lots of More Such Tips are Coming Very Shortly. Peace

October 22, 2012 at 11:10 PM

Salaam how can I just only show only titles not content?

November 3, 2012 at 3:03 PM

This was an awesome tutorial and worked nicely. I only have one question, how do I change the color of the double arrow (blue) to white?

Editorial Team MOD
November 3, 2012 at 3:06 PM

Thanks For Liking Our Efforts! Appreciate that. But that Blue Arrow is created through Image i.e.

http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif

Therefore, You can Replace it with other Bullet according to your desire need. Peace and Blessings

November 3, 2012 at 3:18 PM

Ah. Ok. Could I remove it entirely? Also, could you take a look at my blog, the circles are not completely fill and I'm not sure where to edit. www.onfourthstreet.com.

You guys are awesome. Thanks for your help.

Editorial Team MOD
November 4, 2012 at 12:05 AM

Yes, You can Remove it With Ease... Within Your Template Search and Remove the Following Image URL.

http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif

Well The Circles are not completely filled because it re-size the image. It is essential that the width of the real image must be more then 400px .

Thanks For Kind Reviews. Peace

November 4, 2012 at 1:44 AM

awesome..
it's look so smart.
tQ so much!!

November 4, 2012 at 8:10 AM

Syed, thank you again for your reply. This is the best blogger tutorial I've experienced. I checked my real image width and they are 600px. Is there anyway in your coding that I could decrease the size of the circle?

Thanks!

Editorial Team MOD
November 4, 2012 at 9:06 AM

Thanks Those Words are Gold for us. Well Actually we have used CSS3 to create Those Circle Thumbnails. Our Best Developers are Working on it and in coming up days we will release an improve version of it.

Just Stay Tuned. If you want to Get Quality Blogger Tutorial Straight into your inbox then you can subscribe to our Feed.

http://feedburner.google.com/fb/a/mailverify?uri=mybloggerlab

Have a Nice Day. Blessings!

November 4, 2012 at 9:22 AM

I will! Thanks again.

Editorial Team MOD
November 4, 2012 at 11:24 AM

Well! Thanks for waiting and leaving your precious comment,

November 17, 2012 at 2:56 AM

Bro!! Thank for your tutorial.You made my day.How can i make post title bold?
Pls reply.

Editorial Team MOD
November 17, 2012 at 7:35 AM

Thanks For Liking the Tutorial. Well, Different Blogs have Different Post Style. Please Provide your Blog URL so we can provide few quick tips. Peace.

November 19, 2012 at 7:15 PM

nice article...thanks for adding to my knowledge...will try it soon on The Geek Solutions

November 25, 2012 at 9:45 AM

i like it faizan bhai

January 29, 2013 at 11:26 AM

Nice one...

April 2, 2013 at 1:20 AM

Hi,

Do you know any easy method of hiding a specific post from the popular posts widget?

The reason I ask for this is that I made a april fool's blogpost that went somewhat viral in my audience. I do not want to delete the post, but I would not like it to appear on my most popular posts widget either - old joke is an old joke :-)

January 13, 2014 at 6:31 AM

Nice one

here is vidoe you can easy understand
https://www.youtube.com/watch?v=yvTyUlrurs0

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.