Read More Option with Thumbnail hack is far better than Blogger’s default jump break option because it automatically creates a summary of posts on archive pageType and index pageType i.e. home page, label page and search result page with standard defined thumbnail size and words length.
One more best feature of this hack is you can skip any number of posts on the home page that you need not shorten i.e. if you want you can show any number of a full post on the homepage. It gives a very professional look to your blog.
Most of the professional Bloggers have already adopted Read More Option with Thumbnail hack for their blogs and this trick is not unknown to you. But the best thing is this it is available to you now. My belief is that you’ll try and use on your blogs.
Main Features of “Read More” Option with Thumbnail Hack for Blogspot
1. You can show default thumbnail when your post does not contain any image.
2. You can disable auto read more function for few posts on the home page.
3. You can disable auto read more function on the home page, archive page, and other index pageType.
Steps to Use Read More Option with Thumbnail on Blogspot Version 2
1. First, go to Blogger Dashboard then switch to the Template tab
2. Must take the backup of your template
3. Now click on Edit HTML and then on Proceed button
4. Now check on Expand Widget Template
5. Now search for </head> inside Blogger template
6. Now copy and paste the code given below just above </head>
<script type='text/javascript'>
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 120,
imgHeight: 120,
defaultThumb: 'https://3.bp.blogspot.com/-RHI16xnGGw0/UyRl8A6Y3jI/AAAAAAAAM6g/b6wZoVza7J4/s1600/thumb.png',
words: 100,
wordsNoImg: 120,
skip: 0,
showHome: true,
showLabel: true
};
</script>
<script src='http://yourjavascript.com/55335021413/techprevue-readmore.js'/>
Note: If possible please download and host javascript in your own Google Project or Dropbox to prevent bandwidth issues
https://sites.google.com/site/techprevue/home/techprevue-autoreadmore.js
7. And after finishing, steps now search for the following the code
<div class='post-body entry-content'
just below this, you’ll get the following code
<data:post.body/>
8. Change this <data:post.body/> code 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>
and now preview your template if everything is appearing well then Save template.
Auto Read More Script Control Features
- showImage: true, if do not want to show thumbnail then do it ‘false’
- imgFloat: ‘left’, if you want to show thumbnail right to summary then do it ‘right’
- imgWidth: 120, This is thumbnail width in pixel
- imgHeight: 120, This is thumbnail height in pixel
- defaultThumb: ‘http://3.bp.blogspot.com/-RHI16xnGGw0/UyRl8A6Y3jI/AAAAAAAAM6g/b6wZoVza7J4/s1600/thumb.png’, if you want to use the custom thumbnail as per your blog design just change this URL
- words: 100, this is a number of words for a summary of index pageType in presence of a thumbnail
- wordsNoImg: 120, this is a number of words for a summary of index pageType in absence of thumbnail
- skip: 0, if you want to read more function on all posts then leave it as it is, if want to skip first do it ‘1’ or for two posts do it ‘2’ and so on…
- showHome: true, if you do not want to read more function on the home page, do it ‘false’
- showLabel: true, if you do not want to read more function on the label page, do it ‘false’
On this blog, I use this script. You can visit the homepage and label page for demo purpose.
Hi,
I tried but it is not working. Should I remove the stock JumpLink widget before incorporating your script. Please do let me know. Thanking you in Advance.
May I know the blog address of yours.
Kindly note:
//defenceguruindia.blogspot.in/
Thanking you.
Best Regards,
G HARINDRA KUMAR
Bangalore, India
As I can see you are using default Blogger template so two or more instances of <data:post.body/> will be present in template. So you have to replace correct one. if you are unable to do you can add me admin in your blog I will do it.
Thank you once again! I have noticed it.
How to set up admin in Blogger!
Do I need your email id to add you as a trusted user?
Let me know how to add you so that you can take a look at the problem.
Based on the background of my blog template can you add an image to the RIGHT which matches to it.
Hope I am not asking too much from you.
Thanking you.
Hari
Hi… my personal email is augustvinay [at] gmail [dot] com
How do I add you as ADMIN in blogger?
Based on the background of my blog template can you add an appropriate image to the RIGHT “Continue Reading….. >>” which matches to it.
Hope I am not asking too much from you.
Thanking you.
Hari
Any Luck! Waiting for your response! :)
Thank you!
Yet I did not receive your invitation on my email augustvinay@gmail.com
Just wondering how I should do it! Little lost here!
Thanking you
Read this post : https://www.techprevue.com/create-a-team-blog-add-or-invite-blog-authors-to-blogger-blog/
Hi Vinay, I have the same problem as DefenceGuruIndia and I was wondering how I add the Read More with Thumbnails and Snippet option in Blogger. My blog is //www.theblondeb.com and me have tried several ways but nothing seems to work. Please help!
Yes you can easily add this feature on your blog. If you are unable to add then we can add this to your blog. If required then send me author invite on Blogger. My email is augustvinay@gmail.com
I’ve managed to do it now, but I don’t know if you can help me further. Take a look at my blog now: //www.theblondeb.com The “Read More” and the snippet is below the image and I would like the words and the “Read More” to be above the image. Would you know how to do this, please?
I have to check your blog template. But I will recommend a premium template for your blog.
Bro, How do i make the thumbnail clickable? Please reply soon!
Yes, A little change in JavaScript is required for this.
Thank you! its totally working!
But bro, How do i make the thumbnail image clickable?
it should go to the post as it was by default before.
Yes farhan, A little change in JavaScript is required for this.
thanks sir i has search about this, and worth it on my blogger
hello sir
can u help me please
Send me an email.
Hi, can you please share the Blogspot script for Pop up, at the bottom right side of the page or blog, where it says read more, more stories, featured articles pop up?