This post will show how how to make post thumbnail and post excerpts (summary) on homepage to give your visitors more detailed view about your post, the post excerpts here are more beautiful and well designed in CSS, and your visitors will fall in love with these compact and cool looking thumbnails + excerpts.
Adding pagebreak to every post is little difficult, everytime you have to set a page break for post to show a summary of post contents on homepage. But if you want it to be done automatically then you have to a little bit of hard work here also. As this post is going to make you play with lots of codes, so i will keep my sentences short.
There was a time when i also used the page break to only show the summary of my posts on the homepage, but as i learned more about coding and some other web languages, i was able to sort it out and make it easier to show the summary of posts on homepage without adding the page break, but i yet add page breaks because i can't figure out how to run my code on Archive pages and whenever someone access my Archive page, they see post summary that is selected by me with the pagebreak option in the Post Editor.
Adding pagebreak to every post is little difficult, everytime you have to set a page break for post to show a summary of post contents on homepage. But if you want it to be done automatically then you have to a little bit of hard work here also. As this post is going to make you play with lots of codes, so i will keep my sentences short.
There was a time when i also used the page break to only show the summary of my posts on the homepage, but as i learned more about coding and some other web languages, i was able to sort it out and make it easier to show the summary of posts on homepage without adding the page break, but i yet add page breaks because i can't figure out how to run my code on Archive pages and whenever someone access my Archive page, they see post summary that is selected by me with the pagebreak option in the Post Editor.
Let's start
*Before we start, Backup your Template, that if anything went wrong you will have the working Template in your Desktop
*I have only used steps that can be used in New Blogger Interface, so please switch to New Blogger Interface if you don't want to get confused.
This is only the start, I will show you what and where the codes you have to put. We will first start with the HTML that will be used to display post summary. Remember, if you have already messed up your code without even knowing what you doing then this might not work for you. So only use this tutorial if you have a clean template that's never been tampered.
Go to your Blogger Dashboard > Template tab > Edit HTML > Proceed >
Now check mark on Expand Widgets Template.Now find press CTRL+F to open a browser inbuilt search bar and search for this line
<data:post.body/>
Now replace the above code with this code
<b:if cond='data:blog.pageType != "index"'>
<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:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Now save your template and check your Homepage once, if you have some post showing on your homepage, then it will display the excerpts and the thumbnail, but there might also be some post which will not show thumbnail, because pictures smaller than 300*300 dimension don't display with this code.
Adding CSS to style the thumbnail
We will have to style it with CSS to make it look more like mine on my blog's homepage.By adding the HTML code, we can only achieve to show thumbnail and post summary, now we will do more with it. We will add styles to make it look more professional.
Add this CSS to your Template - Go to Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the input area paste this CSS and hit Apply to blog.
Add this CSS to your Template - Go to Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the input area paste this CSS and hit Apply to blog.
.Image
{
background: none repeat scroll 0 0 white;
border: 1px solid #CCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
padding: 0px 0px 0px 0px;
float: right;
margin-left: 20px;
height: 72px !important;
-webkit-transition: background 1s;
}
.Image
{
width: auto 9;
max-width: 100%;
height: auto;
}
Even now if you think it's not looking well, then you might check this post about how to remove existing shadow from pictures in BloggerNow refresh your blog homepage again to check if it's working or not. Check the below section if you want to do more with the thumbnail.
Link the thumbnail to the post
I have myself not used it but some people asked me how to do it and i asked them to wait for a post about it, so here it is. General Blogger users don't know about many of Blogger features, because it's not in GUI (graphical user interface) it's all in code and i love to work with these to experiment new things on Blogger.How to make it work ? We just need to add some HTML code in the HTML code that we used first. Check this, we have just added an Anchor tag around the img tag to make that Image thumbnail a link to it's Blog post.
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url'>
<img expr:src='data:post.thumbnailUrl'/>
</a>
</div>
</b:if>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Just add the tag and done, every thumbnail of all post will link to it's posts automatically adding this tag to the HTML.
Now Enjoy your fully customized post thumbnail and give your visitors a good and pleasant experience that they will like to visit your site again. Good design is important but content is king.
If you want more tutorials from us then you can subscribe us on Feed, follow on GoogleFriend connect etc. Check the right sidebar to subscribe to Email Newsletter.
Related Post
