How To Add Jquery Multi Tab View Widget For Blogger

By : Follow Trends

On : 9/02/2015

In : Widget

0 comments

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

2.  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>

You can replace Script or Text Here  with text or any script you want.

8.  After save HTML/Javascript 
you are done.