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!
tutorial menarik.. pasti akn d cuba..
ReplyDelete:") kenape tak center eh ? Balas dekat cbox yanie , boleh ? Hope ade respon :") tQ .
ReplyDelete@Yanie Ninie
ReplyDeletealready update, just put center sahaja.
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
ReplyDeleteKnape ta de bolder ?
ReplyDeleteSusa jugak
Hai akak ,thank for the tutorial :)
ReplyDeletesaya 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
THANKS ..=)
ReplyDelete@jia creatifelt
ReplyDeleteXLeH WaT AE...mcm mne ea nk crik kod nie...?? ]]> gune ctrl F po0n xleh... =(
ReplyDeletethx ye kak ! menjadi ^_^
ReplyDeleteNak cuba lah nanti,,,sangat berguna ni,, :)
ReplyDeleteaku suka banget aku terimakasih sama eloe
ReplyDeletelink url tu mcm mana ehh ? please tlong ... im newbie in blogger
ReplyDeletehey , ciknur farah :) ,
ReplyDeletetiara 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?
ReplyDeletemacam mana nak besar font dia n tab dia?
ReplyDeletenape ada tulisan plak atas kepala blog bila sy insert tab ni hehehehe... mcmne nk ilangkan...
ReplyDeleteadoyaiiii maceh...
macam mana nak owvalkan bentuk tab tu
ReplyDelete