How to Add Tab on Your Blogger Page
Hello!
Doston ma hu ARYA KHAN aaj ma aap logon ko bataunga Blogger ki site ma Tab ko kese add karte ha. Or uske liya keya karna hoga.
Follow this step:
Tho sabse pehle aapko jana hoga Blogger ma phir Theme ma phir Edit HTML ma jana hoga. or uske baat aapko dhondna hoga </head> code ko phir </head> ki niche aapko paste karna hoga niche diya gaya code ko.
Step 1
Code:
<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var Halamans = Tabtampil.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 tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
document.write('');}
//]]>
</script>
Steps 2
Phir aapko jana hoha Blogger ma phir Layout ma phir Add a Gadget phir HTML/JavaScript phir code box ma niche diya gaya code ko paste kare.
Code:
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #ff0000; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 75px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "oswald", Serif;
font-size: 15px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 100%;" class="TTs"> <a>Recent</a> <a>Featured</a></div>
<div style="width: 100%; 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>
</div>
</form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Note:
Yellow colour ki code ko aapne hisab se change kare.
