Expandable Posts
What is it?
The "Read more..." option (aka "expandable posts") allows you to show a shorter version of a longer post, or a summarized version, in the main page of the blog. The readers can then expand the post to its longer full version in the post-page by clicking the "Read more..." button. This option is great if you have posts that are too long to be shown on the main page.
For this code, the "Read more..." link will only show up for the posts that have been selected to show the link, which is a good thing. There are other versions of the code that won't function properly: the "Read more..." link shows up even if you don't want it to show up.
To get all the templates with this Expandable Posts function, make sure the templates are labeled with Expandable posts.
How to use it?
Most of the new templates here have been added with the 'Expandable Posts' code. You pretty much don't have to do anything much. The only thing you need to do is to separate each post you publish into two parts:
- The summary part that will show up both in the shorter version and the full version.
- The other part that shows up only in the full version in its post-page.
Type rest of the post here
This is how it looks in the Post Editor (with the 'Edit Html' mode):
How to make it easier?
You can make it easier not to type the fullpost-separator tags everytime you post. To do this, go to the Settings --> Formatting tab. At the bottom is the Post Template form. Type in only the code in red above (the fullpost-separator tags) into the Post Template form.
You're done. The fullpost-separator tags will be automatically inserted in the Post Editor everytime you want to post. You can see the tags in the 'Edit HTML' mode to see where to place your posts accordingly.
How to change the "Read more..." text?
You can easily change the text to whatever you want, e.g. "Continue reading...", "[...]", and so on. Just go to the Layout --> Edit HTML tab and click the Expand Widget Templates box. Search for the "read more..." string (the red line below) in the XML code and simply change it to whatever you want. See the example below:
What if I don't want the "Read more..." code?
Delete it. Go to the Edit HTML tab and click the Expand Widget Templates box. Search for the "data:post.body" string (the red line below) in the XML code and delete the code in red only.
Add large photos in blog
Using the standard "Add Image" button in Blogger's text editor, you can only post photos or images with limited size, even if you choose the "Large Image" option.
Check out this test blog to see how the image fills up the entire post area. If you use the Blogger's Add Image button, the largest image you can post will be much smaller than this.
Follow these instructions to post large photos or images in your blog:
* Store your photos in an online image hosting service. I would suggest the free Photobucket powered by Google.
* Copy the direct link to the photo you want to post. In Photobucket, the direct link to your photo is located in the "Direct Link - Layout Pages" tab below your photo.
* In your Blogger Create Post panel, click the Edit HTML in the text editor.
* To post the photo or image, type the code below in the Blogger text Editor:
* Change PhotoURL to the actual URL (the direct link) of the photo you want to post.
* Set the width and height of your photos appropriately. If you want it to be the actual size, simply delete the red part. If you just want to set the width and let the height changes accordingly to scale, simply set the width only, not the height.
