New Customized Popular Posts Widget For Blogger

Recently I have posted an article on How to add a popular posts widget to your Blogger/BlogSpot blog. And the widget is being provided in three variations viz;

• Post Title (**comments)
• Post Title (**)
• Post Title

where ** corresponds to number of comments. You can use any one of those styles.
But if you want to further modify the looks of the widget, something like the one shown below, then you have to modify the previous codes, as described below:

Here's the code for the above widget:

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0EdG7XnqS5Z0Ym1f-OHV1OP_vV17ep3uP12fxEkCrR2fzrKMuVKpyrLAR1kpnE_IQRwv5JWvKmYLqiCGl1lKaPCyoR3EIrOxP5o_L26JrSejwOMtz2eMWaISKbHZWL2cEdQXjrbzFqJM/s1600/Yelo_Blk_Back2.jpg) no-repeat;">

PASTE POPULAR POSTS WIDGET CODE HERE

</div>

And other than that background you can use some small images too...

Code:

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2NNcwezCbEsP3Y6IZLDRYIWWOCToYlTKJK-8ozfghQPCBnz0vOsY91bo-TfK_WebrJ9h8VqpFZX6ezbLWjR5b31Zn6ye8xNPRXA_DxOUtnrqrgEUAIGIkmM58By2vCat2C0zRYHdqTM/s1600/asd.png) repeat;">

PASTE POPULAR POSTS WIDGET CODE HERE

</div>

Or something like this:

Code:

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ8sJpZCWocUB21l2hQdCcQHrnGQxJGKCekYkr94BdFhqoxSiZRIbmGdMs4JD2tLJYw2rZ64dlZfr_2ln1SAR-rPwHGP_g4RwOb4e4pPxe8L9g98zIQ4akGlENdPrngDqcIQLWytY00AU/s1600/chaosback.gif) repeat;">

PASTE POPULAR POSTS WIDGET CODE HERE

</div>

For more background images, you can visit this post [70+ Background images for blogs], or you can manually search from Google Image search etc.

NOTE: Use repeat for smaller images and no-repeat for larger images !