×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Menu Grid seperti Faronesia

Faronesia.com - Halo sobat blogger, sudah sekian lama faronesia tidak membuat tutorial blog bukan? bahkan ada beberapa teman blogger yang menganggap bahwa saya berhenti ngeblog. Sebenarnya anggapan itu tidak benar, hal ini dikarenakan saya selaku admin faronesia sibuk dengan pekerjaan offline yang menjadikan blog faronesia berhenti membuat konten sementara.

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.
Buka komentar
Tutup komentar

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup