Memberi Sorotan Background Khusus Pada Menu Navigasi Header
Memberi Sorotan Background Khusus Pada Menu Navigasi - Sebenarnya saya bingung mau kasih judul yang pas untuk postingan kali ini. Namun kalian coba pahami saja dengan melihat gambar dibawah ini (klik untuk perbesar).
Pada demo tersebut saya membuat sorotan khusus pada menu HOME dan kamu bisa ubah warna sesuai selera. Untuk menerapkan trik tersebut tidaklah sulit hal yang pertama yang perlu kamu lakukan ialah mengetahui kode CSS pada menu yang anda gunakan.
Sebagai contoh kode menu css yang saya gunakan pada demo tersebut kurang lebih seperti ini:
.topnav{overflow:hidden;display:block;height:50px;float:right;margin-right:50px}
.topnav a{float:left;display:block;text-align:center;text-decoration:none}
Untuk pemanggilnya HTML nya seperti ini:
<div class='topnav' id='myTopnav'><a href='/' title='Home'>Home</a>
</div>
Untuk membuat sorotan background khusus kita hanya perlu menambahkan kode css menu blog kita menjadi seperti ini:
.topnav .sorot{background:#f2f2f2;padding-top:0px;color:#444444;font-weight:500}
Lalu menambahkan CLASS
pada menu HTML nya sehingga menjadi seperti ini
<div class='topnav' id='myTopnav'>
<a class='sorot' href='/' title='Home'>Home</a>
</div>
Simpan Template.
Catatan: Untuk kamu pengguna template kompi flexible bisa langsung menerapkannya tanpa penyesuaian lagi sebab saya gunakan template tersebut pada demo.
Baca juga: Cara Merubah Warna Menu Header Template Kompi Flexible
Namun buat kamu yang memakai template berbeda tinggal penyesuain saja sebab kurang lebih caranya sama hanya berbeda kode CSS MENU nya saja.
Selamat mencoba!