How do you only show a snippet of an entire post on the main page? This means only showing part of the post that you want to feature, and not in its entirety. This can be done by just adding a few codes, obviously. Before, editing your html, it is important to download your full template to your desktop first. This is so that if something goes very wrong, you have a backup to revert to. A must do! Make it a habit! Don't learn it the hard way like me and save yourself lots of frustrations later on!
There is mainly three parts to the code. One is changing the conditional CSS, second is adding the "read more" links and lastly, limiting your post displayed on the main page.
Once you have saved your template, we can begin.
First: Conditional CSS
1: click on "edit html", it is not necessary to expand the widgets.
2: search for </head> by scrolling down, or I find it by using control(hold) + f.
3: Add the following code one immediately above </head> and after ]]></b:skin>
code one:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
4: Once done, you may save the template.
Second: Read More Links
Read more links would appear at the end of your post entry on your main page. Clicking on it would bring the visitor to its unique page for each respective post. An example would be the one you are seeing on my blog.
1: At this point, you have already saved your template, so now click check on expand widgets at the top right corner of the edit page.
2: Again, use control(hold) + f and search for the code: <data:post.body/>
3: Now, add the following code two immediately below it.
code two:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>
4: Once done, save your template again.
Last Step: Modifying your posts
The last part would be using the code to hide show only the text that would appear on the main page.
1: At the top, click on settings, formatting. At the bottom is a box titled: post template.
2: Input the following code three in the box.
code three:
enter here the beginning of post. (on main page)
<span class="fullpost">
enter here the rest of your post. (on individual page)
</span>
3: Now you can save the settings, and you are all done!
How to use?
Its pretty self-explanatory on the codes.
1: click on create a new post. Instead of the compose function, click on edit html.
2: There, the above codes would be present. So what needs to be done is to put your introduction above the code: <span class="fullpost"> and the rest of your post after it, ending with the code: </span>
It is important that these two codes are present.
Note:
- It can be a little troublesome for some as they would have to be aware that the codes need to be in placed before clicking the publish button. Meaning you have to switch to edit html mode. For me, I am already used to writing posts using edit html.
- Once you setup everything, you will realized that the old posts are all not "fixed" automatically to display snippets. On this note, you would have to do it manually, inserting step 3 to the posts that needs to be snipped.
- Using this code would mean that all posts whether you like it or not would have the read me link, even if its not a summary. This is because the link actually behaves like a permalink. However, this should not be too much of a trouble.
- Works with Blogger Beta, not sure about the rest.
That's all. Enjoy your blogging experience!
Blog Post Summaries: How to
Labels:
Questions,
technology
- Thursday, March 27
Subscribe to:
Post Comments (Atom)





0 returned:
Post a Comment