1.Log in to your dashboard--> Desing- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add 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();
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />
5.Save your template
6.Now Go to Desing --&-- Page Elements.
7.Click on 'Add a Gadget' on the sidebar.
8.Select 'HTML/Javascript' and add the one of code given below
<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>
<div id="tabs-1">Your text or script here</div>
<div id="tabs-2">Your text or script here</div>
<div id="tabs-3">Your text or script here</div>
</div>
Note: Replace Tab,Your text or script here with your content.
8.Now save your "HTMl JavaScript" you are done..
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add 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();
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />
5.Save your template
6.Now Go to Desing --&-- Page Elements.
7.Click on 'Add a Gadget' on the sidebar.
8.Select 'HTML/Javascript' and add the one of code given below
<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>
<div id="tabs-1">Your text or script here</div>
<div id="tabs-2">Your text or script here</div>
<div id="tabs-3">Your text or script here</div>
</div>
Note: Replace Tab,Your text or script here with your content.
8.Now save your "HTMl JavaScript" you are done..
0 Response to "How To Add humanity Tabbed Navigation Widget To Blogger"
Post a Comment