Jquery, Cookies and Blogger

Question

On my Blogger Blog I have this code in the template

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:else/>
<p><data:post.body/></p>
</b:if>

This code basically shows the body of the blog post only when it's on an individual blog page.

You can see an example here www.spoilertv.com When you are on the homepage only the post title is displayed. Clicking on the title gives you the full post.

What I would like to do is to give the reader of the blog the choice of if the Body of the Post is displayed or not on the homepage

I would like a simple radio button or checkbox that I can place on the blog something like "Show Full Content". This is turned off by default. If the user clicks it, we then set a cookie using Jquery and we then reload the page.

The cookie would be used so that if the user returns to the site later it would remember their preference and display accordingly.

The code above would need to be updated so that it checksthe value of the cookie and if it's sets to Full Content then it would display. Pseudo code something like this.

<b:if cond='data:blog.pageType == &quot;index&quot;'>

if cookie is set to full content then
<p><data:post.body/></p>
endif

<b:else/>
<p><data:post.body/></p>
</b:if>

If anyone can help me with this little project I would be very grateful.

Thanks in advance for any help.

Answer 1

I'm a wordpress dev, so not too familiar with blogger, but will try to help you out anyways.

If blogger is similar to WP, then it's not a matter of hiding or showing the content that's already being generated on the page. (which is what JQ would do for you). Your first step is to get the content to show up.

And i know it can be done in blogger - here's an example:

http://photographybyspandan.blogspot.com/

plus did a test post here: http://siberianx37thoughts.blogspot.com/

I think it's a setting you can set in blogger to display full post title.

Then, you can edit the template, and wrap the post in an element. In this case it's p so just add a specific class to it. then use jquery to hide / show that element

http://www.learningjquery.com/2006/09/basic-show-and-hide

You can use firebug for firefox to help you too :)