Cara Memberikan Anak Panah/Arrows Pada Menu Yang Memiliki Dropdown Menu di Blog

Tujuan menambahkan tanda panah di samping menu seperti gambar di atas yaitu untuk mempercantik  tampilan header blog sekaligus sebagai penanda untuk sub menu di setiap menu tersebut. Disini ada dua cara untuk melakukannya yaitu dengan menambahkan kode script pada html atau dengan menggunakan font awesome.

Cara pertama yaitu manambahkan kode script di html.

Masuk ke Tema pilih edit HTML kemudian tambahkan kode script di bawah ini teapat di atas kode "]]></b:skin>" tanpa tanda petik. Untuk memudahkan pencarian pada halaman html klik ctrl+f  kemudian masukkan kode yang akan di cari setelah itu klik enter.

.lambang-panah { position: relative; top: 1px; font-size: 0px; height: 0px; line-height: 0; width: 0px; border-width: 4px 4px 0px; padding-top: 1px; left: 4px; border-style: solid dashed dashed; border-right: 4px dashed transparent; border-color: #ffffff transparent transparent;} 

Setelah selesai, selanjutnya kita akan menambahkan kode pada menu yang akan di tambahkan anak panah di sampingnya. Masih tetap di HTML cari url menu anda kemudian tambahkan kode dibawah ini di samping nama menu yang memiliki dropdown menu.

==> <span class="lambang-panah"></span>

Seperti gambar dibawah ini.


Pasti ada yang bingung karena kode script di menu saya berbeda dengan milik anda, jika kode script menu anda adalah contoh seperti ini

==> <li><a href='https://mecclay.blogspot.com/search/label/tips dan trik'>tips dan trik</a></li>

Maka tambahkan kodenya seperti yang saya beri tanda merah di bawa ini

==> <li><a href='https://mecclay.blogspot.com/search/label/tips dan trik'>tips dan trik<span class="lambang-panah"></span></a></li>

Setelah itu klik simpan template-nya dan lihat hasilnya.

Selanjutnya cara kedua yaitu dengan menggunakan kode script dari font awesome.

Untuk cara kedua ini anda pertama harus login ke Font Awesome ==> https://fontawesome.com/v4.7.0/icons/ kemudian klik pada kotak pencarian Arrows.
Disini ada banyak pilihan berbagai jenis icon model apa yang akan kita gunakan, disini saya memilih  angle-double down (arrows)


Setelah itu klik arrows manah yang anda sukai, setelah terbuka salin kode script yang ada dibawahnya.



Setelah kode scriptnya di salin maka langkah selanjutnya adalah menambahkan kode script tersebut ke script menu utama yang memiliki dropdown menu. Masuk ke Tema => edit html dan kemudian pastekan kode scripnya tepat seperti gambar di bawah ini.

Ingat pastekan hanya menu yang memiliki dropdown menu karena jika anda mempastekannya di menu yang tidak memiliki dropdown menu itu tidak ada gunanya.


Jika kode script menu utama anda seperti ini
==> <li><a href='https://mecclay.blogspot.com/search/label/tips dan trik'>tips dan trik</a></li>
maka pastekan kode secriptnya tepat seperti ini
==> <li><a href='https://mecclay.blogspot.com/search/label/tips dan trik'><i class="fa fa-angle-double-down" aria-hidden="true"></i>tips dan trik</a></li>

Untuk lebih jelasnya lagi simak contoh dibawah ini.

<nav class='contoh'>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Toraja</a></li>
<li><a href="URL">Olahraga</a></li>
<li><a href="UTL">Other</a></li>
<li><a href="https://mecclay.blogspot.com">Tips dan Trik</a></li>
</ul>
</nav>

Jadi jika saya ingin menambahkan icon arrows di menu Home maka akan seperti di bawah ini.

==> <li><a href="https://mecclay.blogspot.com/search/label/home"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>

Untuk menstabilkan posisi icon agar sesuai maka tambahkan kode script seperti dibawah ini.

==> <li><a href="https://mecclay.blogspot.com/search/label/home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>

Untuk mengatur lebar dan jaraknya maka ikuti langkah-langkah seperti gambar di bawah ini.

Klik kanan pada arrow dan pilih Inspect elemen lalu atur ukuran icon serta jaraknya antar Menu.

Setelah kalian selesai mengatur jaraknya, untuk menerapkannya pada Html salin nama elemetnya lalu masuk ke Tema => Edit Html => Ctrl + F Pastekan elemnnya setelah ketemu edit sesuai dengan Inspect element tadi.

Setelah itu kilk simpan template dan lihat hasilnya.

Share It