Cara Memberi Icon Pada Menu WordPress dan Blogspot

Assalamu’alaikum wr wb. Hai sobat GOPENSIL, pada kesempatan kali ini saya ingin membahas cara memberikan ikon pada menu.

Berhubung akhir-akhir ini beberapa teman saya banyak yang tanya bagaimana cara memberi ikon pada menu. Jadi akan saya bagikan disini caranya.

Awalnya ada beberapa teman saya di sini tanya, “Za gimana ngasih ikon / gambar pada menu kayak punya kamu?” Lalu saya jawab “Nggak bisa kalau nggak templatenya nggak support coy”

Ada lagi yang tanya “Mas gimana bikin menu kayak gini” maksudnya menu yang saya pakai di blog ini. Kemudian saya jawab, tergantung template atau template harus premium”

Terus tadi baru inget, kalau semua template bisa di kasih ikon dengan kode, saya hampir lupa, untung ada yang tanya hehe.

Cara ini juga dapat diterapkan pada pengguna blogspot cuman sedikit berbeda aja penerapannya. Nanti saya buatin artikelnya

Cara Memberi Ikon Pada Menu di WordPress

Ada beberapa cara dalam memberi ikon dalam menu di wordpress.

Yang pertama adalah, biasanya dari templatenya sudah support icon. Tapi tentunya nggak semua tema yang sobat pakai bisa support dengan ikon.

Maka dari itu pada cara ini saya akan memberikan cara kedua, dan cara ini nggak pake plugin jadi nggak nambah beban website sobat.

Mau tau caranya kan? yaudah simak ya sampe paham, kalau nggak paham silahkan komen pada kolom komentar hehe.

Dalam menambahkan ikon di sebuah website caranya sebenernya cukup mudah sekali, pertama yang harus sobat lakukan adalah mengkopi kode dibawah ini, dan letakkan diantara kode <head> … </head>

Kode Dari Fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Kode Dari Fontawesome Versi Bootstrap

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Sobat bisa pilih salah satu kode diatas, kode diatas bermaksud untuk memanggil ikon yang akan ditampilkan di website kita.

Saya sarankan untuk menggunakan kode yang dari Bootstrap, karena lebih cepat loadingnya.

Jika sobat belum tau caranya untuk menempatkan kode tersebut didalam kode php di template wordpress sobat. Sobat bisa pergi ke menu Appearance -> Theme Editor.

Kemudian cari file dengan nama header.php disamping kanan, dan paste kan salah satu kode diatas diantara kode <head>..</head> pada contoh ini saya memakai kode dari Bootstrap, seperti gambar dibawah ini.

jangan lupa di save atau Update File

Namun jika sobat masih kesulitan dalam hal menaruh kode tadi, biar lebih mudah, kode tersebut bisa di taruh dengan bantuan plugin Insert Header and Footer. Udah punya belum? kalau belum download langsung pada link tersebut dan uploud di menu plugin. Atau langsung tambahkan plugin baru.

Kalau anak Sintesa Insyaa Allah sudah tau plugin tersebut.

Untuk cara penempatannya cukup mudah sekali, setelah sobat menambahkan plugin Insert Header and Footer tadi kemudian aktifkan.

Kemudian sobat copy kode yang saya kasih diatas, kemudian pastekan pada plugin Insert Header and Footer tersebut seperti gambar berikut ini, kemudian Save

Dari sini sudah selesai, lalu bagaimanakah cara menampilkan ikon pada menu?

Nah berikut ini adalah caranya :

Untuk menerapkannya, pertama sobat harus meng copy code fontawesome dari Bootstrap, bisa dilihat disini https://fontawesome.bootstrapcheatsheets.com/

Carilah ikon yang sesuai, misalnya saya ingin memakai ikon pensil, maka klik Copy – pilih HTML Tag seperti gambar dibawah ini.

Setelah di copy, kembali ke Dasboard WordPress sobat, kemudian pilih Menu Appearance – Menu dan copykan kode tersebut di depan nama menu sobat, misalnya seperti gambar dibawah ini. Jangan lupa untuk di save

Cara nulisnya harus di kasih space antara kode dengan nama menunya, supaya pada menu juga muncul space, jadi menu dan iconnya nggak nyambung, kek gini

<i class="fa fa-pencil"></i> Pengetahuan

Nah sampai disini sudah selesai, tinggal lihat halaman website sobat, sudah muncul belum.

Jika belum muncul bisa dibaca lagi artikelnya kali aja ada langkah yang ketinggalan hehe.

Atau Lihat Videonya

Video Cara Menambah Ikon Pada Menu di WordPress

Mohon maaf videonya lemot, saya pake sistem operasi Linux soalnya 🙁

Penutup

Nah itulah artikel tentang cara memberi ikon pada menu di website semoga bisa bermanfaat

Jika sobat mengalami kesulitan langsung komen aja ya. Oh iya untuk penerapan diblogger, caranya agak beda, nanti saya tambahin tutorialnya disini, InsyaaAllah.

UPDATE :

Berikut ini adalah tutorial cara menambah ikon di menu blogspot

Mohon doanya biar sempat berbagi hehe

Leave a Comment