How To Add The "Read More" Expandable Post Link

At last I have learned how to add the Read More expandable post link. I really envied blogs that have expandable post links because it makes the page load quicker. The longer the post the longer it takes to load. Also it looks neater compared to showing the whole post in one glance. In this post I will share what I have recently learned after trying to do so in a lot of ways (I don't know what took me so long). Anyway, the easiest step to add the "Read More" expandable post link into your post is to insert a jump break. In the new blogger editor the jump break can found on the top of the post box or the text box.




The idea of using the jump break is to add a read more link on your post manually. You can add it anywhere in the post body. The part of the post that comes after the jump break will not be part of the summary post or the teaser.


Another way of adding the read more link in your post is through messing with the template or rather editing some settings and the html. The steps are as follows:


STEP 1: EDITING THE TEMPLATE. First you should navigate to the Edit HTML by clicking the Design link and the Edit HTML link. 

Note: As what I always remind to my readers, always save your template before applying changes to it. This is important especially to those who no yet used to editing the template. Heck even pros commit mistakes but it really pays to be on the safe side.

STEP 2: LOCATE TAGS/CODES. Before actually locating the tags you must first enable the Expand Widget Template on the upper right part of the html body. First you must locate <data:post.body/>. It's easier to locate it using the browser's find tool (Ctrl+f). When you have located it the next thing is to add these codes before it. 


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Also you need to add the following codes after the <data:post.body/> and then save it.


<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>


STEP 3: FORMATTING. The next thing after saving the template is to navigate to settings and then formatting. Go to the bottom the page and then insert the following codes in the format post box and then save the changes. 


<span class="fullpost">

</span>


Basically you have already done it. The next thing to do is to try creating a new post. Upon creating the new post should be in Edit HTML to be able to see the codes. The span class full post should contain the continuation of the post or the whole of it. Meaning all the things that you will input before and outside the span are the ones that will be shown on the summary. Thank you for reading. Happy blogging.