Saturday, August 03, 2013

Add Auto Read More With thumbnails for blogger posts fully working for almost all Templates In Blogger

Some bloggians use Jump break Option to add a read more Option. Now, we are going to apply a script to done this work Automatically. This hack will summarize content and show only summary in Home page. Using automatic read more on your blog will make your blog load faster by showing few content of post instead of the full post on the homepage.Automatic read more for blogger posts can be done by inputting some code into your blog templates.

Procedure:

Step 1. Find (CRTL + F) this code:

    </head>
Step 2.Copy and paste following code with above </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://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js' ></script>


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 summary.If the post does not have an image just a text summery will be displayed.

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

Step 3. Find the following code by using Ctrl+F  key.

<data:post.body/>

Step 4. Replace the following code with above code. 
Note: if you found three codes like above in your template replace the following code with all.

     <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>


You can change the highlighted text with Continue Reading, Read Full etc.

Step 5. Save Your template and enjoy Auto read more.
Like the Post? Please share it with your Friends.

No comments:

Post a Comment

Warning !

Search This Blog