One of the questions I am asked most about my blog is how I create post summaries on my main and archive pages.The hack I use for this is Ramani's "selective expandable posts". This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize.
Whereas I would normally refer readers to Ramani's original post to learn how to implement this technique, many readers have expressed their difficulties in using this, and Ramani seems unavailable for support. So I have decided to write a full explanation of how to use this hack in the hope that this will answer many of your questions, and enable you to use this hack in your own Blogger layouts blogs
How the selective expandable posts hack works
This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.
This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.
Before installing the selective expandable posts hack to your blog, you should be aware of two things:
- Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.
- To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.
If these considerations are something you can live with, you're ready to install the "selective post summary" hack.
How to Install the Selective Post Summaries Hack
This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:
Back up your existing template before making any changes whatsoever!
You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!
Read each step fully, familiarize yourself with the code, and then read it again!
It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.
Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.
Here is my step by step guide to installing the selective post summary hack in your blog template:
- Back up your existing template code!
To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.
How the selective expandable posts hack works
This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.
This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.
Before installing the selective expandable posts hack to your blog, you should be aware of two things:
- Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.
- To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.
If these considerations are something you can live with, you're ready to install the "selective post summary" hack.
How to Install the Selective Post Summaries Hack
This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:
Back up your existing template before making any changes whatsoever!
You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!
Read each step fully, familiarize yourself with the code, and then read it again!
It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.
Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.
Here is my step by step guide to installing the selective post summary hack in your blog template:
SINCE BLOGGER DOES NOT ALLOW THE USE OF HTML TAGS IN A POST, FOR THE PURPOSE OF EXPLAINATION, I AM REPLACING THE TAG SIGN <> WITH [ AND ]
MAKE SURE THAT YOU SWITCH THEM BACK TO THE ORIGNAL <> TAG WHEN YOU PASTE THE FOLLOWING LINES IN YOUR BLOG
- Back up your existing template code!
To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry. - Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here: This is the summary
[span id="fullpost"]
This is the rest of the post
[/span] - Then save this post.
This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post. - Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.
- We now need to add the required JavaScript code to the head section of your blog template.
This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).
In your blog template, you will need to locate the DIV section which contains this line: data:post.body In many templates, this section will look something like this:
[div class='post-body]
[p][data:post.body/][/p]
[div style='clear: both;'/]
[/div]
However, the class of the containing DIV section may be called something
different, such as: div class='post'
div class='entry'
div class='post-body entry-content
The best way to locate this is to search for bold;color:red;" >data:post.body using the
CTRL+F function in your browser, then take a look at the surrounding code to
work out where you need to edit.
Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the div class='post-body' section may be named differently in your own blog template, so do bear this in mind!
[div class='post-body' expr:id='"post-" + data:post.id' ]
[b:if cond='data:blog.pageType == "item"']
[style>#fullpost{display:inline;} [/style]
[p][data:post.body/][/p]
[b:else/]
[style]#fullpost{display:none;}[/style]
[p] [data:post.body/][/p]
[span id='showlink']
[a expr:href='data:post.url']Read More......[/a]
[/span]
[script type='text/javascript']
checkFull("post-" + "[data:post.id/]");
[/script]
[/b:if]
[Div style='clear: both;'/] [!-- clear for photos floats --]
[/div]
Before you attempt to save your template, I would advise you to preview your blog. Read More......
