Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif

Menu berubah warna pada halaman About.

Dulu Saya pernah menuliskan potongan kode untuk menandai menu berdasarkan URL pada address bar dengan jQuery atau JavaScript di sini, kali ini Saya akan menggunakan tag kodisional untuk menandai menu berdasarkan persamaan URL halaman atau katakan saja pada halaman yang sedang aktif. Dengan begitu, saat Anda sedang berada pada halaman Tentang, maka menu navigasi Tentang akan berubah warna sesuai dengan pengaturan tampilan menu aktif yang Anda buat. Sebagai contoh.

Anggaplah Anda sudah memiliki menu navigasi di dalam template dengan kerangka seperti ini:

<nav id='nav'>
  <ul>
    <li><a href='http://test.blogspot.com'>Beranda</a></li>
    <li><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
    <li><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
    <li><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
  </ul>
</nav>

Tambahkan masing-masing item menu dengan ID yang spesifik, misalnya home, about, archive dan sebagainya, sehingga hasilnya akan menjadi seperti ini:

<nav id='nav'>
  <ul>
    <li id='home'><a href='http://test.blogspot.com'>Beranda</a></li>
    <li id='about'><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
    <li id='archive'><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
    <li id='contact'><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
  </ul>
</nav>

Setelah itu temukan kode </head> dan tambahkan kode-kode CSS yang berisi semua ID menu di atas. Isi selektor-selektor tersebut dengan deklarasi yang sama. Sebagai contoh, di sini Saya menuliskan warna latar hijau dan warna teks putih untuk menu yang sedang aktif:

<style>
#home    a {background-color:#0A7936;color:white;}
#about   a {background-color:#0A7936;color:white;}
#archive a {background-color:#0A7936;color:white;}
#contact a {background-color:#0A7936;color:white;}
</style>

Letakkan kode di atas tepat di atas tag </head>

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 kodisional halaman khusus untuk kasus ini:

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>

Pisahkan semua selektor item menu di atas menjadi seperti ini:

<style>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #home a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #about a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #archive a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #contact a {background-color:#0A7936;color:white;}
  </b:if>
</style>

Ganti kode URL HALAMAN dengan URL halaman pada menu yang terkait dengan ID menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:

<style>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  #home a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/about.html&quot;'>
  #about a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/archive.html&quot;'>
  #archive a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/contact.html&quot;'>
  #contact a {background-color:#0A7936;color:white;}
  </b:if>
</style>

Catatan: data:blog.homepageUrl setara dengan "http://test.blogspot.com/" menurut sampel alamat blog di atas, dan juga setara dengan window.location.hostname dalam JavaScript.

Klik Simpan Template.

Alternatif Lain

Tanpa Tag Kondisional

Kita bisa membuat manipulasi ini tanpa tag kondisional, diantaranya adalah dengan cara menerapkan manipulasi JavaScript atau jQuery (baca di sini) yang lebih praktis. Tapi metode ini memiliki satu kekurangan yaitu efek tidak akan bekerja jika JavaScript dimatikan. Atau kita juga bisa menggunakan metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan kode CSS secara langsung ke dalam posting, sama seperti saat kita membuat posting Blogazine.

Hal yang paling penting dalam pembuatan manipulasi efek aktif pada menu sebenarnya hanya ada pada modifikasi ID atau kelas item menu agar mereka menjadi lebih spesifik/berbeda satu sama lain.

Dengan Widget Daftar Halaman (Page List)

Blogger memiliki widget bernama Daftar Laman. Dulu sebenarnya widget tersebut digunakan untuk menampilkan semua daftar tautan khusus untuk halaman statis, tapi saat ini widget tersebut sudah berkembang dan bisa ditambahi dengan tautan-tautan non-halaman statis. Dalam widget tersebut sudah terdapat peraturan kondisi tersendiri yaitu <b:if cond='data:link.isCurrentPage'> yang memiliki kemampuan untuk menambahkan kelas atau keadaan yang berbeda pada item menu jika halaman yang sedang aktif adalah halaman yang memiliki URL sama dengan URL pada menu tersebut:

<b:widget id='PageList1' locked='false' title='Laman' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Untuk menerapkan efek aktif pada menu, cukup gunakan CSS ini:

/* Versi daftar menu */
.PageList li.selected a {
  background-color:#0A7936;
  color:white;
}

/* Versi selectbox */
.PageList option[selected] {
  font-weight:bold;
}

Kekurangan manipulasi tampilan menu aktif pada widget Daftar Laman adalah kita tidak memiliki kemampuan untuk menambahkan sub-sub menu baru sebagai anak menu utama.