Skip to main content

Cara Menambahkan Icon SVG di Menu Navigasi Blogger

Cara Menambahkan Icon SVG di Menu Navigasi Blogger

Cara Menambahkan Icon SVG Di Menu Navigasi Blogger - kali ini analisyuki.com akan membagikan tutorial cara mudah memang icon SVG di dalam menu navigasi blogger dengan benar.

Salah satu hal yang dapat kita lakukan untuk mempercantik dan memperkeren tampilan blogger adalah dengan menambahkan icon di sebelah kiri menu-menu navigasi blogger. Untuk menambahkan icon tersebut dapat kita lakukan dengan 2 cara yaitu dengan memasang Icon SVG atau Icon Font Awesome di dalam HTML blogger.

Namun kali ini saya akan membahas tentang icon SVG saja dulu. Sebenarnya sebelumnya saya sudah pernah menjelaskan cara menambahkan icon dalam postingan blogger, namun terasa kurang lengkap jika saya tidak membuat tutorialnya juga untuk dipasang di menu blog.

Bagi kalian yang tidak menggunakan font awesome untuk kepentingan kecepatan loading blog, maka menggunakan icon awesome adalah pilihan yang tepat.

Namun sayangnya untuk memasang icon svg di dalam menu blog agak sedikit sulit, dikarenakan kita harus merapikan terlebih dahulu icon tersebut, karena biasanya icon svg naik ke atas dan tidak sejajar dengan menu blog.

Oleh karena itu berikut saya akan membagikan tutorial cara yang benar memasang icon SVG di dalam menu blogger.

Cara Menambahkan Ikon SVG di Menu Navigasi Blogger

1. Buka > pilih Tema > Edit HTML > kemudian letakkan kode ini dibawah kode ]]></b:skin> atau </style>

.icosvg{vertical-align:-7px}

*Keterangn: Kode diatas berguna agar ikon rapi dan tepat di tengah-tengah sejajar dengan menu navigasi

2. Kemudian ganti kode menu navigasi kalian dengan kode di bawah ini:

<a href='Link-Anda' title='Nama-Menu'><svg class='icosvg' height='24' viewBox='0 0 24 24' width='24'><title>Nama-Manu</title><path d='M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z' fill='#fff'/></svg><span> Nama-Manu</span></a>
NamaKeterangan
Link-Anda Isi dengn URL Label atau halaman statis
24 Ukuran tinggi dan lebar icon
Nama-Manu isi dengan Nama Navigasi
#fff Warna Icon
M9,2V8H1.........dst.........5V2H9Z Ganti dengan icon SVG yang kalian inginkan

Untuk Mendapatkan pilihan icon SVG, kalian bisa menuju ke situs resmi penyedia icon SVG di Material Design Icons Disitu kalian dapat mencari atau memilih langsung icon yang telah disediakan.

1. Pilih Icon dari material design icon yang kalian inginkan, Kemudian pilih View SVG

Cara Menambahkan Icon SVG di Menu Navigasi Blogger

2. Salin sebagian saja kode SVG yang saya tandai, kemudian ganti kode icon svg biru yang saya mark biru diatas

Cara Menambahkan Icon SVG di Menu Navigasi Blogger

Demikianlah tutorial dari analisyuki.com tentang cara menyisipkan ikon svg di menu blog, mungkin tutorialnya agak sedikit membingungkan dan ribet, namun saya rasa jika kita membacanya dengan baik pasti akan lebih mudah untuk dipahami dan dipraktekkan terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar