Hay Sobat Blogger :D
kemaren ADMIN share Cara Memasang Gambar Di Samping Judul Postingan Sekarang Admin Share Cara Membuat Tab View Menu Di blog Seperti Punya Admin Di atas Ini :D hahaahah pasti sobat blogger mau tau kan Cara nya:D hahaah Liat Langkah nya di bawah ini
Silahkan login ke blogger dengan ID sobat tentunya.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>
Tulisan Warna Kuning Itu Petunjuk yg mau di ganti dan sudah di ganti sobat hapus aja Tulisan yg warna kuning klo tidak mau ganti gpp tpi hapus tulisan yg warna kuning
Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
Sekian Cara Membuat Tab View Menu Di blog semoga bermanfaat ^^ dan jangan lupa tinggalkan jejak kalian ya dengan cara komment dan like postinan ini
kemaren ADMIN share Cara Memasang Gambar Di Samping Judul Postingan Sekarang Admin Share Cara Membuat Tab View Menu Di blog Seperti Punya Admin Di atas Ini :D hahaahah pasti sobat blogger mau tau kan Cara nya:D hahaah Liat Langkah nya di bawah ini
Silahkan login ke blogger dengan ID sobat tentunya.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>
<script type='text/javascript'>Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
//<![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>
div.TabView div.TabsKeterangan :
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */ padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */ border-bottom-width: 0;
text-decoration: none;
font-family: "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: #2400ff; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #000; /* Warna border Kotak Utama */ overflow: hidden;
background-color: -transparent; /* 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: 3px 5px;
}
Tulisan Warna Kuning Itu Petunjuk yg mau di ganti dan sudah di ganti sobat hapus aja Tulisan yg warna kuning klo tidak mau ganti gpp tpi hapus tulisan yg warna kuning
Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
<form action="tabview.html" method="get">Lalu Simpan Dan lihat Hasil nya :)
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Sekian Cara Membuat Tab View Menu Di blog semoga bermanfaat ^^ dan jangan lupa tinggalkan jejak kalian ya dengan cara komment dan like postinan ini
