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="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/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.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

40 comments:

  1. Thanx for this read more widget. iwas looking for this a while. Your article solve my problem. Keep sharing :-)

    ReplyDelete
    Replies
    1. You Welcome Singh , Keep Visit Our Blog for more cool stuff :)
      IftI!

      Delete
    2. hi i want help that by clicking on read more button it opens an ad into new page
      so tell me how can i get this

      Delete
  2. That's the spirit of sharing Iftikhar! Great to have this codes on my list. Kudos!

    ReplyDelete
    Replies
    1. Thanks For Stopping By Lisa , Hope you enjoyed the tutorial ! Keep Visiting Our Blog for more awesome updates!
      Regards,
      Ifti!

      Delete
    2. Hello,
      i cant find the can you please help out? thanxxx

      Delete
    3. the data:post .body/ part that is...

      Delete
  3. android apps/games store - www.way2apkstore.blogspot.in

    hacking blog - www.8460200125.blogspot.in

    funny blog - www.funwithaxit.blogspot.com

    ReplyDelete
  4. Thanks you, Hope you enjoyed the tutorial ! Keep Visiting Our Blog for more awesome updates..Read at interesting news,amazing news,bangla news paper, bangla news, bangla blog, english news, english blog

    ReplyDelete
  5. Hi,
    i cant find the can you please help out?
    Read more interesting news,amazing news, bangla news paper, bangla news, bangla blog, english news, english blog.etc

    ReplyDelete
  6. nie article......keep blogging with huge informative contents...... Make Money , Blogging Tips

    ReplyDelete
  7. Thanks For Stopping By Lisa , Hope you enjoyed the tutorial ! Keep Visiting Our Blog for more awesome updates!
    thanks..\

    Read at amazing news,> bangla news paper, bangla news, bangla blog, english news, english blog, technology news, technology blog, computer tips and tricks

    ReplyDelete
  8. Does not work on my blog,please help.

    ReplyDelete
  9. blogging tricks @ tips money making ideas and all methodes of seo see in this site seomethodes.blogspot.com

    ReplyDelete
  10. THANKS DUDE!!!!!!!! I ALSO LOVE BLOGGING & make money online..... IM IN 7TH STANDARD.........13 YRS OLD
    CHECK MY BLOG FOR ANY SUGGESTION
    MY blog >> www.harshitpcguide.blogspot.in

    ReplyDelete
  11. what a nice post
    read at more..: [link|http://beg24.blogspot.com/|bangla news] , [link|http://beg24.blogspot.com/|english news] , [link|http://beg24.blogspot.com/|bangla blog] ,[link|http://beg24.blogspot.com/| english blog] ,[link|http://beg24.blogspot.com/| technology ] [link|http://beg24.blogspot.com/| news] , [link|http://beb24.blogspot.com/|technology blog,] [link|http://beb24.blogspot.com/|computer tips and tricks]

    ReplyDelete
  12. Keep it up dude!!!

    http://easytodownloadz.blogspot.com

    ReplyDelete
  13. how to i edit this my site
    http://techarticlesbd.blogspot.com/

    ReplyDelete
  14. To All Lovers of Thats Blogging , Sorry Guys i was lil bit busy the above Codes are updated and working 100% Enjoy ;)
    Regards,
    Admin IftiKH!

    ReplyDelete
  15. Hi, this isn't working for me :( It says that

    The element type "img" must be terminated by the matching end-tag ""

    Where should I insert ?

    ReplyDelete
    Replies
    1. You must close the < Img> ending tag with < /img>
      Regards,
      Ifti!

      Delete
  16. looks good but in http://expertbloggertricks.blogspot.in is not working.
    kindly help..

    ReplyDelete
  17. Hey thanks, it works great on my blog, I will put up a link back to this post as a token of appreciation, cheers!

    ReplyDelete
    Replies
    1. Thanks Buddy for your Nice words , keep visiting for more awesome tuts!
      Ifti

      Delete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Hi
    I am having this error when ever i insert the script @@@@Error parsing XML, line 1834, column 292: The element type "img" must be terminated by the matching end-tag .@@@@

    ReplyDelete
  20. Get free recharge
    justforhackers.blogspot.com

    ReplyDelete
  21. just used part of the code on my blog Romanian Feed, thanks for the tutorial

    ReplyDelete
  22. thanks...
    it worked for me.
    plz visit for latest android apps full version.

    www.androidworldz.in

    ReplyDelete
  23. when i use this code my post comes 2 times plzz help ???

    ReplyDelete
  24. data:post.body/> template of my blog dont have this code

    ReplyDelete
  25. data:post.body/> template of my blog dont have this code

    ReplyDelete
  26. http://englishspeakingcourseinhindi.blogspot.com

    ReplyDelete
  27. thank you bro for my website problem www.kollywoodsplus.in

    ReplyDelete
  28. These you will then see the most important thing, the application provides you a website a powerful important internet page: cblaketahoe.com

    ReplyDelete
  29. Your article has piqued a lot of positive interest. I can see why since you have done such a good job of making it interesting. réplicas de relógios famosos

    ReplyDelete