Auto Read More Button with Thumbnail for Every Blogger Post

M Ehsan Qureshi Blogger Hacks

Another new topic for beginners may they have seen and visited hundreds of Blog on every single day and finding such a solution to add Auto Read More Button with Image Thumbnail for all the Blogger posts. Giving such a beautiful and responsive look to your Blog is very important to attract your visitors make them to serve more time on your Blog it will help you to reduce bounce rate and give your more pageviews from each visitors. So we were talking about the Auto Read More Button if you are not familiar more with this function I have already posted an article for Add Custom Read More Button in my previews series and write all about this function you can check there complete details. This is the function for add jump break to your Blog post for the main homepage index page and add a read more button for reading the complete post but this all we have to manually. In today article I will give you a plugin for the same function which will create Auto Read More Button with Image Thumbnail for all your Blogger post for your Blog index page. Below the Complete Guide for How to Add Auto Read More button for every Blogger Post.

Related:-

Striking Mouse Hover Social Media Subscription Widget - New !!
New Beautiful Blogger Stats Counter with Hover Effect - New !!

Why I Should Use Auto Read More Button Every Blogger Post

There are also such benefits or using this useful Blogger template hack that is Auto Read More Button such as you can place more Blog post on your main index page or label index page, Help you to make your visitors spend more time on your Blog and give you more clicks, its give your profession look as you have always seen on other blogs etc. check the guide below to add this hack into your Blogger template and add auto read more button in your Blogger template.

Check:- 3 in 1 Attractive Social Media Profile Widget - New !!

How to Add Auto Read More Button Every Blogger Post

I think I have write more about it, now I should give you this plugin to add in your Blogger template. Follow the given below steps.

Go to Blogger Dashboard >>

Backup Your Blogger Template By Read This Article

Go to Template >> Edit HTML >> Click on the now find the </head> tag and paste the following given below script.

<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 120,
defaultThumb: 'http://2.bp.blogspot.com/--PZwQrOO_0s/Uht4h0kK3TI/AAAAAAAAATY/c-RSbz6butw/s1600/no+thumbnail+img.png'
words: 100,
wordsNoImg: 120,
skip: 0,
showHome: true,
showLabel: true
};
</script>

<script src='https://blogger-widgets-generator.github.io/tipstricksislandcom/auto-readmore-button-blogger.js' type='text/javascript'/>

Script Control Features:-

showimage:true :- for controlling the thumbnail image “true” or “false”
imgfloat:’left’ :- For Thumbnail image alignment you can change it right or left
imgwidth & imgheight :- you can change the thumbnail size by replacing 120 into as per your requirement
words:- you may also change the number of words shown on the index page from 100 into your requirement.
Wordsnoimg: if you have not set image thumbnail for home index page the words count will be 120 you can change it from here.
Skip:- if this function =0 then you all images will have auto read more button or you may change it by increasing the numbers as 1=for one post only or 2=for 2 posts only.
Showhome:true :- the auto read more function is enable for Home Index Page
Showlabel:true :- the auto read more function is enable for Label Index Pages

Read:- Customizable CSS for Label Cloud with Hover Effect for Blogger

Hope you have understand all the function and controllers of the above script now check the below guide to add more codes.

Now again find this code

<div class='post-body entry-content

Not complete yet but below this find <data:post.body/> and replace the <data:post.body/> with the following 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:12px;'><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>

<span style='float:right;padding-top:12px;'><a expr:href='data:post.url'>Read More</a></span>

</b:if>

</b:if>

Now Save your template and check out your Blog with new Auto Read More Button With Image Thumbnail

Related:- CSS Scroll Bar for Blogger

Bottom Lines

If you have install the above script and hack for the auto read more button the submit you feedback in case of any error or any help regarding the above guide you can ask by replying in this post as soon as possible you will be guided to install the Auto Read More Button easily.. Follow Our Social Profiles or Subscribe our RSS Feeds to Get every new update infront of you.. Regards.