05 August 2008

Expand or hidden your blog's post


Generally, this blogger hack's name is called Expandable posts with Peekaboo view

So,what is this hack?

Firstly, your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot.

By using this hack, you blog's main page will show only post summaries and when you click "Read more", the full post appears in the main page itself.

Let me give you more cleary picture about this hack.
Orginally, you blog's main page will show entire content of you post.


After using expandable posts with Peekaboo view, your blog main page will look like this:




Here is the steps to follow:
Step 0:
Remember downloads and save you template before you add the hack

Step 1:
Go to [Layout]->[Edit HTML], and find *
*Click Crtl+F , and type /head, and the browser will highlight where it locate.

Copy the code from here and tag it between and


Step 2:
Initially, you need to expand widget template and after that find the word uncustomized-post-template. Copy/paste the changes highlighted in red in this page.

For my expereince, this step is imporatant because if you paste the code in wrong place, the hack will not work.

If there is a lot of script after 'post body' , u must paste the code:
after the last script. If u still not understanding, please look for the below image


Next, let say, u have see this code after data:blog.body/


Please replace it with this code:


Step 3:
Go to [Setting]->[Formatting], and find post template. In post template, copy and paste the code below. Download Here

If you create a new post now, it shows you clearly where to type the summary and where to add the rest of the post. It is important to make sure that the /span tag above is at the end of the post. And you can either paste the code in Edit HTML Tab or Compose*
*For compose, make sure you have finish you writting before u insert the code


Hope my explanation in graph will provide more clearly understanding. Enjoy it.

Source: hackosphere

No comments yet