How To Add Automatic "Read More" Button/Hack in Blogger

Add Automatic Read More Button in Blogger: Although it's not a Big Deal that How To Add Read More Button in Blogger but some new bloggers can't fix this Problem and they are randomly searching for this hack. Let me elaborate it for you People , this is not as hard as "mesothelioma trial attorney " this word .This Hack just add "read more" option in every post. Actually you may have seen in some Blogger Templates that when you post some contents , it just show the whole contents i.e article from Start to the end but this Hack will wind up the article and will not show the whole article but read more button will be present there.So let's add this read more button in blogger.

How To Add Automatic "Read More" Button/Hack in Blogger

• Go To Blogger Dashboard
• EDIT HTML
• Now Press CTRL+F and Search for </head>
• Now Copy the below Script and paste it above </head> tag.

 CODES ARE UPDATED WORKING 100%

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400;  /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://iamifti.com/readmore_thatsblogging.js' ></script>

• You can change the number in red to your desire number. If a post doesn't have images then the length of the summary will be surely 500. If a post contains image, then of course the text length will be 450, And the 1st image that will be displayed will have these dimensions: width= 120, and height= 100.

• Now Search for <data:post.body/>
• Now Copy the Below Script and replace the above mentioned script with the below Script

<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more...</a></span><a href="http://thatsblogging.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlzUQUJOgU2U0sfGRVizW-2LreqsJrplU9-Ph2L3dJ4pS0bFZCzXlTMdRB6jQeVF9zfD4-bbEiwCHtqkI2WWOANNdhIypktbpXMjpE4MsuTIm7HUL8Fg3EGZdVtUckMAfXoWyzWPJ6IQ/s1600/1x1juice.png"></a>
</b:if>
</b:if>

• Now Save template and that's it ;)

SHARE

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

• 
• 
• 
• 
•