[Update] Auto Read More with Thumbnail Widget For Blogger

Auto read more widget is for those blogs which do not add jump break automatically while mostly template add automatic jump break but in some template it is missing and you have to add manual jump break for every post you made which may be irritating while jump break is very important so that in home page of blog and in the search page of blog post do not show as open it also make our blog heavy and it may takes time to load when browse. 

How to add jump break in blogger

First lets see how to add manual read more to any post.make a new post and there you will see the jump break option as show in image so when you add jump break just add it by pressing.

you can visit your blog to confirm.

Add Auto Read more in blog post

step1: For add adding auto read more in blogger  first login your account and select your blog now go to template and edit html.

there you will see the coding of you template. press any where inside the code area and press ctrl+F but do not remove ant thing this may make your template different or may be it not works properly.

step2: Now find this code by searching

</head>

above that paste the given below code

<!-- Auto read more script Start --><script type='text/javascript'>var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 330; //summary length when no image summary_img = 240; //summary length when with image img_thumb_height = 240; img_thumb_width = 240; </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><!-- http://mx-machine.blogspot.com --><!-- Auto read more script End -->


now save the template and now your post will show auto read more jump break no need of manual adding every time.

Share this post