Use Automatic Fixed Read More Jump Break With Thumbnail On Blogger

Add Auto Read More Post Summary's To Your Blog


Step 1. In your Blogger dashboard click Design > Edit Html > Tick The Expand Widget Templates Box


Step 2. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar .

</head>

  Copy the following code and paste it Directly Above / Before </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://pagination2.googlecode.com/files/auto_readmore_blogger.js' ></script>

Important


The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text summery will be displayed.


summary_ noimg= 430; --> The length of the summery if the post does not have a thumbnail.
summary_img = 340; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; --> The height in pixels of the thumbnail.
null_thumb_width = 120; --> The width in pixels of the thumbnail.


Step 3. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar .

<data:post.body/>

  Replace <data:post.body/> With The Code Below

<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>
</b:if>
</b:if>

Your Can change the text in red From Image by Adding This Code. 

<div class='separator' style='clear: both;  text-align: right; margin-right: 5px; '>
<img border='0' height='31' src='Your Image url Here' width='150'/></div>

Note - You can change the text in red from Read More to "Continue Reading", "Read Full Post" or With Images Like This. Copy This Image And upload any image hosting site and paste image url in Code Above.

Now enjoy frnds. if u face any problem then hit me a comment i'll help you as soon as possible.