29.12.12

Tutorial : Simple Tab Menu

Author : Nabila Medan Time : 12/29/2012 09:00:00 PM Total Comment : 13 Label :

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Malam

Live Preview Here

<style>
.tabmenu1 {
text-align:center;
width:260px;
color:#333333
}
a.tabmenu {
cursor:vertical-text;
background: pink;
width:84px;
text-decoration:none;
color:#333333;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font:12 georgia;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.tabmenu:hover {
background: #000;
color:#fff;
-webkit-transition-duration:0.5s;
}
#menu img { max-width:260px;}
 </style>
<center><div class="tabmenu1">
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >TAJUK 1</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >TAJUK 2</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >TAJUK 3</a>
<div id="menu" style="width:260px;color:#333333;font:12px verdana;">
WELCOME
</div>
<div id="nav1" style="display: none;">
ISI 1
</div></div>
<div id="nav2" style="display: none;">
ISI 2
</div>
</div>
<div id="nav3" style="display: none;">
ISI 3
</div></div>

</div></div>
1.Edit dekat http://htmledit.squarefree.com/ .
2.Dah selesai edit , paste dekat HTML/Javascript
*Dashboard > Layout > Add a Gadget > HTML/Javascript*
3.Pastikan bila korang dah paste jangan click 'Rich Text' sebab nanti dia takjadi
4.Nabila sarankan korang tukar code yang berwarna merah je. Kalau takpaham boleh tinggalkan komen.

13 comments

Saturday, December 29, 2012 9:15:00 PM Delete! [Reply Comment]

dah lama crikk..thnks budak comey

Saturday, December 29, 2012 9:27:00 PM Delete! [Reply Comment]

@sHaRiNa eLyaNa Hehe. sama-sama budak comot ;p

Saturday, December 29, 2012 9:32:00 PM Delete! [Reply Comment]

Thanks. Baru nak request buat tuto ni ^^

Saturday, December 29, 2012 10:45:00 PM Delete! [Reply Comment]

salam sis..mcm mna sis buat blog untuk preview tu ek?? :)

Sunday, December 30, 2012 12:54:00 AM Delete! [Reply Comment]

Isi 1, 2, 3 tu apa kak :S

Sunday, December 30, 2012 5:25:00 PM Delete! [Reply Comment]

Macam mana nak letak follower widget dalam tuh ek ?

Monday, December 31, 2012 11:00:00 PM Delete! [Reply Comment]

@Nabila Medan comot !! hahaha..:P

Thursday, January 03, 2013 10:20:00 PM Delete! [Reply Comment]

TQ 4 tuto dek ! ! Mula2 akk mmg x phm tp lme2 akk dpt jgk buat :)

Saturday, February 16, 2013 8:08:00 PM Delete! [Reply Comment]

mcm mana nak letak widget follower dalam tu ye?? tlg bantu...

Sunday, February 17, 2013 1:24:00 AM Delete! [Reply Comment]

Kalau nak letak 4 tajuk macam mana eh? Hana try dia sambung ke bawah.

Saturday, March 02, 2013 4:51:00 PM Delete! [Reply Comment]

salam NM.. kod nak letak kat mana? ISI tu nak letak apa ya? thanks :)

Friday, March 15, 2013 8:11:00 PM Delete! [Reply Comment]

thanks.. jadilah =D

Thursday, June 13, 2013 10:29:00 PM Delete! [Reply Comment]

ilmu yg amat berguna tu

Post a Comment
Related Posts Plugin for WordPress, Blogger...