If you are looking to show short post summaries as opposed to full posts on your Blogger homepage than this tutorial will show you how to do just that! Post excerpts display as partial posts with a “read more” link to the full post. This gives your blog a very clean and organized look! Post excerpts also make it easier to display your content in a manner that is eye catching to your readers, shorter previews of posts allow you to show more posts on your homepage which gives your readers more options to engage with your site.
There are multiple ways to show post excerpts on Blogger. While there is a way to add post excerpts automatically, this tutorial will show you how to add them manually. There are advantages to both ways but I like adding them manually better for multiple reasons:
- I get to decide exactly where the content ends
- I don’t have to worry about glitches with the coding for the automatic version
- Adding them manually is nothing more than one click – so easy!
If you do want to add style to the “read more” you will need to add some code to your template otherwise it will be just text. See bottom of post if this is something you want to do.
This is a very simple and easy little trick so for those of you seeing it for the first time get ready to be amazed at how easy it is!
Easy, right?
And now that you know how to create post excerpts you can easily add the page breaks for your excerpts while you are writing your posts!
If you are happy with the “read more” design then you are all set. If you would like alter the design and are willing to get into the code of your template read below to find out how to to style the “read more” under your post excerpts on Blogger.
We now have premade Blogger templates with built in customization of the “read more” link on post excepts – you can check the Blogger templates here!
PLEASE NOTE: IF YOU PURCHASED A DESIGN FROM US THAT INCLUDED CUSTOMIZED POST EXCERPTS YOU DO NOT NEED TO ADD ANY CODE UNLESS YOU WANT TO CHANGE THE LOOK.
The code below will give you a small grey box with white font with hover effect but feel free to change to match your blog.
{Be sure to backup your template before altering any code of your blog template}
1. Go to your template page and click on
2. Look for
]]></b:skin>
Take the code below and paste it ABOVE that
.jump-link a{
color:#ffffff;
}
.jump-link{
text-align:center!important;
margin:0px auto;
width:150px;
background:#969696;
border:1px solid #000;
letter-spacing:2px;
padding:11px 0;
display:block;
text-transform:uppercase;
text-decoration:none!important;
font:10px arial,sans-serif;
position:relative;
top:10px;
transition:background-color.25s ease-out;
-o-transition:background-color .25s ease-out;
-moz-transition:background-color .25s ease-out;
-webkit-transition:background-color .25s ease-out
}
.jump-link:hover{
background:#cccccc;
}
.jump-link:hover a{
color:#000000!important
}
Leave a Reply