Post Summary. Implementing “Read more…” to Your Posts on Blogger.

Implementing “Read more button” to your posts is a good method to show on your main page only the beginning of your post in order to make your readers interested. Also, it gives the opportunity to put on your main page a great number of posts without making it incredibly long and difficult to load. This will help you to put only first paragraph or as much as you wish. In blogger I haven’t found tag “more”, which I usually use in such cases, but who cares? I’ve found another way, in the end you will get the phrase “Read more” but you can easily change it to whatever you wish. Let’s get started! To have it properly do exactly what I’ll tell you and before it save your current template! As always Template–>Edit HTML and search for tag </head> and put this code directly before it:

<style>
<b:if cond=\’data:blog.pageType == \”item\”\’>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Then…
save the template.
Important! There is such tag ]]></b:skin> in your template before tag </head> You should paste that the code between them.
In that code we have verified the meaning of “fullpost” that will be shown only on your post page.

Links Read More…

The second is step is to add links Read more… after every post (or in the middle or where you want to divide your post on introduction and fullpost parts). In order to do this enter Template–>Edit HTML and tick the square “Expand Widget Templates” and find in your template such line <data:post.body/> , I sure you have. Found? Paste this code right after it:

<b:if cond=\’data:blog.pageType != \”item\”\’>
<a expr:href=\’data:post.url\’ target=\’_blank\’>Read more…</a>
</b:if>

Save the template. Now this link will appear only on the main page and will redirect reader to the page with full post text. If everything is ok, then we go to the quality of the link. It’s important for you and readers to see this link, so it should be eye catchy or at lees noticeable. So instead of the last code you can paste this one and “Read more…” will become Read more…

<b:if cond=\’data:blog.pageType != \”item\”\’>
<span style=\”font-weight:bold;\”><span style=\”font-size:120%;\”><a expr:href=\’data:post.url\’ target=\’_blank\’> <big>Read more… </big></a></span></span>
</b:if>

Save it!

And the last step is to change your post, so to say, actually to divide your post on two parts, one that you want to be shown on the main page and the second one that will be shown only after clicking on the link “Read more…”. Go to Settings–>Formatting and paste this code in “post template”:
This part will be shown on the main page<span class=\”fullpost\”>And this is the rest of the post</span>

Save the settings. Now, when you will be writing your post just write instead “This part will be shown on the main page” what you want to be shown on the main page, and instead “And this is the rest of the post” the rest of the post that will be shown on the page with the full post after clicking on “Read more”.

This trick has its advantages. Additional links will serve well in indexing the page and the full post is opening in new tab. However, this is all for blogger, wordpress users don’t need all thise efforts to do, WordPress has provided them with <!–more–> tag to create full posts and post summaries.

Thanks for the great weekend