Search

Popular Product/Posts Blogger Large Image Style Tutorial

irsah imihar08 May

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.

Blogger popular posts widget or most popular product (for blogger store like BlogrShop Template) can still use the standard widget functions to display larger/bigger thumbnail images. By default, the existing Blogger popular posts widget will provide you with thumbnail images size of 72px in heigth and 72px inwidth, images cropped to the respective size too.

Sharper pix perfect popular posts thumbnail re-sizing

Using CSS to enlarge the popular post widget thumbnails will definitely distort the resolution, hence displaying blurred thumbnail images. In this tutorial, you will find some sweet tweaks, tutorials, tips and tricks on how to display your popular product page or most popular posts widget with larger image thumbnails size.

How to Enlarge Popular Post/Product Thumbnail Images.

The Additional Javascript/Jquery Helper

With a few line of codes and the help from Jquery, we can now modify almost anything possible for your Blogger pages. Assuming you are in Blogger Edit Template section (back-up template if required), include the Jquery library by copying the below code and paste it BEFORE/ABOVE the </head> like so:-

Change to your preferred setting at the statements above. > click Save Template.
Now click View Blog to preview your changes.
With the styling codes above, you can also style your Popular Post thumbnail image to be responsive and look good in any screen size, just like the demo page.

Catch our next Blogger template tutorial on how to make the standard Blogger Popular Posts widget thumbnail image responsive with simple CSS magic. Less javascript means less load time, higher rendering of your page and works best for mobile browsers with slow internet connections.

Now your blog or blog store will look good with bigger and sharper Popular Posts or product page images to enhance your page design layout and keep your visitors clicking the images too!