How to Make [Auto] Read More Blogspot | Blogger

Hello Blogger, I bet You always see "read more button"  in every post, or Auto Blogger read more link. when you're make an article that you wanna post into your Blog and you wanna make that simple so, you should create read more button or [auto] Blogger Read More Link  that make your blog easy to load in the search engine Google. that's means your potencial to ranked by Google in the first page. But now we'll gonna make auto Blogger Read More Link to your post. This is different from the conventional read more button because you gonna make it simple with the first image thumbnail on your Blog. I call it Auto read more blogger link.

take a look the pic below:

Conventional read More VS Auto Read More

Follow, these Steps:
1. Login to your Blogger account
2. Go to Dashboard > Design > Edit HTML
3. Back up the template with full download template
4. Check the  Expand Widget Templates check box on top right of the HTML window
5. In the code window, look for </head> line.

6. Add the Read More button code below right after that line

<!-- Auto read more script Start --><br /> <script type='text/javascript'><br /> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail<br /> summary_noimg = 430; //summary length when no image<br /> summary_img = 340; //summary length when with image<br /> img_thumb_height = 200;<br /> img_thumb_width = 200;<br /> </script><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> function removeHtmlTag(strx,chop){ <br /> if(strx.indexOf("<")!=-1)<br /> {<br /> var s = strx.split("<"); <br /> for(var i=0;i<s.length;i++){ <br /> if(s[i].indexOf(">")!=-1){ <br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); <br /> } <br /> } <br /> strx = s.join(""); <br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2; <br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; <br /> strx = strx.substring(0,chop-1); <br /> return strx+'...'; <br /> }<br /> <br /> function createSummaryAndThumb(pID){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = summary_noimg;<br /> if(thumbnail_mode == "yes") {<br /> if(img.length>=1) { <br /> 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>';<br /> summ = summary_img;<br /> }<br /> }<br /> var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';<br /> div.innerHTML = summary;<br /> }<br /> //]]><br /> </script><br /> <!-- Auto read more script End -->

7. After that, find this line: <data:post.body/>

8. Replace the line with this code: 

!-- Auto read more Start --><br /> <!-- http://www.custombuilttech.blogspot.com --><br /> <b:if cond='data:blog.pageType == "item"'><br /> <data:post.body/><br /> <b:else/><br /> <b:if cond='data:blog.pageType == "static_page"'><br /> <data:post.body/><br /> <b:else/><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><br /> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");<br /> </script><br /> <a class='more' expr:href='data:post.url'>Read more ...</a><br /> </b:if><br /> </b:if><br /> <!-- Auto read more End --><br /> <br /> <br />

9. Preview, if it works then save template
10. Enjoy! 

Now you have auto read more button or I call it [Auto] Blogger Read More Link
If you love this post. Please share this read more button post or give it comment below, thanks! :)