Cara Mengganti Tautan Beranda Yang Terdapat Pada Tab Menu Blog Dengan Ikon Tombol Home

Jika Anda mengaktifkan penggunaan widget ‘Page (Laman)’ (seperti yang diuraikan pada langkah pertama artikel dengan judul “Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger”) dengan tujuan guna menampilkan halaman mandiri pada blog dalam bentuk tab menu horizontal seperti yang tampak pada gambar di atas, maka salah satu menu yang secara default akan ditampilkan adalah menu untuk halaman ‘Beranda (Home)’.

Menu yang ditampilkan dalam widget ‘Page (Laman)’ (khususnya menu untuk halaman beranda) secara default adalah berbentuk sebagai tautan teks, sehingga secara default pula perubahan yang dapat dilakukan hanyalah sebatas pada teks yang akan ditampilkan sebagai menu pada bagian tersebut. Namun tahukah Anda bahwasanya tautan ‘Beranda (Home)’ yang terdapat pada bilah menu standar Blogger, dapat dikustomisasi atau dimodifikasi dari yang semula berbentuk menu tautan teks menjadi menu dengan gambar berbentuk tombol atau ikon rumah seperti yang umum dipakai dalam kustom template.

Untuk melakukan kustomisasi caranya cukup mudah. Dimana langkah awal yang harus dilakukan adalah mengaktifkan penggunaan widget ‘Page (Laman)’, dan kemudian setelah widget tersebut terpasang pada blog maka langkah berikutnya adalah melakukan modifikasi kode dalam template untuk widget yang dimaksud. Sedangkan untuk melakukan modifikasi pada rangkaian kode widget, Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari kode <b:widget id='PageList dan kemudian apabila telah ketemu maka perhatikan beberapa baris di bawahnya. Nah, pada beberapa baris di bawahnya, hapuslah rangkaian kode seperti yang tampak pada contoh di bawah ini.

<ul> <!-- hapus dari sini -->
  <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> <!-- hapus sampai sini -->

Dan selanjutnya pada bagian yang dihapus tersebut sisipkan rangkaian kode seperti yang tampak pada contoh berikut ini.

<ul>
  <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKswxWWoTa5oGLo8k05LOvxwp4RjVqZbABcylbMs8c8p2-Ca5TEA8Xyt1wqXZsYl7JJd-LORsOVierpwHqzv7vF0tny6m88U2jnCGh3-uwYlQBJwhggaGg2bLukgmzPzc-_zK6zWDlbc/s800/Beranda.png' width='20px'/></a></li>
  <li><a href='URL'>Daftar Isi</a></li>
  <li><a href='URL'>Tanya Jawab</a></li>
  <li><a href='URL'>Tentang</a></li>
</ul>

Keterangan:

Tag <li> yang pertama digunakan untuk halaman beranda dengan model menu berbentuk tombol bergambar rumah, sedangkan tag <li> yang kedua, ketiga, dan keempat digunakan untuk menu yang berikutnya dengan model menu berbentuk tautan teks.

Ganti http://eltelu.blogspot.com/ sesuai dengan URL blog yang Anda kelola, serta ganti pula kata URL sesuai dengan link halaman atau artikel yang akan ditautkan. Dan sesuaikan pula menu tampilan yang akan digunakan yaitu dengan cara mengganti kata ‘Daftar Isi’ ‘Tanya Jawab’, serta ‘Tentang’.

Apabila gambar yang digunakan sebagai tombol beranda belum sesuai, maka silakan diubah sesuai dengan URL gambar yang telah Anda unggah.

Ketiga, simpan template.

Dengan demikian maka dapat diartikan bahwa model bilah menu yang digunakan adalah tetap bilah menu standar Blogger, sedangkan menu yang terdapat di dalamnya adalah sesuai dengan kustomisasi yang telah dilakukan. Sehingga akhirnya tampilan menu tidak lagi berbentuk tautan teks namun dapat diubah dalam bentuk menu berbentuk gambar tombol seperti yang tampak pada contoh gambar di atas (baik untuk menu beranda maupun untuk menu yang lainnya). Namun perlu diingat bahwa dengan menggunakan teknik ini akhirnya fungsi <li class='selected'> tidak lagi berfungsi seperti halnya yang terjadi pada kustom template.

Semoga berguna dan bermanfaat.

Salam.