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

Auto 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=’http://www.tipsviablogging.com/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. 🙂

Umesh Tarsariya

Hi their, I am Umesh Tasariya. I am author and founder of Tips Via Blogging. I have completed M.B.A with Marketing and currently acting as an experienced digital marketer. I am passionate about blogging and on the way to make it full time profession.

3 Comments

  1. It works fine… but it doesn’t work well on page, for example Disclaimer Page, it combine all words together without giving any paragraph or space..

    • Yaa you are totally right @obasuyimichael:disqus.

      However as fas as i know in your case you used Post to publish Disclaimer right?…. If you are published your disclaimer of Page not on post. it will be most suitable for your blog.

Leave a Reply

Your email address will not be published. Required fields are marked *