Skip to main content

How this customization displays summaries and thumbnails No JavaScript Required


How this customization displays summaries and thumbnails No JavaScript Required


post summary


The ability to display post summaries and automatic thumbnails is one of the most sought-after Blogger customizations. Using such a feature enables us to create a cohesive layout on non-item pages with the entire post and full-sized image on item pages.

Recent changes to Blogger's functionality now enables us to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts.

With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.


How to add Blogger post summaries and thumbnails in three simple steps

Here's my step-by-step guide to the easiest solution for post summaries and thumbnails with Blogger: 

Step 1 - Back up your template!

It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.


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


The next stage is to add the Blogger code which will display a summary and thumbnail of our posts. Go toDesign>Edit HTML and check the Expand widget templates box and search for the following line of code:


<data:post.body />

Replace this line with the following code:



 <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>


      <data:post.body/>
      </b:if>


Preview the change to your template and you'll see that your posts will appear in a format similar to this:

summary

As seen in the screenshot above, the thumbnail appears above the summary. We can align the thumbnail more cohesively to the left or right of the summary by adding CSS to our template.

At this stage, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your site.

Step 3 - Add CSS to align the thumbnail image

While still on the Design>Edit HTML section of your dashboard, search for the following line:


</b:skin>

Immediately before this line, paste the following CSS statement:


.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text like this:


summary2

If you would prefer to align your thumbnail image to the right, paste the following code instead:


.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}


Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated thumbnails!


How this customization displays summaries and thumbnails

While simple to add to our Blogger template in order for the function to work, there is a lot of complex conditional code in use to ensure the summaries display as they should.

First, the code checks if the page being viewed is an item page or not. If the page is not an item page, the summary/thumbnail code will come into effect.

The second check discovers if a post snippet is available (i.e: if the post contains some text). If there is a snippet, the code checks if a thumbnail is available and displays the thumbnail if there is, followed by the snippet. Where no thumbnail is available (when the post does not contain an image), only the snippet is displayed.

If there is no snippet available for a particular post, the complete body of text is displayed normally. This ensures that posts with no content or which feature only an image are displayed normally; no thumbnail is displayed, and any images are displayed at full size.

Finally, the code checks if the post contains the <!-- more --> tag. If it does not contain this tag, a "Read more" link will be displayed beneath the snippet, ensuring visitors can easily click through to read the post page. Where a jump-link is present, this is displayed as normal after the snippet.

Phew! It's complicated to explain, but hopefully produces a foolproof set-up in which posts will be properly formatted no matter what the conditions.





Comments

Popular posts from this blog

How To Put Adfly Full Page Script In Blogger Blog

How To Put Adfly Full Page Script In Blogger Blog Get paid to share your links! If you have a website and wish to earn money when a visitor simply enters your site, please use the following script.Adfly Full Page  If you have a website with 100's or 1000's of links you want to change over to adf.ly then please use the script below. Simply copy-and-paste the code below on to your webpage or blog and the links will be updated automatically - simple! You can add or remove any domains for the code that you use or your website. <script type="text/javascript">      var adfly_id = 4305280;      var adfly_advert = 'int';      var domains = ['depositfiles.com', 'rapidshare.com', 'vip-file.com', 'smsfiles.ru', '4files.net', 'turbobit.ru', 'uploading.com', 'letitbit.net', 'depositfiles.ru', 'sms4file.com', 'ifolder.ru', 'hotfile.c...

Make Blog Background to Matrix animation

Make Background to Matrix animation How to Change Blog Background in Blogger How to Change Blog Background Become Matrix Style. Have you watch Matrix? I think you have. Because Matrix is a big movie. Even this movie can enter into Box Office and earned $742,128,461! Amazing! So, if you like Matrix, by learn this trick, you can try to change your blog background become Matrix style. Interseted? Just follow the steps below. 1. Log in to your blogger account 2. Go to Design --> Page Elements --> Add Gadget 3. Choose "HTML/Java Script" 4. Add the code below <a href="http://dailybloggiingtips.blogspot.com/" target="_blank">Matrix</a> <style type="text/css"> <!-- body { background-color: #000; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQKrhyphenhyphenhrs4fpr5-_esUekV-sWIB9a9-zJ9lxSg0Voylft-vKpL_rrlb9b8L6ckwyFoUryku0E90d9cJybIG4-uopJW50UpEYkyWihitFItDrg...

How to Create Apple Touch Icon Of Your Website Or Blogger

How to Create Apple Touch Icon Of Your Website For Ipod Touch , Iphone And Iphone What is Apple Touch Icon  During web surfing  online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser. As more and more people browse the web with their iOS devices, adding a simple icon to your site helps with branding and looks great making sure your brand is well represented on the iPhone, iPod touch and iPad. Apple Touch Icon is basically  like a favicon of a website.  Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of t...