Blogger Auto Read More Hack : Improved With Many Control Options

Blogger Auto Read More Hack : Improved With Many Control Options

Hi! How is it day?

Now, i wanna share something that related with my wishing to create my blog looks simple and easy to read. I wanna my blog looks Auto Read More style.
Read more style is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.

And fortunately, i found some article that helps me to create my blog looks Auto Read More  Improved With Many Control Options.

Read More  Improved Control Options :

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.
:) so, what do you say?? and this is it!!!

How To Add Auto Read More Hack To Blogger?

1.

Go to Blogger Dashboard >> Template (Download and backup your old template) >> Edit HTML>> Check Expand Widget Template checkbox

2.

Find this code :
</head>
and add the codes below just above it,

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


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/AVvXsEhvm4vE3pHPN_kXZaP5-NnLtdtXvTub51OGgfJWl3THgW3xY2rJfvxvy1dxDYV7thrfF4fvXB0alnZPnBeZjqCD1K4FGHaWTLLWsH_SrRYddCwTdo9UuBjsDY9lBiDlU64dCIYG_8SajKg/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.

3.

After adjust it, find this code :
<data:post.body/>
and replace with :
<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>
on standard template you should find 3 times "<data:post.body/>" code to the repeats , then replace all the codes till 3 times.

4.

When done, save the template.

Now you can view your blog with readmore style in every posts.
Enjoy blogging!

Labels: , ,