How to hack: Add tabs to your blogger posts

See this post for the final effect, which basically looks like this:

The advantages:

• You can keep your post length short and still add a lot of content to your posts.
• The tabs are loaded along with the original article and it wont take anytime (zero time) for the user to switch between any of the pages.
• Can be applied in 5 mins.

Request: Please dont remove my sitename from the hack.Here is how to do it:

• Step 1: Go to the Template-->Edit Html---> Click download full template to take a backup of your original template in case anything goes wrong.
• Step 2: Add this code just before the /head> section of your template:
  

<script src='http://mp3mohit1.googlepages.com/tabbed.js' type='text/javascript'>
</script>
<link href='http://mp3mohit1.googlepages.com/tabbedstyle.css' rel='stylesheet' type='text/css'/>

• Step 3: Go to Settings--->Formatting-->Post Template and enter the following:

<div id="cyclelinks"></div>
<p class="dropcontent">
Content 1 here.
</p>
<p class="dropcontent">
Content 2 here.
</p>
<p class="dropcontent">
Content 3 here.
</p>
<div id="cyclelinks2" align="right"></div>

Never touch the div tags. The code is self explanatory. The Content 1,2 and 3 are displayed in Pages 1,2 and 3 respectively.

• Step 4: Save the template and you are done. Whenever you create a new post you will see the above layout.Just put the contents accordingly. If you dont want any pages in a post, simply delete all the above code from the new post.

• Step 5: Changing the color of tabs:

Download the js file from: http://mp3mohit1.googlepages.com/tabbed.js and open it in your HTML editor. Find and change the following lines accordingly

var showrecords=1 //specify number of contents to show per tab
var tabhighlightcolor="white" //specify tab color when selected
var taboriginalcolor="lightgrey" //specify default tab color. Should echo your CSS file definition.

After you are satisfied with the changes, save the file and upload it to your location choice. Remember to change the link in Step 2 accordingly.


If you have any doubts, I would be more than happy to help you out. Just drop a comment below or use the contact me form to send a mail to me. I will appreciate it if you dont remove the link to my site, since it is harmless to me and valuable to me.

Source