Sunday, April 22, 2012 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!