Adding Read More Link To Blogger With Thumbnail

a

ADDING AUTO READ MORE LINK:

Without delay let's go;

Sign in to your blogger account.

Be forwarded to dashboard>design>edit html.

Be sure to tick the Expand Widget Template box.

After you ticked the box search for this tag;

</head>

After you found the tag paste the below code just after it;

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

After adding the above code search for this one;

<data:post.body/>

After you found this code replace with the code below;

<!-- Auto read more Start -->

<!-- http://www.mediarips.blogspot.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 -->

Note: You may find <data:post.body/> two or three. At the time try the first one. I have found this tip working 95%.

Preview it and if you are satisfied then click on save template.

Tips:

You can change the phrase Read More.. bolded and italicized above to any word or phrase you want.

You can change img_thumb_height  value and img_thumb_width  value. Be sure to change the height or width in pixels.

ENJOY!!