Automatically Trim Posts & add Read More Option Blogger

If you have just stepped into the blogging business and started using Blogger as you first priority then you might be thinking to tweak up your template a little bit to make it much more attractive in looking so that people coming to your blog will stay for sometimes and enjoy the awesomeness of you posts. So the first thing every one tries to do is make all your posts trim and add Read More Button to it so that people can click on it and they can see your post. But now blogger by default do not provide any option to do this stuff, so we have to manually add some scripts to make it happen.

Why to Implement Auto Read More Hack in Blogger

Well now if you have this question in your mind then we have a very simple answer, for proper layout design, yes I think implementing this auto read more hack will effect the design, it will make it much more clear and usable. The posts height will be same so that will add a good and clean look.

Manual Way to Add Read More Button

Well if you are seeking out for a manual way for adding Read More button without using an JavaScript, well you can do that by adding the <!--more—> tag in your post where ever you want the post to be trimmed up, you can also get the Split Post option in Blogger and Live writer too so you can click that option and it adds this tag automatically.

Automatically Add Auto Read More Button Blogger

Well I will say that using this auto read more script is the best option as you just have to concentrate on your work and rest is done automatically using the JavaScript. So using this method you do not need to worry about the size and text as its automatically trimmed out after some lines or text you describe. So now check below steps and add this to your blogger blog.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for </head> tag & paste below code above it.

   <script type='text/javascript'>var thumbnail_mode="no-float" ;summary_noimg=430;summary_img=340;img_thumb_height=100;img_thumb_width=120;</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(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>

3. Now once again make a search for <data:post.body/> tag and replace this code with below code.

   <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><span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read Full Article !</a></span><div style='clear: both;'/></b:if></b:if>

4. Now your script has been pasted up, its time to hit Save Template button and now refresh your blog to see posts trimmed up & Read More Button placed.

Well now your code is up and running and now your posts looks stunning as usual, but now there are some changes you can make to your script according to your preference. So now if you need to increase the text displayed then you can modify the numbers in blue color. You can also change the Read More button text according to your will right now its Read Full Article ! you can change it up, you can even style up this button using CSS its class is jump-link so you can use .jump-link{ css –x—x—x— code to be pasted here ! }

So now have fun guys hope you liked this easy tutorial, well it’s the basic one but I think still many people might be searching for this one :)