Thursday, 4 June 2009

How to "Read More" in 10 Steps

10 steps, when one can just do it with one little "click" on the damn link!! :-O
(This girl got to be crapping again)
Dear Readers, I swear to god, this blog is going to make history - in my own little life, that is. You will soon know why.... I first wanted to call it "How to add the 'Read More' link to posts and create expandable posts", but considered.....

1. My Friend Blog Readers will fall off their chairs laughing and that too at office. Some will simply faint. I care for them you know.
2. My we-know-what-she-writes Blog Readers will simply not bother to read (haven't she unabashedly admitted, time and again, to her being a complete tech-nitwit?).
3. Wouldn't that be too long for a title?
4. Only Newbies will be curious

Now, in case you haven't noticed all my blog posts now end with a "Read More" link that leads to another page with the entire post. I found this way my posts look petite, one can view more posts in a single scroll and my blog, on the whole, looks pretty hara-bhara at a glance with many posts one after another, which could be a huge boost when I get into my blogger's-block next. It's saying, it has been tried and tested and mislead you into messing with your blog template ---- I shalt not. So here goes my FIRSTest Tech-post..... (I look like a 100 watt bulb, saying this) :)

How to add "Read More" link and create expandable posts in 10 simple steps

Step 1: Go to Layout --- Edit HTML --- Download your full template (Just in case)

Step 2: Now in your Template code file, search for </head>

Step 3: Copy paste the given code before </head> so that it lies between ]]></b:skin> tag and </head> tag

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
span.fullpost {display:none;}

Step 4: Save template

Step 5: Check the Expand Widgets option

Step 6: Search for <data:post.body/> and add the given code immediately after it

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>

Step 7: Save Template

Like I did, please do not expect all your posts to suddenly sit there peeking their heads out on the Homepage with their torso embedded somewhere else in the Read More link. There's way to go.

Step 7: Now go to Settings --- Formatting --- Scroll down for Post Template box

Step 8: Copy paste the given code in that box and save settings

Here is the beginning of my post. <span class="fullpost"> And here is the rest of it.</span>

Step 9: Say "Abracadabraaaaaaaaaaaa..........." and aloud and clear.

Step 10: In your Create Posts, you'll now find: "Here is the beginning of my post. And here is the rest of it." already written there.

Simply begin to type in your blog so that the first bit appears instead of "Here is the beginning of my post" section and the rest in the "And here is the rest of it." section.

And you're done!!!

But that only does good to your posts henceforth. What about the older posts? That would be so step-motherly to leave them unattended and all exposed in your homepage.

A little tedious but this works great and you can in fact apply this you all blogs you write instead of overwriting everytime on Here is the beginning....And here is the end....:

Step 1: Take up any past blog and click on Edit

Step 2: Go to Edit HTML and add <span class="fullpost"> where ever you want to chop it off with a Read More Link. And add a </span> at the end of the post.

Step 3: Say Gi-lee-gi-leee-gi-lee choooooo. Repeat thrice. Now take a deep breath. Save your post.

Congratulations......................................................! You did it!

In fact, for every post I create, I do Cntrl A + Del and clear the space of the "Here's the...And here's the rest...." shit. After I'm done writing, I simply go to the HTML and add <span class="fullpost"> where ever I want and close the post with </span>. Like I'll just do.......

Hope that was good gyan and useful one at that! All the best!!

Disclaimer: For any fuck-ups, please do not come looking for me. I already confessed on having a peas-sized brain, totally hopeless with anything that contains the word "tech" ;-)

No comments: