If you are looking to show short post summaries with a “Read More” link on Blogger posts 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 connecting to the full post. Some bloggers don’t like the idea of having their entire post displayed on the homepage, especially if you write longer posts so the using post excerpts is a great way to shorten things up. Having post excerpts as opposed to full posts gives your blog a very clean and organized look and also makes it easier to display your content in a manner that is eye catching to your readers. Additionally, the shorter post previews allow you to show more posts on your homepage which gives your readers more options to engage with your site.
There are a few 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.
adding post excerpts and the “Read More” link 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 truly easy it is to add!
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
}
Be sure to save your edits.After you get that code added your “Read More” links should now have a bit of style. I would love to see if you get post excerpts added to your site be sure to leave a comment so I can check out your blog!
Leave a Reply