Tutorial 135 : Simple Oval Tab Menu.

Assalamualaikum,

Lama sungguh tak update tutorial kecintaan ni. Maka terdengar keluh kesah reader yang inginkan tutorial, maka aku dengan rela hati mengupdate tutorial ini untuk tatapan umum. Jom kita tengok apakah yang dimaksudkan dengan Simple Oval Tab Menu.


Gambar seperti di atas. Jom ikuti tutorial mudah ini..jommm!!

1. Sign in blogger > Design > Edit HTML
2. Cari code ini, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

]]></b:skin>
3. Dah jumpa? copy code dibawah dan paste sebelum/di atas code yang dicari tadi.

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;

}
.invertedshiftdown ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
background-color: #FFFFFF;
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 9px;
border: solid #FC94B5 1px;
-moz-border-radius-bottomright: 1em; -moz-border-radius-topleft: 1em;
-moz-border-radius-bottomleft: 1em; -moz-border-radius-topright: 1em;

}

.invertedshiftdown a:hover{
background-color: #FC94B5;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #FC94B5;
padding-top: 9px;
padding-bottom: 5px;
}

4. Boleh ubah tulisan MERAH dengan COLOUR KESUKAAN.
    Boleh ubah tulisan BIRU dengan tulisan kesukaan.

5. Dan bolehlah SAVE.



 
Jangan Close dulu tutorial ni, ada perkara belum settle lagi. So sekarang ikuti langkah ini :

1. Sign in Blogger > Design > Add Gadget > Html / JavaScript
#Ambil di bawah header punya.
2. Sila copy dan paste ke dalam ruangan HTML/ Java Script


<center> <div class='invertedshiftdown'>
<ul>
<li><a href='LINK'>NAMA 1</a></li>
<li><a href='LINK'>NAMA 2</a></li>
<li><a href='LINK'>NAMA 3</a></li>
<li><a href='LINK'>NAMA 4</a></li>
<li><a href='LINK'>NAMA 5</a></li>

</ul>
</div>
<br style='clear: both;'/> </center>

3. Ubah:

LINK - Link url korang
NAMA - Tajuk tab menu korang.

4. Dah tukar semua. SAVE.


p/s : Nanti komenlah bila dah cuba k. :)Good Luck!
Share this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
18 Comments for "Tutorial 135 : Simple Oval Tab Menu."

tutorial menarik.. pasti akn d cuba..

:") kenape tak center eh ? Balas dekat cbox yanie , boleh ? Hope ade respon :") tQ .

bestnya tuto nie...farah nak mintak tlg bole...napa kotak post title x sama dgn kotak cerita,pastu kalau tarikh tu nak wat kotak mcm mna yew..akak dh folow cr tuto farah tp x jd..hrp farah dpt membntu

Knape ta de bolder ?
Susa jugak

Hai akak ,thank for the tutorial :)
saya nak tanya, macam mana nak edit blog yg baru ni? dah lama tak buka pastu sy tengok blog dah lain sangat ..tak tahu mana satu tempat nak tekan ..tolong saya :3

XLeH WaT AE...mcm mne ea nk crik kod nie...?? ]]> gune ctrl F po0n xleh... =(

Nak cuba lah nanti,,,sangat berguna ni,, :)

aku suka banget aku terimakasih sama eloe

link url tu mcm mana ehh ? please tlong ... im newbie in blogger

hey , ciknur farah :) ,

tiara nak tanya lahh , macam mmana kite nak post ek ? dekat mana macam kite nak post tu, boleh tiara tahu tak macam ?

Akak, kenapa tak centre? Macam mana nak buat ehh?

macam mana nak besar font dia n tab dia?

nape ada tulisan plak atas kepala blog bila sy insert tab ni hehehehe... mcmne nk ilangkan...
adoyaiiii maceh...

macam mana nak owvalkan bentuk tab tu

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts Plugin for WordPress, Blogger...
Back To Top