How To Add Stylish Jquery Animated Three Tabs Widget On Blogger | NetBlogBox
How To Add Stylish Jquery Animated Three Tabs Widget On Blogger :-Tabs widgets generally help to help save web page space. In this Guide i will be gonna clarify how you can create Exclusive jquery Tabs widget intended for blogger. We could utilize create handful of webpages intended for Tabs widgets. jQuery dividers are very stylish and also well-known intended for blogging and site-building. This can be a basic jquery Tabs widget. My spouse and i used Css as well as jQuery to generate this particular widget.
That Tabs widget assist just about every current internet browsers. Nevertheless their definitely not assist IE. you are able to take a look at with test web page for getting idea just how this operates/Performed.
Live
Steps By Steps Follow
Firstly Login Blogger.
Go to Blogger Dashboard > Template
Find ]]></b:skin>Paste below code just below it.
You Want To Copy Code First Select And Press Key Ctrl + C
<style>
.b, .c{ display:none;}
.buttons{
border-bottom:solid #d1c8b8 4px;
display:block;
padding:8px;
width:80px;-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
text-align:center;
margin:1px;
background:#535354;
text-decoration:none; color:#FFFFFF;
float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#0a0a0b;border-bottom:solid #ffe34c 4px;}
a.buttons:hover{background:#0a0a0b;border-bottom:solid #ffe34c 4px;}
#multitab {
background:#0028ff;
text-align:justify;
overflow:hidden;
color:#fff;
padding:20px;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em; height:Automatic-fixed;
width:272px;
}
#multwrap{
text-align:left;
overflow:hidden;
width:350px;
height:380px;
}
</style>
And Code Past This After </head>
<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
$("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{
$(".b").css('display' , 'none');
$(".c").css('display' , 'none');
$(".a").css('display' , 'none');
$("#first-tab").removeClass('buttonHover');
$("#second-tab").removeClass('buttonHover');
$("#third-tab").removeClass('buttonHover');
$("#"+tab).addClass('buttonHover');
$("."+container).show('slow');
}
// ]]>
</script>
<script charset='utf-8' src='https://galaxycore2.googlecode.com/svn/trunk/Tabs.js' type='text/javascript'/>
Now Go To Layout..
Click Add Gadget and select 'HTML/Javascript'
Paste below code.
<div id="multwrap">
<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
<br clear="all" />
<div id="multitab" align="center">
<div class="a">
<em>B</em>logger is a blog-publishing service that allows private or multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com. <br /> <br /> Thanks!
</div>
<div class="b"><em>L</em>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div class="c"><em>S</em>tarting in February 2013 Blogger began integrating user blogs with multiple country specific URL addresses i.e. http://Netblogbox.blogspot.com would be automatically redirected to http://Netblogbox.blogspot.ca in Canada, http://NetBlogBox.blogspot.co.uk in the United Kingdom etc. </div>
</div> </div>
</div>
Note :- You can past any text or code with replacing above 3 different texts.
Now save your HTML/Javascript'.
That you are done And completed Performed. If you have any problem relevant to this Jquery animated Three Tabs widget. Just keep any difficulty comment. I will help to you.