Selamat Datang Diucapkan Kepada Semua Pengunjung Blog Ini Segala Komen Dan Saranan Teman Teman Amat Seri Hargai

Panduan Membuat Tab Menu Tiga Halaman

Widget ini amat sesuai di pasang pada blog yang mempunyai sidebar berukuran 200px lebih. Kelebihannya dapat menjimatkan ruang, mudah di pasang serta boleh di ubah mengikut kesesuaian blog.

Contoh Gambar Tab Menu Tiga Halaman


Panduan Memasang:

Masuk ke Blogger

Klik Tab Design

Klik Tab Add a Gadget

Pergi ke HTML/JavaScript dan klik untuk menampilkan satu pop-up


Salin kode dibawah ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 93px; /* Lebar Menu Utama Atas */
text-align:center ; height: 20px; /* Tinggi Menu Utama Atas */
padding-top:3px; vertical-align:middle; border:0px solid ; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#0B610B; /* 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:#FF0066; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:2px solid #BDBDBD; /* 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: 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>Pantun</a>
<a>Sajak</a>
<a>Chatbox</a>
</div>
<div style="width:280px; height:200px; " class="Pages">
<div class="Page">
<div class="Pad">

<p><a href='http://www.seribahasa.com/2010/05/pantun-anak-dagang.html'>Anak Dagang</a></p>
<p><a href='http://www.seribahasa.com/2010/12/dialog-dengan-hang-jebat-derhaka.html'>Hang Jebat Derhaka</a></p>
<p><a href='http://www.seribahasa.com/2009/08/kisah-sirih-pinang.html'>Sirih Pinang</a></p>

</div>
</div>
<div class="Page">
<div class="Pad">

Letakkan KODE bahagian ini

</div>
</div>
<div class="Page">
<div class="Pad">

<marquee style="background-color:#CCFF99; border-width:0px; border-style:none; height:20px; font-family:tahoma; font-size:10pt; text-color:red; "direction="left" behavior="alternate" scrollamount="5" >♣Eh!...Apa hang tulis tu??♥</marquee>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="280" height="375" src="http://www6.cbox.ws/box/?boxid=397579&amp;boxtag=sql4js&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#CCFF99 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="280" height="80" src="http://www6.cbox.ws/box/?boxid=397579&amp;boxtag=sql4js&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#CCFF99 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

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

Catatan:
Warna Merah - Rujukkan untuk membuat pengubahsuaian. Sila delete/hapus semua yang bertanda MERAH sebelum membuat pemasangan.
Warna Biru - Untuk mengubah ketinggian dan lebar kotak.
Warna Purple - Tajuk Di Menu Utama
Warna Kuning - Ruang tempat kode script. Contoh seperti tulisan berwarna kuning.

Masukkan kode diruangan yang bertanda merah kemudian klik Tab SAVE

Lepas itu tekan sekali lagi Tab SAVE sebelah atas kanan. Kemudian klik View Blog.

15 Pandangan:

biskut Januari 22, 2011  

hurmm...dari dulu nak buat tab menu nih.tanx for ur share.

biskut Januari 22, 2011  

lupa nak tanya...

perlukah diubah ayat-ayat dalam tutor tuh untuk kesesuaian blog sendiri...?

Seri Bahasa Januari 22, 2011  

biskut@ ubah yang berwarna saja dan yang merah delete/buang sebelum pasang widget tu.

wawank Januari 22, 2011  

Nanti aku coba di blogku.., makasih ya,!

bee Januari 22, 2011  

kalau nk letak shoutbox, badge facebook dan badge network blog mcm mana ek seri ?

Seri Bahasa Januari 22, 2011  

bee@ boleh masukkan je kode aplikasi tersebut tapi nak adjust ukuran ikut widget tab tu.

~~su manje~~~ Januari 22, 2011  

salam ...
thanks sudi singgah ...\
blum ada mood nak pantun...

bee Januari 22, 2011  

oh ok bee try lah nanti..hikss...dah byk kali try tutor dr blog lain tk funtion tau!

seri jom tukar link..hehee

bee Januari 22, 2011  

oh utnuk pantun dan sajak tu..bee tak nk nak gantikan dgn badge nk buang kod dr mana yer ?

Tuan-Belog Januari 22, 2011  

wow...tutoril bru lg...bgus btol seri eh...

bee Januari 22, 2011  

Ok ..tenkiu..bee dah buat hehe ...dah jadi pun!

papabear Januari 22, 2011  

pernah guna ni dulu. memang nampak kemas tapi visitor malas nak masul tab lain2 kecuali terpaksa... :)

Yastro Februari 06, 2011  

Nak buat satu colum jer...just nak letak list nama rakan2 blogger....errr mohon bantuannn!!!!
Rasanya blog yas tu berat sikit arrr...thanks.

xDer Januari 12, 2012  

best la seri ni :D dah buat. menjadik pulak. 2 tips kat sini dah cuba & menjadik! makin sayang... hehe

Teman Setia

This Blog Is Proudly Sponsored By SURF7 Template Modified By Seri Bahasa Proud To Be A Kinabatangan Blogger