Auto Read More Thumbnail for Blogger/Blogspot

I hope many of Bloggers or Blogspot users having trouble with adjusting Readmore snippet or using auto jump break problem either because of the Template or any other reasons. So, without wasting time I'll start the process.

Auto Read More Thumbnail for Blogger/Blogspot

• Log-in to your Blogger account. 


• Goto Theme tab and select Backup/Restore to Backup template.


• Now select Download Theme. 


• Close that pop-up and select Edit HTML button


• Click anywhere on the code and press Ctrl+F paste </head>.


• Now paste the below code in next line of </head>.

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

• Again search for <data:post.body/>.
• Replace the above line with the below code.

<!-- Auto read more Start -->
<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 -->

• Click on the preview to check the website functionality.

Find anything difficulty or facing any problem. Feel free to comment below :).

How to Create a Contact Us Page/Form for a blog:

‘Contact Us page/Form’ is used to provide the information about the Website/Blog owner .Even getting the Feedback and Quires about the particular website/Blog.

How to Disable Right Click in Blogs/WebSites

Hi friends..!Protect your Articles, content, images even your posts in getting copied organic traffics due to your lot of hard-word applied in creating that post article for your worthy readers, than comes another role of content scrappers copying your articles and getting higher in search engines. Well now you can protect your articles from getting copied easily using just a small CSS trick which is really compatible in every browser and works like a charm.

convertion of Blog into E-BOOK

Now-a-Days Blogger and wordpress are most popular platforms among bloggers .There are many types of blogs for every niche like health, technology,hacking,programming etc which are full of information .If you are a regular reader of some blogs and want to have access to their content even when you are not connected to internet than you can create a pdf version of the blog.The PDF version of blog doesn't include any ads and is completely free to create.You can also store it in your smartphone .