Saturday, October 19, 2013

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.
 <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>
  • 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 == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div><script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='clear: both;'/>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>
  • Now Save template and that's it ;)


24 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. 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. This is a specific show that I watch and listen to. The host, Andrew Warner, interviews successful entrepreneurs, mostly from Pakistani Dramas the online startup world. If that's a topic that interests you, the interviews are excellent and there are transcripts available with each show.

    ReplyDelete
  7. Nice info dude..thanks for sharing ...
    You can also add this without any modification in template.
    The info is given here : http://goo.gl/rSWFnK

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

    ReplyDelete
  9. 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
  10. Does not work on my blog,please help.

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

    ReplyDelete
  12. 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
  13. 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
  14. Keep it up dude!!!

    http://easytodownloadz.blogspot.com

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

    ReplyDelete
  16. Just want to say your article is as astonishing.
    The clarity in your post is just great and i can assume you're an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with

    forthcoming post. Thanks a million and please continue the gratifying work.

    Also visit my Web Blog

    ReplyDelete
  17. What's Happening i'm new to this, I stumbled upon
    this I've discovered It positively helpful and it has helped me out loads. I am hoping to give a contribution & aid different customers like its helped me. Good job.

    My blog post: How to Get Google Page Rank Quickly

    ReplyDelete