Blogger auto read more with thumbnail hack is one of the best hack available for blogger.Almost every blogger use this hack.This hack automatically create post summaries with thumbnails.This function not only make your blog beautiful,but also make it reader friendly.Using this hack you can show more post on home page.
Now it's time for tutorial part,so here we go,
How to Do This?
- Login to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Check the Expand Widget Templates check box on top right of the HTML window.
- In the code window, look for
</head>line. - Add the Read More code below right after </head>
<script type="text/javascript">
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 90,
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPf1cUuIPvzdQpY9uwfpHuCjM5DT5fdwGYBd661MSU00CHpWbLebFnRIzLOfB2s_ppHJJDjEJ2vQ5K0-CxeCeyVfAy44Zz_jDh_HMUtMfSdBjC4oSorlZw58uUs2EVMK9fAxkr9gi8jNk/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, find this line:
<data:post.body/> - Replace the line with this 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>Customization
showImage: true, If you don't want to show image thumbnail then simply replace true with falseimgFloat: 'left', If you want to float image at the right of summary then simply replace left with rightimgWidth: 120, This is width of imageimgHeight: 90, This is height of imagewords: 65, This is number of words when there is a thumbnailwordsNoImg: 80, This is number of words when there is no thumbnailskip: 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.
showImage: true, If you don't want to show image thumbnail then simply replace true with falseimgFloat: 'left', If you want to float image at the right of summary then simply replace left with rightimgWidth: 120, This is width of imageimgHeight: 90, This is height of imagewords: 65, This is number of words when there is a thumbnailwordsNoImg: 80, This is number of words when there is no thumbnailskip: 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, enjoy!
Before you leave:
- Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
- Any suggestion, question or comment? Please post it in the comments below.
Post a Comment