√ Cara Memasang Ikon Di Menu Navigasi Blogger

Cara Memasang Ikon Di Menu Navigasi Blogger

Posted by New's

Saturday, December 5, 2020

ashhabulkahin - Menu Navigasi pada suatu blog merupakan suatu keharuasan yang wajib dimiliki blog tersebut. Rasanya kalau gak pake menu ini terasa kurang menarik dan juga akan terlihat kurang profesional tentunya.

Jaman sekarang para pemilik blog ataupun situs, pasti mereka memasang menu navigasi ini. Walaupun tampilannya banyak digunakan oleh blog lain. Biar lebih keren dan menarik perhatian para pengunjung, kamu bisa menambahkan ikon pada menu tersebut.

Ikon pada menu navigasi ini biasanya dipasang dengan menggunakan icon SVG. Icon tersebut akan muncul tepat disamping judul navigasi blog. contohnya akan seperti ini :

Cara memasang ikonnya pun nggak susah-susah amat. Kamu hanya perlu mengedit sedikit kode yang ada di HTML blog kamu. Hanya ada beberapa baris kode saja. Dan cara ini juga tidak perlu memasang CSS atau yang lainnya.

Cara ini sudah pernah saya terapkan diblog saya yang menggunakan template viomagz. Kamu juga bisa mencobanya di template blogger yang lainnya. Caranya sama aja kok.

Untuk ikon yang akan digunakan, kamu bisa cari desainnya di situs berikut ini. Disana ada banyak jenis ikon-ikon keren yang bisa kamu pakai diblog kamu.

Oke, langsung aja ke inti pembahasannya.

Cara Memasang Ikon SVG Pada Menu Navigasi Di Blog

1. Masuk ke Dasbor blogger kamu, lalu masuk ke menu Theme ---> Edit HTML.

2. Kemudian cari kode untuk menu navigasi blog kamu. Setiap template berbeda. Biasanya di dalam tag <body>.

<ul>

  <li><a href='https://ashhabulkahin.blogspot.com/search/label/Blogging?m=0?&max-results=5'>Tips Blogging</a></li>

</ul>

3. Masuk ke tempat penyedia ikon yang sudah saya kasih diatas tadi. Dan cari ikon yang sesuai dengan judulnya.

4. Setelah kamu mendapatkan jenis ikon dan kode yang ingin kamu pasang, tempel kode tersebut di menu navigasi tadi. Disini saya akan contohkan memasang ikon desktop. Gambarannya akan terlihat seperti ini :

5. Kemudian kamu ambil kode tersebut dan taruh setelah link pada navigasinya. Maka kurang lebih akan menjadi seperti berikut :

<ul>

  <li><a href='https://ashhabulkahin.blogspot.com/search/label/Blogging?m=0?&max-results=5'><i class="fa fa-desktop" aria-hidden="true"/> Tips Blogging</a></li>

</ul>

Atau seperti dibawah ini juga boleh :

<ul>

  <li><a href='https://ashhabulkahin.blogspot.com/search/label/Blogging?m=0?&max-results=5'><i aria-hidden="true" class='fa fa-desktop'/> Tips Blogging</a></li>

</ul>

Jangan lupa kasih tanda sepasi sebelum judul. Agar ikon dan judul tidak terlalu dekat.

6. Setelah itu klik simpan dan lihat perubahannya.

Gimana, Gampang kan? kalau masih ada kendala atau terjadi eror, perikasa kembali kodenya dan jangan lupa sesuaikan link dengan template yang kamu gunakan.