Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif

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 &quot;http://test.blogspot.com/&quot; 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;
}
Widget Halaman Statis

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 26 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!