After so many years Blogger has finally brought advanced and modern themes, which are responsive, optimized for mobile devices and are beautiful!
The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.
For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.
Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.
The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.
For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.
Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.
Getting Started with the Tutorial
IMPORTANT - Since you will be working with template codes of your blog it is highly recommended that you take a backup of your Blog's theme before proceeding.
Follow each step carefully and in steps that deals with codes we've provided screenshots of what you should be looking for to make the process easy and fast.
Changing the Theme XML Code
The first and most important part is to change the XML code in the theme code that is responsible for showing blog posts in different styles.
- Sign-into your Blogger profile
- Select your blog from the blog list
- Go to the Theme section > click on Edit HTML button on the page
- When the theme code editor opens, put the cursor inside of it and press CTRL+F / ⌘ + F to open the in-page search box
- In the code editor you will be looking for the following block of code
<b:if cond='data:view.isSingleItem'> <b:include data='post' name='postBody'/> <b:else/> <b:include data='post' name='postBodySnippet'/> <b:include data='post' name='postJumpLink'/> </b:if>
You do not have to enter the entire block of code in the search box, use only a small part from the code block which should bring you to the same exact code in a few tries.
This is how the code that you are looking for in the theme code editor
- Once the code is visible on your theme editor, use your cursor to select from
<b:if...
part to the ending</b:if..
part,
- Upon highlighting it, delete the highlighted part.
- Copy the following code which we will be placing in the place of the previous code (that we deleted in the last step)
<b:if cond='data:view.isSingleItem'> <b:include data='post' name='postBody'/> <b:else/> <b:include data='post' name='postBody'/> </b:if>
After successfully placing the code given above, the theme code editor should look like this with the code in place :
- Now click on the "Save theme" button to save the theme.
- Visit your blog to see the changes live, you may need to clear caches if you are not able to see any changes.
If you noticed that the blog posts are not snipped now but still aren't showing as full then probably you have put a page break in your blog post, removing it should fix this, see the section "Remove Page Breaks from Post" below.
Hide the "Keep Reading" Link
The "Keep Reading" jump link might have not gone away. This following CSS code will help in hiding the link from the posts on home page.
Copy the following CSS code :
And add it to your blog. [See how to add CSS in a Blogger Blog]
.jump-link { display: none; }
And add it to your blog. [See how to add CSS in a Blogger Blog]
Remove Page Breaks from Post
In case you put page breaks in your posts the posts may not appear full. So if you want a post to be shown full instead of till the page-break part remove the page break from the post.
- Sign in to Blogger.
- Click the post in the post editor.
- In the composer box, place your cursor after the page-break element (it is a grey horizontal line with dashes)
- Hit backspace to remove it.
- Save the post.
What about other themes like Soho, Emporio and Notable
We're glad you asked this - the same code doesn't exist in other themes so this tutorial isn't applicable for other new themes. Following are the tutorials for other new Blogger themes to do the same on it.