How to Add Automatic Read More Tricks for Blogger Blogs

Read a lot of button or jump link is employed cut the complete article into 2 items and initial piece of Text and pictures show within the Homepage. once you produce a post is also it includes long snippets and pictures that area unit too long, then what do you have to do? you\'ve got to feature  or click on Jump link to separate. Here i\'m aiming to show you the way to mechanically place browse a lot of to Blogger posts. during this Automatic browse a lot of hack everything is automatic and you would like not trouble regarding the too long length of posts.Let us see the way to have it away..

  Features are
You can also limit the length of post
Set the size of Image, height and width separately
Disable Image
Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find </head>
copy the following code above it

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;  /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>

 If you add CSS codes to style jump link in your blog, then See the Update.
Then Find (Ctrl+F)  <data:post.body/> and replace it with the following code.
If you find more than one <data:post.body/> replace all occurrences.

<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' >Read more...</a></span><a href="http://trickydunia.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ca9yMGGKUUcs_jxt3Eu-asvj4TnJv5ZlIfdHXXAN3sfg-sWcP0gtgRDdOR3gE28ngv03003ogDQeywNOWHp63FvLbZWgYd5_kk-EdUW-OF4UhxRgRqyzxDpSyqdYJJaRI1KrT8yRE8g/s1600/1x1juice.png"></a>
</b:if>
</b:if>

 In the above code, only a simple link to the post shows in the homepage. If you want to style that link or did you add css codes to style the jumplink, then add the following code instead of the above.
Then Find (Ctrl+F)  <data:post.body/> and replace it with the following code
If you find more than one <data:post.body/> replace all occurrences.

<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;'/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title' >Read more...</a></div><a href="http://netoopsblog.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ca9yMGGKUUcs_jxt3Eu-asvj4TnJv5ZlIfdHXXAN3sfg-sWcP0gtgRDdOR3gE28ngv03003ogDQeywNOWHp63FvLbZWgYd5_kk-EdUW-OF4UhxRgRqyzxDpSyqdYJJaRI1KrT8yRE8g/s1600/1x1juice.png"></a>
</b:if>
</b:if>

Tweet