! ✿BLOGGER BLOG TUTORIAL✿ !: Tutorial cara letak multitab widget pada blog [5 tab]

Tag - Multitab widget untuk blogspot,cara letak menu tabview pada blog,

Multi tab ni ada 5 tab..multi tab ni sama ja macam yang 3 tab tu..cuma aku ubah sikit coding jadi la 5 tab...kalau mau buat lebih dari 5 pun boleh..tapi kaji sendiri la..hahha

Live Demo

Cara pasang senang habes..

Mula2 pergi ke desbot --- desaign --- ada gadget --- html / javascript...copy code di bawah dan save..selesaii

<div id='polskahekjor'>
<style type="text/css">
div.P0L5K4 div.C0D3R{height: 24px; overflow: hidden;float:left;}
div.P0L5K4 div.C0D3R a:hover{ background-color: #eee; }
div.P0L5K4 div.C0D3R a.Active{background:#00ffcc;color:#ff3366;}
div.P0L5K4 div.N0T4C0D3R { clear: both; border: 1px solid #ff3366; overflow: hidden; background-color: #eee;}
div.h3ll0c0d3r{ clear: both; border: 1px solid #ff3366; overflow: hidden;}
div.P0L5K4 div.N0T4C0D3R {height: 100%; padding: 0px; overflow: hidden; }
div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R{ padding: 3px 5px; }
div.P0L5K4 div.C0D3R a{ background:#ff3366; float: left;border-radius:11px 11px 0px 0px;width: 20%; 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: #151515;}
</style>
<script type='text/javascript'>
//<![CDATA[
function P0L5K4_C0D3R(P4WN3D, id)
{
var P0L5K4 = document.getElementById(P4WN3D);
var C0D3R = P0L5K4.firstChild;
while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
var TT = C0D3R.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var N0T4C0D3R = P0L5K4.firstChild;
while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
var h3ll0c0d3r = N0T4C0D3R.firstChild;
var i = 0;
do
{
if (h3ll0c0d3r.className == 'h3ll0c0d3r')
{
i++;
if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
h3ll0c0d3r.style.overflow = "auto";
h3ll0c0d3r.style.display = (i == id) ? 'block' : 'none';
}
}
while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
}
function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
}
function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D, 1);
document.write('');}

//]]>

</script>

<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a><a>tab 4</a><a>tab 5</a></div>
<div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#ffb3c6;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 1

</div>
</div>
<div class="h3ll0c0d3r" style='background:#b3ecff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 2

</div>
</div>
<div class="h3ll0c0d3r" style='background:#FFFF99;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 3

</div>
</div>
<div class="h3ll0c0d3r" style='background:#99B3FF;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 4

</div>
</div>
<div class="h3ll0c0d3r" style='background:#E099FF;display:block;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 5

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>

Ketinggian widget ni aku set 300px..kalau mau tinggi lagi ejas no 300px yang aku kasi besar tu..tulisan tab 1 tab2 tab3 tab4 tab5 tu tukar la ikut suka2 hati kekekekekekekeke.....

senangkan