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

Tweets by @mrqasimashraf

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.

Enjoyed This Post? Subscribe For More Update!

Follow @mrqasimashraf