Tutorial wat horizontal Kawaii menu tab (navigation bar) Lip lap lip lap Super cute canggih

Ni tutorial utuk kawai Menu Tab.

yang bawah ni lah yang Aisyah nak ajarkan.... Ni semue menu tab dari Wan Hazel

100 peratus dari abg Wan Hazel

Mari kite mulakan

Dashboard > Add a Gadget > HTML

gadget yang paling atas

paste kod nie dalam Gadget HTML korang tu..

<div class='clear'></div><div class='widget html' id='html1'><div class='widget-content'><script type="text/javascript">function MM_swapImgRestore() { //v3.0var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}
function MM_findObj(n, d) { //v4.01var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);if(!x && d.getElementById) x=d.getElementById(n); return x;}
function MM_swapImage() { //v3.0var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script><a href="http://wanhazel.blogspot.com/2011/03/tutorial-wat-horizontal-kawaii-menu-tab.html"title="Get This " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get This','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIy5UCT12u9YBRyrsYdX8HacYE3LKCbfZGyVKA3X2ya1DoZNUodLjei07NJmKJ36U2Fb4LGWBMpUVDZUawqiH38STQHdGyXotnrlnfF9lPl2tTD1TW88Pn3RZhdZmGl1AZzJENvtx1ddQ/s1600/wan+1.gif',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6Cyq8kNcR-N41J4epySxkmgA20cdVcblBysvnGqyX_ZgbF_EQDt5aSS-WuYAwcKc4Fqa66S43LxEZ5-PUDabU3394Si97Tsl-_ZdLckG09z3nHv2fsPal0osgt7v_WsY3ltCD9lXZztg/s1600/wan.gif" alt="Get This" name="Get This" width="24" height="24" border="0" /></a>

Ok dah selesai copy..Yang nie korang pilih nak guna yang mana satu...Dan letak dibawah kod diatas tadi..Kod yang korang copy dalam Gadget HTML tu..

<a href="LINK BLOG KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Home','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuRMiY3byjmDLzFme5GpgK6eM5P8WcSH0bBNJxWrIRo6JNZA-Vq7Gp_iDxOc3MPrgyTYbZyvIIpnQQa19_JyMJaurNu3TmCSKJg8a1dOz023wzhuHYeVVMIjE08_NEAmwzyarbAwNNrg3j/s1600/home1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRlvodkD-1xgH7M456S_i8bRNBNherEQ-uFMFQp1yN8eyjnS841ajPDt1Mh4Mj1RSreC-CAiRzc-Y4lv_BWU2tHyhlTVY3J5hJfjr_opAiGBTQSpSW7j-_t_cEW8W9mCU2ay7ab-Wn6nv/s1600/home.png" alt="Wan Hazel Home" name="Wan Hazel Home" width="110" height="80" border="0" /></a>

<a href="LINK PAGE PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Profile','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihW1YO_OzSiePniA8LhKPx6rpB6PhsJd7gXQJ4G7p6UgIlkDjTPbjchoD5CqYUVnrvHNQ1aPS5-EC1ifZ3gNBm5shb1q-lkaqBbShGsilcHBB_Ds9lTRWjRXffnagE3wfbpNuK9gHMe06I/s1600/Profile1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuudF99AbS6glWK_uK2HNp2zVAexygBLuRH_cMRBQPrcZILFhsFLok_5NeJpUQfjkzOGArqM_lYw42uk7M94vxQrE9NvpU4Jt88Uetzp7K5fT4Cq_5NZ1Cuzy3RJiKGwCFIlAVVBCqEWVj/s1600/Profile.png" alt="Wan Hazel Profile" name="Wan Hazel Profile" width="110" height="80" border="0" /></a>

 

<a href="LINK PAGE BANNER KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Banner','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOqRXwrwGwsKtmKIpMVwYHiApToNNIJMJm2jd7bkEz0n-Lf62SdrluTnmNDb3rVrFZJN6XCF7nKzjkS9pfv6kpL-vHNrH-1SM3EVEUCO0z9_QCQlQGXYputgkF47ZozyM7MsD3ZksQQk3/s1600/banner1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM-MxZ_kE7hY2ghaOrfHnkRK8JCIRk9dm4vsGGrfNGRd0YTyCvvDn2U8LM-G0npw70lsnnMmAHD2KAxlbjB5_avAxTsRpqnN51oUfSWXxHo4q0Kghl8BUygHypYpawce6PG-HBCLozmsOu/s1600/banner.png" alt="Wan Hazel Banner" name="Wan Hazel Banner" width="110" height="80" border="0" />

</a><a href="LINK PAGE LINK KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel LINK','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04RsexBjI9OxzBuOB5Ot5v-r1Wrl20gzBJbB5_eNYk9AKEdS8_wVuzP53CxkaA1A_dIGBT85VhwGRJkMSQnNfwigAuJ21twufNgldKf5fG4PzwhZOrb-Y1F9HlvPcJ4sT6XXFXUM9kL3I/s1600/Link1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYisboaarFWC5LtDI2rVvfneStbjf-Y60b7I5PRcj6GFywWZEm8jFEuro83wFlgvbLnq3rYJNNfN4wBcGvtsq-lVliTXiA-2cBk-CTkbgXcmZO4RLQk8zLLLHJzR3ts7CeH6-_DFXqzVco/s1600/Link.png" alt="Wan Hazel LINK" name="Wan Hazel LINK" width="110" height="80" border="0" /></a>

 

<a href="LINK FACEBOOK PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Facebook','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLy3PtOoCcxb6U3fkoifFj7cqq4Fffw0mj-Lkh5OsylWE6c1u7LrnVacQ37VfCWxrt_1l5Rio8qHOSGEpETpwehIvm2iAFi5nq_Q6eeQ6Xi1LDa2qgdvjnh2kC3xqfifr4vjTExU48RjoD/s1600/facebook1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxUSWVga_zIHwQdllqr7EuDwCYzyKABxqiKvJgDIYOF1kT0xaORcr5p0zR1PnSvYN0YRfxxDkldy15fyLuPeJGHI3eHPMk39QTGwhOA4vGn6myfzOv1KNN21J5325EFNmIHPeeVqZnk4r8/s1600/facebook.png" alt="Wan Hazel Facebook" name="Wan Hazel Facebook" width="110" height="80" border="0" /></a>

<a href="LINK TWITTER PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Twitter','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigXbBR-twQPviQuzvwgPpeXw3jfGmhuHv4Z1MH2cFmRK1hxaqdqXQ5hUizpA6h7mHs96ZN9kBgwOe8CD-4IwdlwUvWFPohMs_SxC59Olk8gt9NjZAw8u1iq4PNxaRTZsAMn7_rqBnIwINu/s1600/Twitter1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK1sROIl5fHZmHLy3l5yCIw24Gjo-yzDamoWPmHEKzWRcDepGbE_0-lgjXHmlmWgLUK6TSjCTrZrXoMnh9WmCnEeI21h-wf05d2wNTFM4f0wGeojTpzLHMZPEwT5fAVNcJrocE7N61IjdC/s1600/Twitter.png" alt="Wan Hazel Twitter" name="Wan Hazel Twitter" width="110" height="80" border="0" /></a>

<a href="PAGE TUTORIAL KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Tutorial','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghxN0pXG6hHP02Cxk9J-JZG9Au9L8IMlauc-NaAye7cC6LYI8Wu-U-5WjPMuA9RrwuA4A8scx6Bkx60wlD4DBh7i1CMILb0Ne0ALbvbVjcege1uAZNaR-M-GVFfkj2oOaQz2SGCxkr0Gg/s1600/tutorial122.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlb9IZ_9bXook-Tiynq3PeFGFr_8d8hELL_-hdKaAyScKZu9wRqTammJkXr_nFoPn3mzV1Lx5hEcTnCcs0bk0d3fEUhth0lQ5yp5CM8mLVwpR3V1YuZI18vQ5dFk9Wqhi_wGNJFYn2sU4/s1600/tutorial12.png" alt="Wan Hazel Tutorial" name="Wan Hazel Tutorial" width="110" height="80" border="0" /></a>

 

<a href="LINK FROMSPRING KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel fromspring','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2FRfkIEtSuqZdsV5T0zQbuhVbP26hIicFG2sGnKFe3eJbYadcJ7TO_aFjbx5MkTDk_P8EM7tvRdEzQOmX-5zl87wR6CYe7bRpXa2zBzhQTacgFUZC8vyychLQsFP_IOgHQu8vP9twc-wP/s1600/fromspring1.png',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisNFcW2x6msC9MtpGTHI_BEx7VwL3QVOghFSWNOuS-oCFg2uO3eFO2sS-WpspOdXOclJv16ugcPWghBaZI94MOXhyphenhyphenpMcHXOLbPOD5BBST2zeW3_I7ApTzPelct4VYb0vVkF31rygGzhCW/s1600/fromspring.png" alt="Wan Hazel fromspring" name="Wan Hazel fromspring" width="110" height="80" border="0" /></a>

 Ok law dah pilih and dah letak semua yang korang nak dalam Add gadget HTML tu..Korang copy Kod yang kat bawah nie lak..mesti Law tak copy tak jadi punya..Kod kat bawah nie untuk tutup ke semua kod diatas..so letak paling bawah k..

<a href="http://wanhazel.blogspot.com/2011/03/tutorial-wat-horizontal-kawaii-menu-tab.html"title="Get This " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get This.','','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBIy5UCT12u9YBRyrsYdX8HacYE3LKCbfZGyVKA3X2ya1DoZNUodLjei07NJmKJ36U2Fb4LGWBMpUVDZUawqiH38STQHdGyXotnrlnfF9lPl2tTD1TW88Pn3RZhdZmGl1AZzJENvtx1ddQ/s1600/wan+1.gif',1)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6Cyq8kNcR-N41J4epySxkmgA20cdVcblBysvnGqyX_ZgbF_EQDt5aSS-WuYAwcKc4Fqa66S43LxEZ5-PUDabU3394Si97Tsl-_ZdLckG09z3nHv2fsPal0osgt7v_WsY3ltCD9lXZztg/s1600/wan.gif" alt="Get This." name="Get This." width="24" height="24" border="0" /></a>
<div class='clear'></div></div>

Note di bawah yang blockquote tu kotak tu:

Yang warne merah tu korang boleh tukar kod yang Aisyah da tulis tu...... Yang ade gambar tu....
Yang warne hijau tu link korang

Save and view..
Selesai..eheheh..


Selamat mencuba.Kenyit mate sikit.


Untuk ruangan Banner,Link,Profile
Korang wat lah page baru untuk blog korang..Law tak taw cara nya senang je.


G kat new post . sebelah atas tuh ada edit post ...korang klik je dan create new page korang.lepas tu publish dan pilih No gadget k..Dan korang ambik link tu untuk dimasukkan dalam link kod