Cara buat tab view menu

buat menu tab view

Posting kali ini adalah membuat tab menu view yang mana sesuai dipasang pada blog yang mempunyai side bar yang luas.Pemasangan menu seperti ini adalah menjimatkan ruangan kerana menu disatukan secara tab pada satu tempat.Satu lagi kelebihan menu ini adalah tidak perlu mengedit template,Cuma di masukkan pada add gadget.Jadi lebih mudah untuk membuatnya tanpa perlu khuatir tidak berfungsi setelah membuatnya.Cuma kita perlu mengubah sedikit saiz dan juga warna pada kod agar bersesuaian dengan template kita.  
jika sekiranya berminat untuk membuatnya ikuti langkah ini:

Masuk  keblogger
Pilih design->> Page Element(Untuk dashboard baru pilih...Layout...add a gadget)

Add a Gadget
Pilih  HTML/Javascript
Dan masukkan kod ini
<style type="text/css">
div.TabView div.Tabs
{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:8px; vertical-align:middle; border:1px solid #BDBDBD; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab  1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab  3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Cara memasukkan tajuk dan link posting pada menu:

pada bahagian kod Tajuk 1,tajuk2 dan tajuk 3 tukarkan dengan tajuk menu anda

Kemudian pada isi menu tab 1,isi menu tab2 dan isi menu tab 3 anda perlu masukkan link posting padanya.
Untuk mendapatkan link posting anda boleh dapatkan pada ruangan alamat dibrowser semasa membuka posting.

Contoh alamat atau link posting artikel
http://teknikbuatblog.blogspot.com/2010/08/cara-buat-tab-view-menu.html
anda perlu ubah kepada:

<a href="http://teknikbuatblog.blogspot.com/2010/08/cara-buat-tab-view-menu.html " target="_blank">cara buat tab view menu</a>

teks berwarna oren adalah tajuk artikel---tukarkan dengan tajuk posting anda


cara letak link seperti pada blog saya:

KEMBALI KEATAS


Kemudian klik save

Update 25 November 2012

Catat Ulasan

30 Comments:

Hendra Saputra berkata...
terima kasih atas kunjungan

pertamax..
tks sob...

tips ny sangat bermanfaat, dr kmren2 nyari yang sprti ini...
mw lgsng dicoba...

Anggasona berkata...
terima kasih atas kunjungan

sip sob infonya, penting ni menu tab view biar hemat tempat... :D

yahaya berkata...
terima kasih atas kunjungan

@Hendra Saputraterima kasih kerana berkunjung.

yahaya berkata...
terima kasih atas kunjungan

@Anggasonablog sobat juga banyak ilmu yang saya dapat.makasih atas komen.

mimi berkata...
terima kasih atas kunjungan

nice post sahabat

yahaya berkata...
terima kasih atas kunjungan

@mimi
makasih kembali,

Ian78 berkata...
terima kasih atas kunjungan

Coolll....

http://punyasaya-punyasaya.blogspot.com

izee berkata...
terima kasih atas kunjungan

xjadi ..cmner nk msuk kan link2 yg nak tu..

izee berkata...
terima kasih atas kunjungan

mcm mana nak letak tajuk yg kita post dlm setiap menu ni?help me

izee berkata...
terima kasih atas kunjungan

cara nak msuk kan link post pd setiap menu cmner yer?

Berry Chuka Chuka berkata...
terima kasih atas kunjungan

makasih kak...
tapi ga begitu sempurna hasilnya..
maklumlah newbie..
Http://mybherry.blogspot.com

syieda :) berkata...
terima kasih atas kunjungan

camner nak tuka lebar kotak menu tab ek?

yahaya berkata...
terima kasih atas kunjungan

@syieda :)
tukar pada width..pada kod diatas.

Tanpa Nama berkata...
terima kasih atas kunjungan

macam mana nak buat tabview tampa scroll kat tepi,(show semua conten)(saiz kotak membesar dan mengecil mengikut kandungan tab)

saya pasang kodni kat wordpress dibawah setiap posting untuk tunjuk Description, senarai harga dan review,

Harap Yahaya dapat bantu

yahaya berkata...
terima kasih atas kunjungan

@Anonymouswordpress saya x pandai sgt..

Tanpa Nama berkata...
terima kasih atas kunjungan

Saya Anonymous diatas

merujuk soalan saya diatas:
"macam mana nak buat tabview tampa scroll kat tepi,(show semua conten)(saiz kotak membesar dan mengecil mengikut kandungan tab)"

kalau Yahaya boleh bagi scrip untuk blogspot pun tak pa.Saya boleh pasang kat bolgspot saya.

======================

(ps:Scrip diatastu boleh guna kat wordpress, copy & paste kat widgets je, terus jadi)

MeTaFoRa berkata...
terima kasih atas kunjungan

kalu dah ada menu nie.. macam mane nak adjust plak...

yahaya berkata...
terima kasih atas kunjungan

@MeTaFoRakat bahagian kod diatas ada ditandakan cth /* Warna background Menu Utama Atas */ kalau nak ubah warna menu utama ubah lah kat sini..

GIE berkata...
terima kasih atas kunjungan

Link anda sudah ada di blog saya, sudi kiranya anda berkenan menampilkan link saya di blog anda yang cerdas ini. terima kasih. ( http://sebutsajagie.blogspot.com/ )

geekz36 berkata...
terima kasih atas kunjungan

hurm, keluar 2 tab je. komen?

yahaya berkata...
terima kasih atas kunjungan

@geekz36saya cuba pada blog saya yg lain ok tak ada masaalah

syed berkata...
terima kasih atas kunjungan

salam en yahaya.macamana nak buat kedua-dua
vertikal dan horizontal scroll pada setiap posting.terimasih.

beautystore-online berkata...
terima kasih atas kunjungan

yg u tunjuk just for 3 tab view menu.kalau saya nak tambah lagi 2 tab view menu nak wat mcm mana yer.utk jdkan ia 5 tab view menu.thanks

yahaya berkata...
terima kasih atas kunjungan

@Big Boy Playgroundcaranya adalah seperti imej dibawah..
pada bahagian kod diatas ada isi menu tab 1..jadi letakkan link posting kita pada bahgian ini..seperti pada imej dibwah

Tirtayasa berkata...
terima kasih atas kunjungan

Aslm..mw nanya cara membuat blog lwat hp gmna trus cra ngedisen ya gmna?

Rudy Hartono berkata...
terima kasih atas kunjungan

informasinya sangat membantu untuk diterapkan pada blog

Zulkbo zulkboCom berkata...
terima kasih atas kunjungan

salam..
bagaimana nak buat butang jadi
curve sedikit macam blog Bro?


www.zulkbo.com

Fokus Impian berkata...
terima kasih atas kunjungan

@Zulkbo zulkboCom waalaikumsalam zulkbo.....
saya tukar kod ni..
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD

kepada

div.TabView div.Pages {clear:both; border:5px ridge #BDBDBD

Zulkbo zulkboCom berkata...
terima kasih atas kunjungan

@Fokus Impian

Okey..
terima kasih reply Bro
amat berguna :)

hawa eva nescafe dan diary berkata...
terima kasih atas kunjungan

TQ untuk tutor ni