Saturday, January 29, 2011

Add Simple Tab View Widget To Blogger (JQuery)

1. Go to your blogger and click "Design" on your 
dashboard and click "Edit HTML"


2. Find these tag  by using Ctrl+F      </head>  


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






<link href='http://jqueryui.com/latest/themes/base/ui.all.css' rel='stylesheet' type='text/css'/>
<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://jqueryui.com/latest/ui/ui.core.js' type='text/javascript'/>
<script src='http://jqueryui.com/latest/ui/ui.tabs.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#tabs&quot;).tabs();
});
</script>

4. Go to layout Click page element >> Add a gadget.

5. select "HTML /java script" and copy and paste below code.

<div id="tabs">
<ul>
<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>
</ul>

<div id="fragment-1">

content 1

</div>

<div id="fragment-2">

content 2

</div>

<div id="fragment-3">

content 3</div></div>

6. Finished.save the template.

1 comment: