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...
Teknik Buat Blog

pertamax..
tks sob...

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

Anggasona berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

@Hendra Saputraterima kasih kerana berkunjung.

yahaya berkata...
Teknik Buat Blog

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

mimi berkata...
Teknik Buat Blog

nice post sahabat

yahaya berkata...
Teknik Buat Blog

@mimi
makasih kembali,

Ian78 berkata...
Teknik Buat Blog

Coolll....

http://punyasaya-punyasaya.blogspot.com

izee berkata...
Teknik Buat Blog

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

izee berkata...
Teknik Buat Blog

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

izee berkata...
Teknik Buat Blog

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

Berry Chuka Chuka berkata...
Teknik Buat Blog

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

syieda :) berkata...
Teknik Buat Blog

camner nak tuka lebar kotak menu tab ek?

yahaya berkata...
Teknik Buat Blog

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

Tanpa Nama berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

@Anonymouswordpress saya x pandai sgt..

Tanpa Nama berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

GIE berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

hurm, keluar 2 tab je. komen?

yahaya berkata...
Teknik Buat Blog

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

syed berkata...
Teknik Buat Blog

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

beautystore-online berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

@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...
Teknik Buat Blog

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

Rudy Hartono berkata...
Teknik Buat Blog

informasinya sangat membantu untuk diterapkan pada blog

Zulkbo zulkboCom berkata...
Teknik Buat Blog

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


www.zulkbo.com

Fokus Impian berkata...
Teknik Buat Blog

@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...
Teknik Buat Blog

@Fokus Impian

Okey..
terima kasih reply Bro
amat berguna :)

hawa eva nescafe dan diary berkata...
Teknik Buat Blog

TQ untuk tutor ni