Most of the bloggers, want to show more than one post in their blog's home page, but displaying all the content on the home page of each and every post makes the home page very lengthy, and visitors may miss out any article while scrolling down the entire length of the page.
So here's a method for bloggers to display only a part of the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the "Read More" link at the bottom of the post, which will be redirected to the particular post.
Steps to follow:
1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4. Now click on "Expand Widget Templates"
5. Now find this code - ]]></b:skin>
6. Just AFTER that code add these lines
8. And just after this, add these code lines:
If you want to shift the "Read More!" text to the extreme-right side, use this code:
IMPORTANT :Now these adjustments will NOT show your previous posts with "Read More" tag, but you can display them with Read More tags, by editing them with instructions as below:
From now on, whenever making a new post, the part of the post you want to HIDE on your main homepage, write those lines in between these code lines:
See the screen shot below for details:
NOTE 1: After writing new posts, always proof-read your edit HTML section, to avoid mistakes, one such mistake is discussed below:
Make sure, that "Edit HTML", while writing posts looks exactly like this:
<div style="text-align: left;">Post in brief, may include pictures too
<span class="fullpost">Hidden part</span>
</div>
In the above example notice that I have closed span, before div, that placement is very necessary, if you put like this </div> </span>, i.e. closing div first and span later this will NOT work, because span has been started inside div, so it must be closed within div tag.
In case you have multiple paragraphs, while posting a post, and you are giving same text alignment to all the paras, then by default, after every para, the div element will be closed, and again it will start for the next para, so THIS SHOULD NOT be like this, you have to start <div> in the beginning of the post, end it at the last, and make sure <span class="fullpost">Hidden part</span>, is between your div tags.
If you want your previous posts also to hide part of their text, then you must edit them and add span tags to them.
So here's a method for bloggers to display only a part of the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the "Read More" link at the bottom of the post, which will be redirected to the particular post.
Steps to follow:
1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4. Now click on "Expand Widget Templates"
5. Now find this code - ]]></b:skin>
6. Just AFTER that code add these lines
<style>7. Now again find this code : <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
8. And just after this, add these code lines:
<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More!</a>
</b:if><!--READ-MORE-STOPS-->
If you want to shift the "Read More!" text to the extreme-right side, use this code:
<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>9. Now save the template.
<a expr:href='data:post.url'><div style="text-align: right;">Read More !</div></a>
</b:if><!--READ-MORE-STOPS-->
IMPORTANT :Now these adjustments will NOT show your previous posts with "Read More" tag, but you can display them with Read More tags, by editing them with instructions as below:
From now on, whenever making a new post, the part of the post you want to HIDE on your main homepage, write those lines in between these code lines:
<span class="fullpost">WRITE THE PART OF THE POST YOU WANT TO HIDE HERE</span>
See the screen shot below for details:
NOTE 1: After writing new posts, always proof-read your edit HTML section, to avoid mistakes, one such mistake is discussed below:
Make sure, that "Edit HTML", while writing posts looks exactly like this:
<div style="text-align: left;">Post in brief, may include pictures too
<span class="fullpost">Hidden part</span>
</div>
In the above example notice that I have closed span, before div, that placement is very necessary, if you put like this </div> </span>, i.e. closing div first and span later this will NOT work, because span has been started inside div, so it must be closed within div tag.
In case you have multiple paragraphs, while posting a post, and you are giving same text alignment to all the paras, then by default, after every para, the div element will be closed, and again it will start for the next para, so THIS SHOULD NOT be like this, you have to start <div> in the beginning of the post, end it at the last, and make sure <span class="fullpost">Hidden part</span>, is between your div tags.
If you want your previous posts also to hide part of their text, then you must edit them and add span tags to them.