Blogger Tip: "Read More" Hack, Automatic Summary and Thumbnail Script
Updated: May 21st, 2011
If you’ve observed my old blogger template when the site was on Blogger, it has a "Read More" link after every post on the main page with a nice icon. Previously many bloggers tried to create such scripts, but they were either laborious or untidy. Now the present script performs better than all the previous blogger "Read More" hacks for creating summary of posts on the main page. The earlier versions had some disadvantages like, it was needed to add the following tag in all post pages while writing new posts.
Type your summary here
Type rest of the post here
——— Code Start ————
Note: After inserting the following code, if you get any HTML or Template errors, just replace the single quotes in the above code, with single quote using your keyboard. This problem I faced when I tried to copy from the author post, as the code was not formatted correctly. This only refers to single quote problems. Other template problems, you need to solve yourself.
Then , save your template.
Final Step: Add the following code in Post Body
Now, check "Expand Widget Templates" option in the "Edit HTML" page and search for this tag.
Replace, the whole tag with the following code.
———— Code Starts —————-
———— Code Ends —————-
You can download the "Read More" image & upload to your favourite hosting site, as otherwise, it may cause resource hog on the present link.
Note: If you find the same problem of single quote in your template, just replace all single quotes in the above code with single quote from your keyboard. Also, sometimes, you may find 2 or more occurrences of , in your template or HTML code. Just replace the first occurrence of that code. If you still have errors, just do a trial and error with 2nd and other occurrence. You can now preview your blog and save it. You should now see your homepage like this.
Customizing "READ MORE" IMAGE
Suppose, if you don’t like the image at the end of summary, you can define your own image icon and upload it to a host and replace the red url link with your own link. Also if you don’t like the image or you feel it is un-necessary, you can replace the code in the FINAL STEP with the following code.
—–Code Starts ——-
—–Code Ends ——–
You can replace the "Read More" with any other text you like.
Hurray, you learnt another important tip on hacking blogger template.
- Related Posts for Blogger : Widget Inserts Automatically
- Windows Live Writer! Blogger
- Windows 7: Customize Thumbnail previews in your taskbar
- Autopatcher: No Need of Automatic Update: Download updates and install them on many computers.
- Beware of iPad Malware in the form of iTunes Update
- Caret Browsing in Google Chrome
- Windows 7! Show Desktop Icon
- Ownership and Google Adsense.