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!

18 comments

  1. tutorial menarik.. pasti akn d cuba..

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

    ReplyDelete
  3. @Yanie Ninie

    already update, just put center sahaja.

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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

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

    ReplyDelete
  7. Nak cuba lah nanti,,,sangat berguna ni,, :)

    ReplyDelete
  8. aku suka banget aku terimakasih sama eloe

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

    ReplyDelete
  10. 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 ?

    ReplyDelete
  11. Akak, kenapa tak centre? Macam mana nak buat ehh?

    ReplyDelete
  12. macam mana nak besar font dia n tab dia?

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

    ReplyDelete
  14. macam mana nak owvalkan bentuk tab tu

    ReplyDelete

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

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH