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.

Read More ...