Popular Product/Posts Blogger Large Image Style Tutorial

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.



Here is an example of the working larger size Popular Posts thumbnail images, that we have installed on our custom Blogger responsive templates by client's demand. You can also re-size your browser screen to see it in action.

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:-

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
</head> <!--your reference -->

If you have already added in your Jquery library, you do not have to include the above line.

Find your Popular Post Widget in Template

Search your popular post widget by hovering the drop down "Jump to Widget" Tab > select Popular Posts > Left click the small triangle for that widget to Expand > Now in between this code

<b:includable id='main'>

and this code in your Popular Posts code snippet

</b:includable>

Copy below code and paste in between the reference above:-

            <b:includable id='main'> <!--Reference -->

<!-- Start copy here by http://blog.irsah.com -->
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <script type='text/javascript'>
                //<![CDATA[
                function bp_thumbnail_resize(image_url,post_title) {
                  var image_size=320;  // Change here to image width prefered
                  var show_default_thumbnail=true;
                  var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6snmajFVArcwFf47gXFVbNc682KwLHIOQth2BD36HT0-3GqqvfT5GWWMvcqeScUThZ7CrsaCdvemhZ1DN-jJBAp_UGRUYMLHQCTW04CguhKSvkQFKnCQyDI5TXbnz5vIK3p-XlgR2uvQ/s72-c/default.png";
                  if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
                  image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
                  if(image_url!="") return image_tag; else return "";
                }
                //]]>
                </script>
                <div class='item-thumbnail'>
                  <script type='text/javascript'>
                document.write(bp_thumbnail_resize(&quot;<data:post.thumbnail/>&quot;,&quot;<data:post.title/>&quot;));
                  </script>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <script type='text/javascript'>
                //<![CDATA[
                function bp_thumbnail_resize(image_url,post_title) {
                  var image_size=380; // Change here to image width preferred
                  var show_default_thumbnail=true;
                  var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6snmajFVArcwFf47gXFVbNc682KwLHIOQth2BD36HT0-3GqqvfT5GWWMvcqeScUThZ7CrsaCdvemhZ1DN-jJBAp_UGRUYMLHQCTW04CguhKSvkQFKnCQyDI5TXbnz5vIK3p-XlgR2uvQ/s72-c/default.png";
                  if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
                  image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'"/>';
                  if(image_url!="") return image_tag; else return "";
                }
                //]]>
                </script>
                <div class='item-thumbnail'>
                  <script type='text/javascript'>
                document.write(bp_thumbnail_resize(&quot;<data:post.thumbnail/>&quot;,&quot;<data:post.title/>&quot;));
                  </script>
                </div>
              </b:if> 
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
<!-- End copy here by http://blog.irsah.com -->

</b:includable> <!--Reference -->

Change to your preferred setting at the statement above. The code provided here will output a Popular Posts widget thumbnail image with a default size of 320px in width.

Add styling to your Popular Product Page/Post Widget

After successful, go back to your </head> tag in your template (use Ctrl-F4 for template search) and paste below codes ABOVE the </head> tag:-

<style>
/* Popular Posts image resize by http://blog.irsah.com
======================================================== */
.popular-posts img {
  width: 100%;
  height: auto;
  border: none;
  outline: none;
}
.item-thumbnail {
  width: 15em; /* Width of your image frame */
  height: 15em; /* Height of img frame */
  overflow: hidden;
  border: 1px solid #ccc; /* Adds border to img frame */
  float: left; /* float the frame and image to the left */
}
</style>

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!