How to make Auto Readmore with image in blogger

Today i will post how to make Auto Readmore with image in blogger. it's make we more efficient to post something, we don't need to use Insert Jump Break when we post something. We only need to write the post and Publish (absolutely we must :D). This feature make your blog look more neatly than before. This feature is not only auto readmore, but this feature included image from post. You can change Click to readmore---> or whatever with image (i use this trick).

This is the tutorial : (remember to backup/download your template before edit)
1. Go to design --> Edit HTML
2. Check the Expand Widget Template box






3. Find this code

</head>

4. Replace it with

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 125; img_thumb_width = 150; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

After that :

1. Find This code

<data:post.body/> or <p><data:post.body/></p>

2. REPLACE it whit

<!-- Auto Read More Start-->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    <span class='rmlink' style='float:left;padding-top:20px;'>
    <a expr:href='data:post.url' expr:title='data:post.title' href='http://www.blogger.com/post-create.g?blogID=306294535298887365'><img src='http://i1049.photobucket.com/albums/s389/hazbiy97/ReadMore-1.png '/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<!-- Auto Read More End-->

3. Save your template and enjoy :D

NOTE : If you don't want to use image, you can use text like "Click to readmore". Change the red text with your text.

Hope you like it

Tittle : How to make Auto Readmore with image in blogger
Source URL : http://hazbiynews.blogspot.com/2012/04/how-to-make-auto-readmore-with-image-in.html

You can share or copy this article | How to make Auto Readmore with image in blogger | to your blog/website, but don't forget to submit the source url of How to make Auto Readmore with image in blogger

You Might Also Like: