How To Show Post Excerpt on Blogger Homepage

Published by PT on

As we all know blogger lack some of the things we might need to implement on our blog, as a beginner when you start new with blogger you will see some of the things you need to do for your blogger blog to be well optimize for search engine and for site visitors, just as how to show post excerpt on blogger homepage.

showing post excerpt on blogger homepage

If you search or you entered other blog you will see that they are showing posts summary on their homepage

When you turn to your blog you see all the posts just open on your home page,which if visitors want to navigate on your blog it will be difficult, and what they will just do is to leave your website.

And that causes more bounce rate which affects your site seo (search engine optimization).

You can also read

How to Create HTML Sitemap Page for Blogger

So reading this post how to show post excerpt on blogger homepage

you will be able to show post excerpt with thumbnail on your blogspot blog.

But not only that, it will also going to reduce bounce rate and improve your website homepage readability.

HOW TO SHOW POST EXCERPT ON BLOGGER HOMEPAGE

Login to your blogger account

Login-to-blogger

Now go to your blog dashboard and choose template or theme

Choose blogger theme

and you will see the edit html

That is where you are going to enter for you to search and put the code provided for you below, to make your website more user friendly.

And you should also know that a user friendly blog is a friend to Google also.

Don’t forget to backup your template because if any things goes wrong you can install it back.

Now search for this

<data:post.body/>

Note: To make the search easy, simultaneously press the ctrl + f to bring out a search box below your browser or you can go to the top of your browser and choose ‘option’ you will see ‘find’ enter the code above and pressĀ  ‘find’.

When you have seen the code replace it with this

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 
<div>
 
<b:if cond='data:post.thumbnailUrl'>
 
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
 
</b:if>
 
<data:post.snippet/>
 
</div>
 
<div class='jump-link'>
 
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 
</div>
 
<b:else/>
 
<data:post.body/>
 
</b:if>
 
<b:else/>
 
<data:post.body/>
 
</b:if>

Now press the save button above your template or you can follow the image below.

After saving your template that’s all and you can now visit your blogger homepage and you will see how your posts now look like with summary and thumbnail.

You can change which side the thumbnail will appear if you want either right or left.

If you want to do so you can follow these steps below

showing posts excerpt with thumbnail on blogger homepage

If you want your thumbnail to appear on the left search for this code

]]></b:skin>

If you have seen the code, paste the below code above it

.post-thumbnail{float:left;margin-right:20px}

And if you want your thumbnail to appear on the right side, you can change the word ‘left’ to the word ‘right’ in the code.

Or if you get confuse you can use this code below for your thumbnail to appear on the right.

.post-thumbnail{float:right;margin-left:20px}

You are done and you can save your template.

Hope this tutorial on how to show post excerpt with thumbnail on blogger homepage is easy for you.

If you find any problem you can ask through comment box and if this post has helped you, you can share and follow this website through feed.

Categories: Blogger

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *