Auto readmore script improved with many options

Some Times When You Turn Your Blogger Template To A Custom Blogger Template There Is No  Auto Read More Button Or Text Below Post On Home Page. So In This Tutorial We Learn How To Add That  Auto Read More Button Below Post On HomePage. This hack automatically create post summaries with thumbnails .

With using this we can control the following options as you wish

1. You can add default thumbnail image when your posts don't have any image.
2. You can turn off auto read more for some first posts.
3. Option to turn on/off read more for home page and labels page.

How To Add Auto Read More To Blogger?

1. First go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click Edit HTML
4. Hit Proceed
5. Check Expand Widget Template checkbox
6. Find below code in your template

</head>

add below piece of code just above </head> Tag

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWf_88gTTuZSxPcxoTnEt8oNVAtDaBs9gGnrGnNvNLAfDZ5OZFf3aEZ_URDRIKs43dIhF1-ZggabShzFImUM17fXVW3ItZyxCzIcrEeHGUOC8CqXeIAQgqxx6HEPDENXFMTn6H8TJYsY/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>

You can easily customize above highlighted values,below are their meaning

• 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
• defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWf_88gTTuZSxPcxoTnEt8oNVAtDaBs9gGnrGnNvNLAfDZ5OZFf3aEZ_URDRIKs43dIhF1-ZggabShzFImUM17fXVW3ItZyxCzIcrEeHGUOC8CqXeIAQgqxx6HEPDENXFMTn6H8TJYsY/s1600/no-thumb.jpg', If you want to set your own default thumbnail then replace above image URL with yours.
• 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.

Now find below code in your template,

<data:post.body/>

replace it with 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>

Finally take a preview of your template,if you thing that everything is alright then save your template,if not then customize it as you wish and save it :)

 تم النشر يوم  الجمعة، 23 مايو 2014 ' الساعة  11:45 ص

Facebook Twitter Google+ Linkedin Digg Print