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.