Tuesday, 24 December 2013

Membuat Tanda Pada Menu Menurut Halaman Yang Sedang Dibuka

Membuat Tanda Pada Menu Menurut Halaman Yang Sedang Dibuka. Mungkin beberapa dari anda masih bingung terkait dengan judul artikel ini. Jadi, sebelum saya lanjut ke tutorialnya, saya berikan sedikit definisinya. Membuat tanda pada menu navigasi ini maksudnya apabila kita sedang berada pada suatu halaman, pada menu navigasi terdapat penunjuk yang membuat menu itu berbeda dari menu yang lainnya.

Membuat Tanda Pada Menu Menurut Halaman Yang Sedang Dibuka jonarendra

Misalkan anda mengklik menu About Me pada suatu blog, kondisi menu yang di klik akan berubah menjadi selected sebagai tanda anda sedang berada pada halaman menu About Me. Cara kerja dari fungsi ini sama dengan menu Tab / Laman yang ada pada blog, jika template blog masih default / bawaan blogger.

Untuk menu navigasi yang dipakai, boleh yang mana saja, asalakan tercantum link yang akan menuju halaman yang akan diberi tanda. Apabila sudah mengerti pengertian dari tanda menu pada current page, mari kita simak tutorial bagaimana cara menerapkannya di blog kita.

Membuat Tanda Pada Menu Menurut Halaman Yang Sedang Dibuka

1. Langkah pertama pastinya anda harus masuk ke Edit HTML Template
2. Saya pakai perumpamaan HTML menu seperti
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/daftar-isi.html'>Sitemap</a></li>
<li><a href='/p/tentang-saya.html'>About</a></li>
</ul>
Itu berarti ada 3 halaman pada blog yang akan diberi tanda dengan menu. Supaya berhasil, saya menggunakan fungsi Tag Kondisional untuk membedakan menu terpilih pada current page. Tetapi, sebelum itu, tambahkan tag class pada tiap tiap menu <li>. Contoh:
<ul>
<li class='home'><a href='URL Home'>Home</a></li>
<li class='sitemap'><a href='URL Sitemap'>Sitemap</a></li>
<li class='about'><a href='URL About'>About</a></li>
</ul>
3. Selanjutnya, pasang CSS beserta tag kondisionalnya, rangkaiannya seperti ini
<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.home {property:value}
</b:if>
<b:if cond='data:blog.url == &quot;URL Sitemap&quot;'>
.sitemap {property:value}
</b:if>
<b:if cond='data:blog.url == &quot;URL About&quot;'>
.about {property:value}
</b:if>
</style>
property:value bisa anda atur sendiri, entah bagaimana kreasi anda supaya menu tersebut berbeda dengan yang lainnya. Baik dengan cara memberi background ataupun teks dengan warna berbeda. Jangan lupa juga edit lagi URL nya, karena itu masih url perumpamaan.
4. Jika sudah, simpan Template.

Apabila anda belum memiliki menu, silahkan pasang menu navigasi vertikal dengan icon, atau yang lainnya. Sekian informasi dari Jona Rendra kali ini yang berjudul Membuat Tanda Pada Menu Pada Halaman Yang Sedang Dibuka, semoga bermanfaat untuk anda.

KATEGORI:
arrow_back
arrow_forward

6 komentar

boleh juga nih, buat kece2 in blog.. saya coba kang.

Kang Rendra, terimakasih ya kemaren udah berkunjung ke blog saya... :-) Salam kenal dari Mas Ibas blogger Katrox

semua blogger yang komen disini saya kunjungi balik :)

mantep broo..
mau mencicipi yang diatas niih - html tersebut
makasih broo.. kunjungi balik http://aderizkytriprasojo.blogspot.com/2014/02/hotel-murah-di-jakarta.html

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon