Simple jQuery Tab View Widget For Blogger

Posted by Lasantha Bandara on September 3rd, 2009 File Under : jquery, widget0 Comment

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<link href='' rel='stylesheet' type='text/css'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="tabs">
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>

<div id="fragment-1">

content 1


<div id="fragment-2">

content 2


<div id="fragment-3">

content 3



You are done .It will look like this:

File Under : jquery, widget

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.