How to Set Automatic “Read More” Link on Home Page.

[dropcap]A[/dropcap]uto jump break a  great feature that every one should have to use. While formatting blogger post, many bloggers are habitual to add “read more” tag after first paragraph. But if you want to add automated “read more” tag than you just need to add following code in your blogger template.  This will also going to reduce your blogger blog load time as it will reduce the content on the home page.

If you are seriously bother about your blogging career than I will advice you to start your focus on Search engine optimization. Loading speed of the website is a part of on page optimization.

Auto Jump Break For Blogger

Step 1: Backup your template: (How to backup your blogger template ?)

Step 2: Go to Blogger > Template > Edit HTML

Step 3: Find </head> by pressing (Ctrl + f )

Step 4: Copy following code and past it above or below the code.

<script type=”text/javascript”>
var thumbnail_mode = “no-float” ;
summary_noimg = 440;
summary_img = 350;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script src=”http://tips-via-blogging.googlecode.com/files/auto_jumpbreack_readmore_blogger.js” type=”text/javascript”>
</script>

Note : Customize your given code as per your requirement that matches with blogger design.
summary_ noimg= 440; –> The length of the post (if the post does not have a any image).
summary_img = 350; –> The length of the post (if there is an image in the post).
null_thumb_height = 150; –> The height of the image.
null_thumb_width = 150; –> The width of the image.

Step 5: Find <data:post.body/> by pressing (Ctrl + f ).

Step 6: Replace this code with Below mentioned code.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<data:post.body/>
<b:else/>
<div expr:id=’&quot;summary&quot; + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style=’clear: both;’/>
<span class=’rmlink’ style=’font-weight:bold;padding:5px;float:right;text-align:right;’><a expr:href=’data:post.url’ ><img src=’https://www.heerentanna.com/blog/wp-content/uploads/2015/09/cooltext686292215.png‘ style=’border: 0 none;vertical-align: middle;’/>
</a></span>
</b:if>
</b:if>

Note : Replace green highlighted link with your own read more image.

Step 7: Save and View your blog. 🙂

Conclusion:

There are many free templates available on internet for a blogger blog in which you will find pre-install auto jump break. You need this tutorial when you don’t want to change your feel and look of your blogspot site. I hope this will be proved to be helpful to you. 🙂

How To Add Adsense After Jump Break In Every Blogger Post.