dengan ini kita bisa mrngetahui link menu yang sedang aktif/berada, Contoh anda memiliki memu navigasi seperti berikut
<menu id='navigasi'>
<ul>
<li><a href='http://contoh.com'>Beranda</a></li>
<li><a href='http://contoh.com/aku.html'>Aku</a></li>
<li><a href='http://contoh.com/arsip.html'>Arsip</a></li>
<li><a href='http://contoh.com/contact.html'>Kontak</a></li>
</ul>
</menu>untuk memberi class warna yang berbeda silahkan sisipkan setiap class di link menu anda, seperti berikut
<menu id='navigasi'>
<ul>
<li><a class='depan' href='http://contoh.com'>Beranda</a></li>
<li><a class='gue' href='http://contoh.com/aku.html'>Aku</a></li>
<li><a class='arsip' href='http://contoh.com/arsip.html'>Arsip</a></li>
<li><a class='telpon' href='http://contoh.com/contact.html'>Kontak</a></li>
</ul>
</menu>kini setiap link menu anda telah memiliki class yang nanti berguna untuk memberi efek sesuai yang telah di tentukan pada tag conditional, kini kita buat css yang nanti akan kita sisipkan di tag conditional untuk menentukan class dari menu anda, lihat kode di bawah ini:
<style type='text/css'>
.depan a {background-color:#0A7936;color:white;}
.gue a {background-color:#0A7936;color:white;}
.arsip a {background-color:#0A7936;color:white;}
.telpon a {background-color:#0A7936;color:white;}
</style>anggap saja css di atas sudah jadi dan sesuai keinginan, kemudian Letakkan kode di atas tepat di atas tag </head> atau buang kode <style type='text/css'> dan <style> lalu gabung dengan kolom css template anda.
Sekarang mengatur tag conditional untuk menunya/Mengatur Warna Menu dengan Tag Kondisional
Pada intinya kita hanya akan memecah semua selektor di atas menjadi kode CSS tunggal yang akan tampil hanya jika halaman yang sedang aktif merupakan halaman yang memiliki URL sama dengan URL pada menu. Jadi kita bisa menggunakan tag conditinal halaman terpilih untuk kondisi ini, lihat tag conditional dibawah ini:
<b:if cond='data:blog.url == "URL HALAMAN/MENU"'>Lalu buat beberapa pemisah dan batas perintah seperti berikut
<style type='text/css'>
<b:if cond='data:blog.url == "URL HALAMAN/MENU"'>
.depan a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "URL HALAMAN/MENU"'>
.gue a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "URL HALAMAN/MENU"'>
.arsip a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "URL HALAMAN/MENU"'>
.telpon a {background-color:#0A7936;color:white;}
</b:if>
</style>Ganti kode URL HALAMAN/MENU dengan URL halaman pada menu yang terkait dengan class menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.depan a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "http://contoh.com/aku.html"'>
.gue a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "http://contoh.com/arsip.html"'>
.arsip a {background-color:#0A7936;color:white;}
</b:if>
<b:if cond='data:blog.url == "http://contoh.com/contact.html"'>
.telpon a {background-color:#0A7936;color:white;}
</b:if>
</style>Semoga trik ini bermanfaat untuk anda...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
Konversi KodeOOT