Pada dasarnya template Viomagz buatan Mas Sugeng sudah sangat bagus baik dalam tampilan maupun dari segi optimasi. Namun untuk membuat tampilan navigasi menu menjadi lebih menarik, kita bisa menambahkan icon font awesome atau icon SVG.

Nah dalam kesempatan kali ini saya ingin berbagi tutorial blogger cara memasang icon SVG pada navigai menu template Viomagz.

Berikut ini adalah langkah-langkah yang harus dilakukan dalam pemasangan icon SVG di menu navigasi Viomagz.

Cara Memasang Icon SVG di Menu Navigsi Viomagz

Buka Dashboard Blogger
Pilih Menu Tema
Pilih Edit HTML

Masukan Kode di bawah ini pada kolom navigasi menu, atau cari 

<li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M11.25 3c-1.187 0-2.334 0.186-3.407 0.554-1.006 0.344-1.901 0.831-2.66 1.445-1.407 1.139-2.182 2.597-2.182 4.106 0 0.844 0.236 1.663 0.701 2.435 0.485 0.805 1.216 1.542 2.115 2.132 0.713 0.468 1.194 1.218 1.321 2.061 0.021 0.14 0.038 0.281 0.051 0.423 0.064-0.059 0.127-0.12 0.19-0.183 0.566-0.563 1.329-0.874 2.117-0.874 0.125 0 0.251 0.008 0.377 0.024 0.454 0.057 0.917 0.087 1.377 0.087 1.187 0 2.334-0.186 3.407-0.554 1.006-0.344 1.901-0.83 2.66-1.445 1.407-1.139 2.182-2.597 2.182-4.106s-0.775-2.967-2.182-4.106c-0.759-0.614-1.654-1.1-2.66-1.445-1.074-0.367-2.22-0.554-3.407-0.554zM11.25 0v0c6.213 0 11.25 4.076 11.25 9.104s-5.037 9.104-11.25 9.104c-0.597 0-1.182-0.038-1.754-0.11-2.417 2.407-5.207 2.838-7.996 2.902v-0.589c1.506-0.735 2.719-2.073 2.719-3.603 0-0.213-0.017-0.423-0.048-0.628-2.544-1.669-4.171-4.218-4.171-7.076 0-5.028 5.037-9.104 11.25-9.104zM23.344 20.407c0 1.311 0.851 2.459 2.156 3.088v0.505c-2.417-0.054-4.636-0.424-6.73-2.487-0.495 0.062-1.003 0.095-1.52 0.095-2.238 0-4.299-0.604-5.944-1.618 3.391-0.012 6.592-1.098 9.020-3.063 1.224-0.99 2.189-2.152 2.869-3.453 0.721-1.38 1.087-2.85 1.087-4.369 0-0.245-0.011-0.488-0.029-0.73 1.701 1.405 2.748 3.319 2.748 5.43 0 2.449-1.41 4.634-3.615 6.065-0.027 0.176-0.041 0.355-0.041 0.538z'/>
</svg> Isi Nama Menu </a></li>

Contoh pemasangan:

<li><a href='#'><i aria-hidden='true' class='fa fa-slack'/>  Topik</a>
  <ul>
    <li><a href='https://www.maxikhsan.my.id/search/label/Adsense'><i aria-hidden='true' class='fa fa-money'/>  AdSense</a></li>
    <li><a href='https://www.maxikhsan.my.id/search/label/Komputer'><i aria-hidden='true' class='fa fa-desktop'/>  Komputer</a></li>
    <li><a href='https://www.maxikhsan.my.id/search/label/SEO'><i aria-hidden='true' class='fa fa-search'/>  SEO</a></li>
    <li><a href='https://www.maxikhsan.my.id/search/label/Snippet'><i aria-hidden='true' class='fa fa-code'/>   Snippet</a></li>
    <li><a href='https://www.maxikhsan.my.id/search/label/Tips%20Blogger'><i aria-hidden='true' class='fa fa-html5'/>   Tips Blogger</a></li>
	<li><a href='https://www.maxikhsan.my.id/search/label/Tutorial'><i aria-hidden='true' class='fa fa-wrench'/>   Tutorial</a></li>
 <li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M11.25 3c-1.187 0-2.334 0.186-3.407 0.554-1.006 0.344-1.901 0.831-2.66 1.445-1.407 1.139-2.182 2.597-2.182 4.106 0 0.844 0.236 1.663 0.701 2.435 0.485 0.805 1.216 1.542 2.115 2.132 0.713 0.468 1.194 1.218 1.321 2.061 0.021 0.14 0.038 0.281 0.051 0.423 0.064-0.059 0.127-0.12 0.19-0.183 0.566-0.563 1.329-0.874 2.117-0.874 0.125 0 0.251 0.008 0.377 0.024 0.454 0.057 0.917 0.087 1.377 0.087 1.187 0 2.334-0.186 3.407-0.554 1.006-0.344 1.901-0.83 2.66-1.445 1.407-1.139 2.182-2.597 2.182-4.106s-0.775-2.967-2.182-4.106c-0.759-0.614-1.654-1.1-2.66-1.445-1.074-0.367-2.22-0.554-3.407-0.554zM11.25 0v0c6.213 0 11.25 4.076 11.25 9.104s-5.037 9.104-11.25 9.104c-0.597 0-1.182-0.038-1.754-0.11-2.417 2.407-5.207 2.838-7.996 2.902v-0.589c1.506-0.735 2.719-2.073 2.719-3.603 0-0.213-0.017-0.423-0.048-0.628-2.544-1.669-4.171-4.218-4.171-7.076 0-5.028 5.037-9.104 11.25-9.104zM23.344 20.407c0 1.311 0.851 2.459 2.156 3.088v0.505c-2.417-0.054-4.636-0.424-6.73-2.487-0.495 0.062-1.003 0.095-1.52 0.095-2.238 0-4.299-0.604-5.944-1.618 3.391-0.012 6.592-1.098 9.020-3.063 1.224-0.99 2.189-2.152 2.869-3.453 0.721-1.38 1.087-2.85 1.087-4.369 0-0.245-0.011-0.488-0.029-0.73 1.701 1.405 2.748 3.319 2.748 5.43 0 2.449-1.41 4.634-3.615 6.065-0.027 0.176-0.041 0.355-0.041 0.538z'/>
</svg> Isi nama menu </a></li>
 </ul>
  </li>

Menu yang ditandai warna orange adalah menu yang menggunakan icon font awesome. Sedangkan menu yang ditandai dengan warna kuning adalah menu yang menggunakan icon SVG.

Klik simpan.

Selanjutnya, Anda perlu memasang CSS di bawah ini untuk mengatur tampilan icon SVG di menu navigasinya.

#cssmenu svg{ fill: #ffffff; width: 16px; height: 16px; vertical-align: -3px; background-size: 13px; }

Letakan kode tersebut pada tag /* NAV MENU */

Contoh pemasangannya seperti di bawah ini.

/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#cssmenu svg{
    fill: #ffffff;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-size: 13px

Klik simpan dan lihat hasilnya.

Untuk demo, lihat icon menu di dalam blog ini.

Untuk mengganti icon SVG nya cukup mudah, Anda tinggal mengganti kode icon yang ditandai warna biru dengan kode yang Anda inginkan.

Untuk mencari kodenya silahkan anda masuk ke website materialdesignicons.com atau www.iconmoon.io

Untuk cara mendapatkan kode icon SVG yang anda inginkan, silahkan baca tutorialnya di bawah ini.

Baca: Cara Memasang Icon SVG di Blog

Nah itulah tutorial blogger cara memasang icon SVG di navigasi menu template Viomagz.

Semoga bermanfaat.

Max Ikhsan

Hai, Saya adalah pemilik blog ini. Mau Kerja Sama? Hubungi maxikhsan.cs@gmail.com

Cara Memasang Icon SVG di Menu Navigasi Template Viomagz

Cara Memasang Icon SVG di Menu Navigsi Viomagz

Posting Komentar