Cara Membuat Menu Tab View Pada Blog Tanpa Mengedit Kode HTML

Cara Membuat Menu Tab View Pada Blog Tanpa Mengedit Kode HTML

membuat Menu Tab View pada postingan cukup membingunkan, silahkan coba Tutorial Membuat Menu Tab View tanpa Edit HTML Blog berikut.

Cara ini cukup mudah karena kode yang dipakai hanya diletakkan di Elemen Laman, berikut tutornya......

• Log In dulu ke akun Blog anda

• Pada halaman dasbor blog anda, Klik "RANCANGAN"

• Klik "TAMBAH GADGET"

• Klik tanda PLUS (+) pada "HTML/JavaScript"

• COPAS kopi Copy Paste semua kode dibawah ini lalu paste pada kotak HTML/JavaScript anda. berikut kodenya :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 81px; /* Lebar Menu Utama Atas */
text-align:center ; height: 25px; /* Tinggi Menu Utama Atas */
padding-top:8px; padding-right:2px;vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Trebuchet ms", verdana, Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>MENU 1</a>
<a>MENU 2</a>
<a>MENU 3</a>
</div>
<div style="width:253px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>




Silahkan edit sendiri kodenya pada tanda keterangan yang berwarna merah

SEMOGA BERMANFAAT UNTUK ANDA !!!