Selamat Datang Di Blog Bisnis Online Terpercaya www.maslukis.com


Kamis, 03 November 2016

Cara Mudah Membuat Menu Tab View Tree in one/3 Kolom


Menu Tab View Tree in one adalah menu yang bisa menampilkan tiga halaman dalam satu kotak,jadi sobat bisa mengisi tiga halaman dalam satu kotak tadi dengan widget yang berbeda.
Untuk lebih jelasnya lihat gambar dibawah ini.


Untuk membuatnya sangat mudah sekali,sobat tinggal ikuti beberapa langkah dibawah ini.

1.Login Blogger.com.
2.Buka halaman Rancangan --> kemudian klil Edit Html.
3.Selanjutnya cari kode ]]></b:skin>
Kalo udah ketemu taruh kode dibawah ini tepat diatasnya.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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;
}

4.Langkah selanjutnya sobat cari </head>
kalo udah ketemu taruh kode dibawah ini tepat diatasnya.

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5.Save template
6.Setelah template tersimpan,sobat kembali lagi ke Rancangan --> lalu klik Add Gadget ditempat yang di inginkan,kemudian pilih HTML/JavaScript untuk menaruh kode dibawah ini.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>MENU 1</a>
<a>MENU 2</a>
<a>MENU 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">
ISI HALAMAN 1
</div>
</div>

<div class="Page">
<div class="Pad">
ISI HALAMAN 2
</div>
</div>

<div class="Page">
<div class="Pad">
ISI HALAMAN 3
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan warna merah sobat bisa mengganti sesuai keinginan sobat,Mulai dari ukuran sampai isi halaman Menu Tab View Tree in one.


Baca Juga:

Comments
0 Comments

0 komentar:

Posting Komentar

 
Copyright © 2018. Info Hari Ini . All Rights Reserved
Jl. Delta Raya Utara Kav. 49 - 51 Deltasari Baru, Sidoarjo, Jawa Timur, Indonesia 61256
PT. Bimasakti Multi Sinergi