And moreover this hack has already been modified to show the first image from the post, as a thumbnail along with the truncated post.
I called this hack as Automatic read more with image hacked for blogger, because through this hack you not only add the "Read More" tag to your posts, but it also optimizes your "Archive pages" (Feb 2008, Oct 2008, etc.) for search engines and
also for your readers.
Instructions to follow:
Log in to Blogger, go to Layout -> Edit HTML, and mark the Expand Widget Templates box.
Now find (CTRL+F) this in the template code:
</head>And immediately ABOVE/BEFORE that, paste this code:
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
If a post contains image, then text length will be 450, and the first image that will be displayed will have these dimensions:
width= 120, and
Now again in the template, find (CTRL+F) this:
Then REPLACE that line, with this code:
Save the template and make your readers and search bots happy !
BackUp - STEP 1:
Download this file: read-more_auto.js
BackUp - STEP 2:
Upload the file to
NOTE: Edit & save the folder properties at your MyDataNest account as "Hidden" and NOT as "Private".
And copy the DIRECT LINK to the file.
Now let us see how to customize the code to suit your style :
- var thumbnail_mode = “no-float”; By default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option ” float ” instead of “no-float”.
- summary_noimg = 500 ; This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.
- summary_img = 400 ; If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.
- img_thumb_height = 130; This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.
- img_thumb_width = 281 ; This tag decides the width of the Thumbnail image to be shown.
- ADDING READ MORE IMAGE
The author of this hack haven’t included any read more buttons in this hack. But I have modified the code and have included a image to link to the full post. If you want to change the image then replace the url of the image with your own image or if you don’t need any read more button , then replace the code in final step to this one :