Setelah sekian lama tidak membuat konten, banyak sekali request-request tutorial yang masuk melalui gmail salah satunya ialah Membuat Menu Grid seperti Faronesia. Sebelumnya saya memohon maaf jika request tidak langsung diterima karena saya selaku pemilik faronesia sekaligus penulis tidak mendapatkan waktu yang cukup untuk membuat tutorial.
Ok, sesuai dengan judul, saya akan memberikan tutorial mengenai Menu Grid seperti Faronesia. Perlu anda ketahui bahwa menu grid yang ada di web faronesia.com ini bukanlah murni hasil koding saya sendiri melainkan hasil inspect salah satu template yang lumayan dikenal dikalangan blogger. Kode tersebut saya ambil dan saya modifikasi kembali agar cocok dengan template yang saya gunakan.
Sedikit informasi saja bahwa faronesia.com menggunakan template viom*gz v.2.6 yang mana versi tersebut adalah generasi jadul pada tahun 2018. Namun, beriringnya waktu saya memodifikasi agar penampilannya tidak ketinggalan jaman dan saya tambahkan fitur-fitur keren didalamnya hingga menjadi seperti sekarang ini.
Beberapa Keuntungan Memasang Fitur Menu Grid seperti Faronesia Pada Blog
- Membuat blog terlihat lebih profesional
- Memberikan kemudahan ruang navigasi kepada pengguna/pengunjung
- Tampilan blog menjadi lebih anggun
- Memperbesar peluang sistem pemasaran blog
- Dan lain-lain
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Cara Membuat Menu Grid seperti Faronesia
Masuk ke dashboard blog
- Lalu masuk ke menu tema blog.
- Kemudian klik edit HTML.
- Cari kode seperti ini ]]></b:skin> atau </style>.
/* faronesia.com mode grid*/
.icon-tags{margin-bottom:15px}
.icon-tags svg{width:25px;height:25px;display:block;margin:0 auto;margin-bottom:5px}
.icon-tags path{fill:#fff;transition:fill .2s}
.tag-grid{margin-right:10px}
.icon-tags .tag-grid{width:100%;padding:20px 10px;border-radius:5px;background:linear-gradient(to right, #d91e18, #cf000f); word-wrap:break-word;box-shadow:0 3px 8px 2px rgba(0,0,0,0.1)}
.icon-tags .tag-grid .icon-title{font-size:14px;font-weight:500;color:#fff}
.icon-tags .tag-menu1:hover path{fill:#efefef;}
.icon-tags .tag-menu2:hover path{fill:#efefef;}
.icon-tags .tag-menu3:hover path{fill:#efefef;}
.icon-tags .tag-menu4:hover path{fill:#efefef;}
.icon-tags .tag-menu5:hover path{fill:#efefef;}
.icon-tags .tag-menu6:hover path{fill:#efefef;}}
.icon-tags .tag-grid .icon-title:hover {color:#efefef; background-position: left;}
.tag-grid:hover {color:#efefef; background-position: left;}
.bs-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:20px}
- Selanjutnya, tempelkan kode html berikut ini setelah kode <div id='wrapper'> (khusus pengguna viomagz). Jika anda bukan pengguna viomagz silahkan cari kode yang hampir mirip.
<div class='icon-tags bs-row text-center'>
<div class='col-md-3 col-6'>
<a href='https://www.faronesia.com/'>
<div class='tag-grid tag-menu1'>
<svg viewbox='0 0 24 24'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z'/>
</svg>
<center><span class='icon-title'>Menu1
</span></center>
</div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='https://www.faronesia.com/'>
<div class='tag-grid tag-menu2'>
<svg viewbox='0 0 24 24'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z'/>
</svg>
<center><span class='icon-title'>Menu2
</span></center>
</div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='https://www.faronesia.com/'>
<div class='tag-grid tag-menu3'>
<svg viewbox='0 0 24 24'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z'/>
</svg>
<center><span class='icon-title'>Menu3
</span></center></div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='https://www.faronesia.com/'>
<div class='tag-grid tag-menu4'>
<svg viewbox='0 0 24 24'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z'/>
</svg>
<center><span class='icon-title'>Menu4
</span></center></div>
</a>
</div>
</div>
- Ubah link yang ditandai dengan warna Kuning dengan link yang anda inginkan.
- Ubah kode logo yang ditandai dengan warna Merah dengan logo yang anda inginkan.
- Setelah itu klik simpan dan lihat hasilnya.
- Jangan lupa kode css di Minifier terlebih dahulu agar tidak memberatkan loading blog.
Demikianlah mengenai Cara Membuat Menu Grid seperti Faronesia semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.