Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To use Automatic Read More Jump Break With Thumbnail On Blogger

The steps involve in adding a automatic jump break to your Blog post is simple if you follow the instruction carefully, jump break makes your blog look neater and make ease for reader to read summery of your post, the posts will be displayed with just a short summery on the home page and a link to read the full post will be below. the advantages of break jump was that, it will reduce the content on your blog and speed up your browser to load your blog much faster, Also applying jump break to your blog, allow visitors to click on your summary before having access to the full post, it increases page views.



Update 06/12/2012
If you have been using this hack before, you may observe that it has stop working. Please find http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js and replace it with http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js
We are sorry for any inconvenience this may have caused you.

> Your posts will automatically be displayed as short summary's with a read more link.
> An image from the post will be re sized into a thumbnail and displayed beside the summery.
> You can choose how much text is displayed in the summery.
> The Read more will also apply to all your previous post
> Your thumbnail size can also be adjust to your preferred size.

To get this apply to your site, follow the few steps below;

> Login to your blogger dashboard
> Click Design
> Click on Edit Html (Remember to back up your template)
> Tick/Mark "Expand Widget Templates"
> Press ctrl F on your keyboard, the find </head>
> Copy and paste the code below, 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://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

> Find this next code again <data:post.body/>
> Replace it with the code highlighted in yellow 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>


Note: <data:post.body/> must be cancel before you replace it with the code above, and the highlighted "Read more" above can be change to your own text.

> Save your Template
Then you are done, if your post contain an image, it will be automatically use as your thumbnail.

Please feel free to use the comment box if any problem persist, and use the share button below too.
Thanks.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

11 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This comment has been removed by the author.

    ReplyDelete
  2. Cool!!It is helpfull for all bloggers...
    Also see my blog - www.goldentechsforu.blogspot.com
    in 1 month it got 8k+ views so if u want a hyperlink trade with us kindly email me at my fb acc - www.facebook.com/rlomniverse

    ReplyDelete
  3. every your trick always solve my problem,

    thank you very-very much

    ReplyDelete
    Replies
    1. Hi Doni
      Glad that it help, and thank you for lighting up the spirit :)

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi bro, pls i tried to apply this tutorial but its not working.. Again, i noticed that my template has two occurrences of "data:post.body/" tag. sorry i had to remove the <> tags cos ur comment box wasnt acceptin it. so am i using the first occurrence or the second one?

    ReplyDelete
    Replies
    1. The code suppose to work if you replace the first occurence with it, but try other occurence and make sure you replace http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js

      WITH
      http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I search my html and it said there were no results for "/head" (with the < and >), i've tried to follow other tutorials also and this is the problem I get each time, any ideas?

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger