AUTOMATIC READ MORE BUTTON/HACK FOR BLOGGER

HOW TO ADD "READ MORE BUTTON/HACK"

This is very simple.It will increase you blog views.Yes and everyone want to increase their blog views.Its 100% working code.All you have to do is just follow the steps:

STEP 1:

Log in to Blogger, Go to Layout,Go to Template,  Edit HTML.

Now find (CTRL+F) this in the template code:

</head>

And immediately ABOVE/BEFORE that, paste this code:

<script type='text/javascript'>

var thumbnail_mode = "no-float" ;

summary_noimg = 400;  /* Summary length if no image*/

summary_img = 300; /* Summary length with image*/

img_thumb_height = 200; /*Image Height*/

img_thumb_width = 200; /*Image Width*/

</script>

<script type='text/javascript' src='http://blogspot.com./readmore_counterstriq.js' ></script>

                                    OR YOU MAY ADD AFTER </head> BELOW CODE

<!-- Auto read more script Start -->

<script type='text/javascript'>

var thumbnail_mode = "yes"; //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 = 200;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

 if(strx.indexOf("<")!=-1)

 {

  var s = strx.split("<");

  for(var i=0;i<s.length;i++){

   if(s[i].indexOf(">")!=-1){

    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

   }

  }

  strx =  s.join("");

 }

 chop = (chop < strx.length-1) ? chop : strx.length-2;

 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

 strx = strx.substring(0,chop-1);

 return strx+'...';

}



function createSummaryAndThumb(pID){

 var div = document.getElementById(pID);

 var imgtag = "";

 var img = div.getElementsByTagName("img");

 var summ = summary_noimg;

        if(thumbnail_mode == "yes") {

 if(img.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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

 div.innerHTML = summary;

}

//]]>

</script>


<!-- Auto read more script End -->

You may change the numbers in blue, as per your wish. If a post doesn't have images then the length of the summary will be 500.

If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:

width= 120, and

height= 100.

STEP 2:

Now again in the template,go to search box i.e (CTRL+F),search the code given below and.

<data:post.body/>

Then REPLACE above <data:post.body/> Tag , with this code:

<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:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


                              OR YOU MAY REPLACE BELOW CODE WITH <data:post.body/>

<!-- Auto read more Start -->

<!-- http://www.BloggerSentral.com -->

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

<a class='more' expr:href='data:post.url'>Read more ...</a>

</b:if>

</b:if>


<!-- Auto read more End -->

Now save the template and enjoy. Please like,share and comment.

Asad

Author & Editor