Auto Read More With Thumbnail For Blogspot Blogs | Blogtrovert

Auto Read More With Thumbnail For Blogspot Blogs

September 20, 2016Onome

Read more for blogger

Normally, A read more button becomes visible in your blog’s homepage when you add a jump break to your posts.

When posting an article from your blogger admin panel, you have the option of adding jumpbreak any where you want by just clicking the jumpbreak button but when using an application, you have to manually add the <!–more–> functionality to your post’s html

Most times we get too Lazy to click on the jumpbreak button or add the <!–more–> functionality and for that reason, we need an automated helper.

This auto read more functionality is highly customizable to your taste and you don’t have to be left hanging out with a boring read more button because you are going to have absolute control over whatever phrase or word you wish to use directly from your blogger admin panel.

Now to begin adding auto read more functionality to your, back up your template.

You should always backup your blog template before tweaking… you might want to revert back to the old looks.

From your Blogger dashboard, go to Template and click on the Edit HTML button and search for </head>.

Just above </head>, paste the code below

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 400;
<script type='text/javascript'>
function removeHtmlTagundefinedstrx,chop){
  var s = strx.splitundefined"<");
  forundefinedvar i=0;i<s.length;i  ){
    s[i] = s[i].substringundefineds[i].indexOfundefined">") 1,s[i].length);
  strx =  s.joinundefined"");
 chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
 whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop  ;
 strx = strx.substringundefined0,chop-1);
 return strx '...';
function createSummaryAndThumbundefinedpID){
 var div = document.getElementByIdundefinedpID);
 1var imgtag = "";
 var img = div.getElementsByTagNameundefined"img");
 var summ = summary_noimg;
        ifundefinedthumbnail_mode == "yes") {
 ifundefinedimg.length>=1) {
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
  summ = summary_img;
 var summary = imgtag   '<div>'   removeHtmlTagundefineddiv.innerHTML,summ)   '</div>';
 div.innerHTML = summary;
once you’ve pasted the code above, search for <data:post.body/>

READ:  Web hosting for your Blog

If you are using the default blogger template, you will find the code above twice but there may be more.

This is what the second occurrence looks like.

<div style=’clear: both;’/> <!– clear for photos floats –>
<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a>

So, you are to replace the <data:post.body/> in that code with the code below…

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot;'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumbundefined&quot;summary<>&quot;);
<a class='more' expr:href='data:post.url'><b><div class='jump-link'><data:post.jumpText/></div></b></a>
<!-- Auto read more End -->

After you’ve successfully replaced the code, you can delete

<b:if cond=’data:post.hasJumpLink’> <div class=’jump-link’> <a expr:href=’data:post.url &quot;#more&quot;’ expr:title=’data:post.title’><data:post.jumpText/></a> </div> </b:if>

Did you enjoy this article?

Don't miss out on our new content. Sign Up!

Prev Post

Customize Blogger Cookies Notification Bar

September 19, 2016

Next Post

Add Related Posts Widget To Blogger

September 21, 2016

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from us

You have Successfully Subscribed!