surfingfeed widget

Navigation Menu v1 | Customize Thesis For Blogspot

February 2, 2012

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.

Post a Comment

 

Google+ Badge

Sila LIKE Halaman Facebook jika ingin mendapatkan respond dengan pantas jika komen anda tidak berjawab di blog. Ataupun anda boleh kemukakan soalan melalui menu 'Email Us'. Harap Maklum

Artikel Terkini