theTechCanvas: Blogger Skins

Now you can change the look of your Popular Posts Widget of your blogger blog to make it more stylish and attractive for your readers. You should use a Popular Posts Widget in the sidebar of your blog as there are so many advantages. And this widgets enables your visitors to read and learn those popular articles that are most trending on a blog or website. As Built-in Popular posts widget in blogger is not that much attractive and attention-grabbing in terms of designing and displaying of popular posts. So if you are interested and you wish to change your Popular Posts widget into a stylish widget then, you have to work on CSS Style sheets.Don't worry I will explain you the simple steps to do this. Most bloggers ask to change their popular posts widget so I am sharing the customization of this built-in widget. In this article, we will learn how to customize Popular Posts Widget to make it more attractive and stylish.

How to add Popular Post Widgets in blogger?

If you have not used Popular Posts Widget before, So have a look to add this by default widget.Otherwise leave this step.
Before customize Popular Posts Widget you have to add your default Widget that is buit-in widget of your blogger template. So explaining you the simple steps to add this widget.

Go to Blogger account >> Select your blog >> Layout
Click on "Add Gadget" in the column you wish to use this widget
Select Popular Widget

Now you have installed a buit-in widget and next step is to customize this buit-in widget and make it more attractive for your readers.

We have successfully integrated a Popular Post widget on your blog

In built-in widget you can display up to 10 popular articles, but what I would recommend you, is to select only 7 as shown in this image

Now check the “Snippet” (optional) and “Image Thumbnail” because we are going to display images along the popular or trendy article, this will be more stylish and gonna make it more spice to your site.

Customize the Popular Post Widget

Now you have already added a popular post widget and you wish to make it more spicy and attractive, then just follow these simple steps.

go to Blogger >> Template
Now Select Edit HTML >> and then Proceed.

Now click on show widgets within your Template and Search for " ]]></b:skin> " you can use (CTRL+F ) to search this and just above it paste the following CSS Code shown below.

/*--- theTechCanvas --- */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyaJ4_h4RBCBCdzH9ev0crh-pYhmXynxFmiB87EI-HQ29LPmQgoVku3fHA_qSJPeplZ4ndnfydmBsKNibT640sdj4AQbP5I35jvJwzomYVxq-HflbPLulgYiGfS0xHoT6cCu5BFdswz0/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); }

Save the template and You have successfully customized your Popular Post Widget. Now see the changes in your blogger. Its more stylish and your trendy posts are appearing very attractive.

This will surely be liked by your visitors and definitely it will increase the number of your readers .
Enjoy your blogging with this customization and subscribe us to get our posts through your email.