Easy Post Summaries And Thumbnails For Blogger Blogs – No JavaScript Required

In our today’s tutorial we shall be discussing the process of integrating post summaries and thumbnails for blogs based on Blogger platform without  making use of JavaScript. By following three steps you succeed your mission. So without wasting more time in developing foreword for this tutorial let me start explaining these three steps:

Step 1: Taking back up of your Template:

This is one of the most important step which should be followed before making any kind of corrections in customized settings of your blog. This is helpful in locating your actual post, if anything happens wrong while making corrections in your blog.

For taking back up of your blogger template click on Design widget and select Edit HTML option of your blogger dashboard and click on Download Full Template link located at the top of the page. This will enable you to save XML file on hard drive of your system. This XML file includes all HTML and widget templates that are used for displaying design of your existing blogger.  To save these changes I suggest you to save it location which you can easily remember   and also note the file name which you can use in future for restoring your existing template.

Step 2: Add the code to display summaries and thumbnails on non-item pages:

The second step of this operation is to integrate a blogger code which displays summary and thumbnail of your posts. For this go to Design widget and select Edit HTML and click on Expand Widget Templates box and look for the code mentioned below:

                                                   <data:post.body />

 Now replace this line with the code mentioned below:


Click on preview option to see changes made in your template.

You will find that the thumbnail appears above the summary. However you can assign thumbnail in more unified way according to your requirement either left or right of the summary by integrating CSS to your template.

The second step of your mission enables you to save the changes made in your template or integrate CSS and preview the changes before finalizing the changes made in your site.

Step 3: Integrating CSS style for aligning image of thumbnail:

Move on Design widget and click on Edit HTML section and look for line mentioned below:


Just above this line paste CSS statement given below:


This will place the thumbnail at the left side of the post summary. Now make some gap between the thumbnail and text as shown below:


If you want that your thumbnail image should appear on the right side of your blog then paste the code mentioned below:


Now have a look of your template by clicking on preview option to see how it appears on the home page of your post. If you are satisfied with its appearance click on save template option. 

How this customization shows thumbnails and Summaries:

Although theoretical it seems an easy process to carry on this operation but still it suffers from various critical conditions. Specifically while making use of code which assure appearance of summaries and thumbnails according to your requirement.

  • The code checks that whether the page is viewed as an item page or not. If it is not an item page, the summary/thumbnail code will be activated.
  • In the second step code checks whether the snippet of post is available or not. If there is snippet the code will check whether there is thumbnail or not, if there is thumbnail it will be displayed with snippet being displayed below it. In case there is not thumbnail the snippet will be shown.

But if even snippet is not available than your text will be displayed in default format. This confirms that content is supported by displaying images in their normal size.

  • Thirdly, the code checks that post contains <!-- more --> tag or does not contain this tag. If it does not find any tag like that, than a Read More link is displayed below snippet. This ensures visitors that they can click on the post page to read it. 

Hope you would have understood this complicated explanation and find the above tutorial to meet your requirements of displaying summaries and thumbnails according to your requirement.


1 comment:

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.


My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check