How To Add Stylish J-Query Multi-Tab Widget For Blogger & Website

1. Log in to your blogger and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates” 

3. Find this tag by using Ctrl+F </head>
4. Paste below code Before </head> tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
<script> $(document).ready(function() { $("#tabs").tabs(); }); </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css"/>

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="tabs">
<ul>
<li> <a href="#tabs-1">Tab-1</a></li>
<li> <a href="#tabs-2">Tab-2</a></li>
<li> <a href="#tabs-3">Tab-3</a></li>
</ul> 
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div> 
<div id="tabs-3">Script or Text Here</div>

8. You can replace Script or Text Here with text or any script you want.
9. After save HTML/Javascript
10. You are done.

sumber : netzpot