Navigation Menu v1 | Customize Thesis For Blogspot

M'Rie kembali lagi dengan siri Tutorial Customize Thesis For Blogspot (D.I.Y Theme:Thesis For Blogspot).

Okay, tutor kali ni simple jer. Kita cuma perlu tambah sedikit code ke dalam CSS code template untuk menampakkan kelainan pada Navigation Menu kita. Hanya masukkan 2 baris code di bawah ini ke dalam CSS Code Horizontal Menu di ruangan edit HTML.

box-shadow:0px 0px 5px #000000;
-webkit-box-shadow:0px 0px 5px #000000;
-moz-box-shadow:0px 0px 0px #000000;

1. Cari CSS Code Ini:

Perkara pertama yang perlu anda buat adalah mencari CSS Code ini .menuhorizontal li a:hover{, bila dah jumpa code berkenaan. Masukkan 2 code di atas ke dalam code berkenaan. Seperti di bawah ini:

.menuhorizontal li a:hover{
    background:#99CC33;
    color:#fff;
    text-decoration:none;
    box-shadow:0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    }

2. Bonus Tutor:

Jika anda nak cantikkan lagi menu anda itu anda boleh tambahkan border pada hover menu berkenaan. Masih lagi menggunakan code yang sama seperti di atas. Cuma anda perlu tambah 1 sahaja lagi baris CSS Code.


.menuhorizontal li a:hover{
    background:#99CC33;
    color:#fff;
    text-decoration:none;
    box-shadow:0px 0px 5px #000000;
    -moz-box-shadow: 0px 0px 5px #000000;
    -webkit-box-shadow: 0px 0px 5px #000000;
    border: 2px solid #ddd;
    }

3. Arahan Untuk Customize:

Jika anda ingin mengubah warna latar bagi hover menu anda. Sila tukar code warna ini #99CC33 kepada code warna yang lain.

Akan datang, M'Rie akan ajar anda. Bagaimana hendak menukar Navigation Menu sedia ada di dalam template D.I.Y Theme: Thesis For Blogspot kepada Navigation menu yang lain.