18 February 2013

Add Auto Read More with Thumbnail on Blogger

Add Auto Read More with Thumbnail on Blogger
Blogger auto read more with thumbnail hack is one of  the best template  hack available for blogger.Almost every pro-blogger done that trick with their blog.This automatically create post summaries with thumbnails in a very nice way using some javascript and css.This function not only make your blog beautiful,but also give your readers an easy navigation enable blog.Using this hack you can show more post on home page and label pages to your visitors.This will surely increase their spending time on your blog.
Now it's time for tutorial part,so here we go,

 Must Read : Popup Facebook Like Box Blogger

Add Read More With Thumbnail on Blogger

  • Log onto your Blogger account.
  • Navigate to Dashboard > Design > Edit HTML.
  • Back up your template.before doing any tweak
  • In the code window, search(ctrl+f) for </head> tag.
  • Add the Read More code below right after </head> tag

<script type="text/javascript"> var summaryConf = { showImage: true, imgFloat: 'left', imgWidth: 120, imgHeight: 90, defaultThumb: 'https://lh3.googleusercontent.com/-GRP8IcURRsw/T9MjiNWXUcI/AAAAAAAAB88/QEDpDHxI55o/s1600/no-thumb.jpg', words: 65, wordsNoImg: 80, skip: 0, showHome: true, showLabel: true }; </script> <script type="text/javascript" src="http://code.helperblogger.com/summary.min.js"></script>

  • After that, search for this line: <data:post.body/>
  • Replace the line with the below code:

<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'>summary("<data:post.id/>")</script> <span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More</a></span> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> </b:if> </b:if>

  • Now save the template.


  • showImage: true, If you don't want to show image thumbnail then simply replace true with false
  • imgFloat: 'left', If you want to float image at the right of summary then simply replace left with right
  • imgWidth: 120, This is width of image
  • imgHeight: 90, This is height of image
  • words: 65, This is number of words when there is a thumbnail
  • wordsNoImg: 80, This is number of words when there is no thumbnail
  • skip: 0, skip some first posts, don’t apply auto readmore for them. If this option is set to 0 so that all posts are applied auto readmore.
  • showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.

That’s it, You're all done.Now just go to your blog to see how it is working.

Before you're leaving us

  • Do you find this article useful?then do  share it 
  • Any suggestion, question or comment? Please post it in the comments below.
Happy blogging guyz!!!

Articles You May Like

6 comments: Leave Your Comments

  1. wow i love how blogspot isn't too complicated as wordpress. love all your tutorials! xx

  2. thanks for the tips. I might try this one once I bought my own domain name.
    im tryin to upgrade my blog. :)
    wish me luck dude! :)

  3. hi, i want to increase the length between thumbnail and summary. What should i do?. Thank you

  4. @Debarpan Mukherjee
    it was working on my blog but i want to change read more button on gray color....help me..