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.

Share :

Facebook Twitter Google+