Cara Nak Buat Tab Menu Horizontal View (3 Column) atau Tab Menu Bersusun Secara Melintang | Miss Durian Runtuh

Jan 31, 2011

Cara Nak Buat Tab Menu Horizontal View (3 Column) atau Tab Menu Bersusun Secara Melintang

Salam. Harini nak ajar cara buat tab menu horizontal view 3 column. Aku letak je nama horizontal view sebab kan tab menu ni bersusun sebelah-menyebelah. Okey, tab menu jenis ni memang aku cari merata dan terjumpa di blog blogger Indonesia. Mula-mula aku jumpa tab menu ni ni blog MariBinaBlog dan kemudian tengok blog Lionteen pon pakai tab menu ni, so, aku pon teruja nak buat jugak. Okey, jom belajar :

Pertama
Suke diingatkan, sila backup dulu template dengan download template korang DAHULU.
Buka Design --> Edit HTML --> Tick Expand Widget -->  Cari (Ctrl+F) ]]></b:skin>
Kemudian, copy & paste kod di bawah ni DI ATAS ]]></b:skin>

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;
}
Untuk warna border & font tu boleh rujuk SINI. Pilih la warna kesukaan korang. Lebar tinggi menu pon korang boleh ubah ikut blog korang sampai jadi lawa.

Kedua
Cari (Ctrl+F) kod </head>
Kemuadian copy & paste kod di bawah ni DI ATAS </head>
<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>
 Kemudian save.

Ketiga
Buka Page Element --> Add a Gadget --> Pilih HTML/Javascript.
Copy Paste Kod di bawah ni dalam HTML/Javascript itu.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>TAB 1</a>
<a>TAB 2</a>
<a>TAB 3</a>
</div>
<div class="Pages" style="width: 256px; height: 400px;">

<div class="Page">
<div class="Pad">
KOD 1 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
KOD 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
KOD 3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>
Then, boleh ubah width & height itu. Then, Save. Preview la tengok cantik ke tak. HE HE. Kalau nak buat 2 column je, buang la bahagian TAB 3 & KOD 3 tu. TAB 1 2 3 untuk Tajuk Tab, KOD 1 2 3 untuk isi widget atau apa-apa sahaj macam Recent Comments dan lain-lain.

Sumber : Centro


7 Flowers:

nabilah_2908 said... Reply Comment

cepatnya..baru semalam request.. :)

thnks yupp...agak complecated gak caranya...tkpe..tkpe...cuba gak...

nampk smart tab ni.. :)

jom ke APA KATA HATI pulak,
HARI MENTERNAK LEMAK - PART 2

nescafe_ais said... Reply Comment

nice....nfo yang menarik...kat indon barun jumpe eh...hehe

♛ Kerani Sekolah ♛ said... Reply Comment

@nabilah_2908

same2. hehe..memg agak byk kod..tpi senang je kak.try la nanti..

♛ Kerani Sekolah ♛ said... Reply Comment

@nescafe_ais

dekat blog maribinablog pon byk tutor cume mcm complex...heheh

MamaLieza said... Reply Comment

Dik, mana nk dapatkan kod utk post ngan comment tu?

♛ Kerani Sekolah ♛ said... Reply Comment

@MamaLieza

kakak, amik kod kat entri ni :)
http://suzuran89.blogspot.com/2011/03/kod-recent-post-dan-recent-comments.html

.::: Princess MOMOY :::. said... Reply Comment

dah lama cari tuto nih
tapi nak buat tak cukup column lagi nak letak apa