This Tutorial We Discuss How Add pure
Css Stylish multi Tabbed
Widget In Blogspot Blog.its Amazing Stylish Tabbed Css Stylish,we Genrate Pure
Css And Working 100% Sure its Working.When You start This And done So appear 3 Tebbed
Widget.You can add own Documents and news,Or Bio author In This Tebbed
Widget.Mostly People Add facebook Like Box And Follower Box In this Tabbed.i Hope You Understand About How We Can Use This,its Easy And Simple just When Put your Blogger Dont Try Changing
Css Code Only Highlight code you will be Change,and Add you
Widget in The Tabbed .so lets move To tutorial how Add this ,just Follow Below Given instructions.you can see Below,And will be Done This Easy.you can see Malti Tabbed
Widget In live DEMO given Below.
LIVE Preview & Demo:
How ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR:
Follow These Steps:- 1. Go to Design >> Page Elements >> Add a gadget, then choose >> HTML/JavaScript.
- 2. Paste Below code Empty inside It.
- 3. Code is Below.
<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
var NewBloggerTips = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
var NBT = NBTs.firstChild;
var i = 0;
do
{
if (NBT.tagName == "A")
{
i++;
NBT.href = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
NBT.className = (i == id) ? "Active" : "";
NBT.blur();
}
}
while (NBT = NBT.nextSibling);
var Halamans = NewBloggerTips.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2 Title</a> <a>Tab 3 Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.matrixar.com/' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.matrixar.com/' target='_blank'>IBT</a></small>
</div>
</div></form>
<script type="text/javascript">Tips_inisial('NewBloggerTips');</script>
How Customization This Code:
- Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title Any.
- Replace Tab 1,2,3, Content goes here with your widget code Such As like Box..ETC....
- Change width: 300px; height: 300px; with your need.
- If You Want To change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.
Done This And Save...If You like This So Feedback in Comments.
Join This Group.....
