Membuat ICON MENU ABMETRO UNIFORM Ala Ngerapik Blog dan AI

Salam apa kabar hari ini teman teman blogger, cuaca hari ini di Pangkalpinang sangat panas, air keran kontrakan mulai mengecil jadi hemat hemat air saat ini ya teman teman blogger khususnya di pangkalpinang. Tenggorokan rasa sakit, mungkin karna pengaruh cuaca yang panas.. minum dijaga juga teman teman jangan sampai lupa minum air putih.

Kali ini saya akan mengulas Kode Legend dari ABMETRO MENU. Dulu saat pertama kali menerapkannya sepertinya kode ini dari Abitalita yang merancang awalnya, dikarenakan di Icon tertampil disana, entahlah karena kode ini sudah hampir 11 tahun lamanya terdampar di header blog ngerapik ini. Melihat kode style css yang sudah usang, jadi saya meminta bantuan Mode Ai merenovasi agar lebih cantik dan ganteng untuk blog Ngerapik ini..ckckck.

Membuat ICON MENU ABMETRO UNIFORM merupakan langkah penting untuk meningkatkan tampilan website agar terlihat lebih profesional, modern, dan mudah digunakan. Penggunaan icon menu yang tepat tidak hanya mempercantik desain antarmuka, tetapi juga membantu pengunjung memahami fungsi setiap menu dengan lebih cepat sehingga pengalaman pengguna menjadi lebih baik.

Dalam dunia digital saat ini, tampilan website menjadi salah satu faktor yang memengaruhi kepercayaan pelanggan. Oleh karena itu, membuat icon menu ABMETRO UNIFORM dengan desain yang konsisten, responsif, dan sesuai identitas brand dapat memberikan nilai tambah sekaligus memperkuat citra perusahaan di mata calon pelanggan.

Pentingnya ICON MENU pada Website ABMETRO UNIFORM

Icon menu memiliki fungsi sebagai elemen visual yang mempermudah pengunjung dalam mengenali setiap navigasi pada website. Dibandingkan hanya menggunakan teks, kombinasi ikon dan tulisan akan membuat tampilan lebih menarik sekaligus meningkatkan kenyamanan saat menjelajahi halaman.

Bagi ABMETRO UNIFORM yang bergerak di bidang pembuatan seragam, website merupakan media promosi utama. Oleh karena itu, setiap menu harus didukung dengan ikon yang relevan agar pengunjung dapat menemukan informasi produk maupun layanan dengan lebih cepat.

Keuntungan Menggunakan ICON MENU yang Profesional

Desain icon yang konsisten mampu meningkatkan identitas visual sebuah website. Pengunjung akan lebih mudah mengingat tampilan website ketika seluruh ikon memiliki gaya desain yang seragam.

Selain meningkatkan estetika, icon menu juga membantu mempercepat proses navigasi. Pengunjung tidak perlu membaca seluruh teks karena dapat langsung mengenali fungsi menu melalui simbol yang ditampilkan.

Website yang memiliki navigasi jelas biasanya memberikan pengalaman pengguna yang lebih baik. Hal ini juga dapat meningkatkan durasi kunjungan dan menurunkan tingkat pengunjung yang meninggalkan website dalam waktu singkat.

Konsep Desain ICON MENU ABMETRO UNIFORM

Desain icon sebaiknya mengikuti identitas visual perusahaan. Warna utama dapat disesuaikan dengan logo ABMETRO UNIFORM sehingga tampilan website terlihat lebih harmonis.

Gunakan bentuk ikon yang sederhana namun mudah dikenali. Hindari penggunaan detail berlebihan karena dapat mengurangi keterbacaan terutama saat diakses melalui perangkat mobile.

Ukuran ikon juga harus proporsional agar tetap nyaman dilihat pada layar komputer maupun smartphone.

Menu yang Sebaiknya Menggunakan ICON

Menu Beranda dapat menggunakan ikon rumah sebagai simbol halaman utama website.

Menu Produk dapat menggunakan ikon seragam atau pakaian untuk menunjukkan katalog produk yang tersedia.

Menu Katalog dapat menggunakan ikon buku atau folder sebagai representasi daftar produk.

Menu Galeri dapat menggunakan ikon gambar untuk menampilkan hasil produksi dan portofolio perusahaan.

Menu Pemesanan dapat menggunakan ikon keranjang belanja agar pelanggan lebih mudah mengenali proses pembelian.

Menu Tentang Kami dapat menggunakan ikon gedung atau kantor sebagai identitas perusahaan.

Menu Kontak dapat menggunakan ikon telepon atau pesan sehingga pengunjung mengetahui cara menghubungi layanan pelanggan.

Menu Lokasi dapat menggunakan ikon pin peta untuk mempermudah pelanggan menemukan alamat perusahaan.

Memilih Warna ICON yang Tepat

Warna memiliki peran penting dalam membangun identitas visual website. Apabila ABMETRO UNIFORM menggunakan warna biru sebagai identitas perusahaan, maka icon menu dapat dibuat dengan kombinasi biru, putih, dan abu-abu agar terlihat profesional.

Gunakan warna yang memiliki kontras cukup tinggi sehingga ikon tetap terlihat jelas pada berbagai latar belakang.

Responsive pada Semua Perangkat

Website modern harus dapat diakses melalui berbagai ukuran layar. Oleh karena itu, icon menu harus tetap terlihat jelas baik pada komputer, tablet, maupun smartphone.

Penggunaan format SVG sangat direkomendasikan karena menghasilkan gambar yang tajam tanpa pecah meskipun diperbesar.

Pengaruh ICON MENU terhadap User Experience

Pengalaman pengguna menjadi salah satu faktor penting dalam keberhasilan sebuah website. Navigasi yang jelas akan membuat pengunjung lebih nyaman ketika mencari informasi produk maupun layanan.

Icon yang mudah dipahami dapat mempercepat interaksi pengguna sehingga proses menemukan halaman yang diinginkan menjadi lebih efisien.

Semakin baik pengalaman pengguna, semakin besar peluang pengunjung untuk melakukan pemesanan maupun menghubungi perusahaan.

Tips Mendesain ICON MENU yang Efektif

Gunakan gaya desain yang konsisten pada seluruh ikon agar tampilan website terlihat profesional.

Pastikan setiap ikon memiliki makna yang sesuai dengan fungsi menu sehingga mudah dipahami oleh semua pengunjung.

Hindari penggunaan warna terlalu mencolok yang dapat mengganggu fokus pengunjung saat membaca isi website.

Lakukan pengujian tampilan pada berbagai browser dan perangkat untuk memastikan seluruh icon tampil dengan baik.

FAQ Seputar Membuat ICON MENU ABMETRO UNIFORM

Mengapa icon menu penting pada website?

Karena membantu pengunjung memahami navigasi website dengan lebih cepat sekaligus meningkatkan tampilan visual.

Format icon apa yang paling direkomendasikan?

SVG merupakan pilihan terbaik karena ringan, tajam, dan responsif pada berbagai ukuran layar.

Apakah icon memengaruhi SEO?

Secara tidak langsung, ya. Icon yang meningkatkan pengalaman pengguna dapat membantu meningkatkan kualitas interaksi pengunjung di website.

Berapa ukuran ideal icon menu?

Umumnya antara 24 hingga 48 piksel tergantung desain website dan kebutuhan tampilan.

Apakah icon harus mengikuti identitas brand?

Sangat disarankan agar warna, bentuk, dan gaya icon selaras dengan identitas visual ABMETRO UNIFORM sehingga website terlihat lebih profesional.

PENERAPAN WIDGET KODE

Untuk menerapkan kode ini sangat lah mudah langsung saja lah kita aplikasikan, cekidot wae..

Teman teman blogger buka Edit HTML di TEMA blogger sobat semua, lalu cari kode <body>, tepat dibawahnya silahkan tempatkan kode ini:

Kode bagian Utama:

</> Bagian Utama

<div class='abmetromenu'>
  <div class='tile-bt solid-violetred AbMetroMenu' data-navid='om-nav'>
    <a class='gradient' href='http://ngerapik.blogspot.com'>
      <img alt='Homepage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwTxb786N3U3HMfxjGnn-dQBfWAgQ5Fdo5Ygodn-DE1UN9LZr4sIdYaFvYFA9CiHAMVfvXvMOCFvB0lBmCyJvPa13c8_REcvL_C39Fd0-pgYEHVSW2LEZt9ZnR_6Kd7fWgWwagewnDW1Q/s1600/home.png'/>
      <span class='light-text'>Homepage</span>
    </a>
  </div>
  
  <div class='tile-bt solid-coral AbMetroMenu' data-navid='om-nav'>
    <a class='gradient' href='http://ngerapik.blogspot.com/p/about-us.html'>
      <img alt='About US' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6e62raqMttJp4iU7drQ-HIZHC9oQGbG_UTXm05M0TnWTbMXFnrmi3e5tnHEotLAr5XHp8bg_Pl0aJI5xuaGvhPlTO4gLFsjoRo90QQ99uSYaLCtdJ_ZKx8dkndxWIj21UyEzgWti4WeE/s1600/messanger.png'/>
      <span class='light-text'>About US</span>
    </a>
  </div>
  
  <div class='tile-bt solid-purple AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='/p/sitemap-blog.html'>
      <img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiImJAvQEgAKNNi6YQpoQ1mwQgUrkbyVuah8H19XQrvwwXQTKv_XCaYRgkV1zzaS6zgf_bqipv1cRvMd3Q2dfnTMWHyH9E64OdrM0C7rXVbA2hTVofrfqKojPVjTpQuyv0LKKtx4018xgiV_RSgnxneWmbSVvo0aUnrHdQnHMjq5hJDVps3IV11HbU2-23J/s1600/sitemap.png'/>
      <span class='light-text'>Sitemap</span>
    </a>
  </div>
  
  <div class='tile-bt solid-red AbMetroMenu' data-navid='om-nav'>
    <a class='gradient' href='/p/syarat-ketentuan-terms-conditions.html'>
      <img alt='Search' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJ1hYoAGfQxl9nGGcMTKIT9alHKEQmVnNaPIlva_jn30rI8lLav2NZ0HkB4zqqvKhcyGxb62vEcHb_1nosOYRefImhyphenhyphenoZ8BcKQeJiinLGtvN3_eiS5soyjkLn_5femFYSJzstxSfSFQ_U_TMgEdoMv4m-3xKoyRcUDW1BqididblGzPjLRRgchCVfnn69/s1600/termC.png'/>
      <span class='light-text'>Terms & Conditions</span>
    </a>
  </div>
  
  <div class='tile-bt solid-darkred AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='http://ngerapik.blogspot.com/p/contact-us.html'>
      <img alt='Contact' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4mRTcIBPycduNZkfr4BpcsjZGt0r3ZmwCihk__npcUYCmCnm8QDayKjsVcnQlJqOlVOqDh7sHDI0C_bgpD58kh-a5rtm_0gyxsOKgPfT0r5dgptYcqYhyphenhyphenb6s_VGuEliZhTfF314Etx8/s1600/mail.png'/>
      <span class='light-text'>Contact US</span>
    </a>
  </div>
  
  <div class='tile-bt solid-black AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='http://ngerapik.blogspot.com/p/privacy-policy.html'>
      <img alt='Help' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDA-RzIJsB8IVvcIUmxZxCGnjKiUBMAxYzne_n0aX5NJzCQKTg8kwk81FjIqMoUYuGxuZk4Aq4_urUslbt5GcsPwJL-Env5KJlXeli4vFSF8DAp683EdgOBKU9Rx0kVdhjHkv7SQbudYRw1bVo2JPHL1DW1OkdK8mqWwQ0Gi8dy8wcs5Jizp6iVcg_BU9K/s1600/privacyp.png'/>
      <span class='light-text'>Privacy Policy</span>
    </a>
  </div>
  
  <div class='tile-bt solid-orange AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='https://www.blogger.com/profile/15374007948784091822'>
      <img alt='YouTube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaUONMPRiNDJLsFn9uqBL7tl11YWRBAgOtDlFZPLJGdEyxKehC1xY5WvlhWBocNoIsntwLPZTaUfWyaaRN0zm6eD0jV38PmWGOY7Wjl6L0w-gtgaGfaTJiVtMYyE-Tom05aNlclVNn9FavtBwL1xnora1N2VrMBlfdnyY3Nb-tu5TmjW4172KAOhWGNXG/s1600/blog.png'/>
      <span class='light-text'>Blogger</span>
    </a>
  </div>
  
  <div class='tile-bt solid-darkblue AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='https://www.facebook.com/aulia.tiloeagusta'>
      <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNEnxlibgK8bZO59JWnVplN_ZU3v7GA7DJdWbFSL1Eb2EaO_SnDp3vfyjhyloCjX16qqsQzw8p4poeDdAX6HwjAS-GloXisRy6_7xLyVXMBOk038HlV-zBHhCODk72Fnmv5PtkrdE16GU/s1600/face.png'/>
      <span class='light-text'>Facebook</span>
    </a>
  </div>
  
  <div class='tile-bt solid-blue AbMetroMenu' data-navid='om-nav'>
    <a class='gradient' href='https://www.tokobedoeit.online'>
      <img alt='Photos' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NIBlfbx6SelQT58xOpFwJPDXN3bzx2vKjeWZC5yzzsF6S-8YQtuYGqombQDFMjHezBbQ7pCueUOF69log8OSBJ7-RseX-f1kAwhxuOxi79uh-Hf4s5oL_RVL2du0J630kjdP6sErQvMTmZZcFtENwLNKrz-hW4hLjp-yWCFKrqH7A_ERYya03tSckOIo/s1600/tb.png'/>
      <span class='light-text'>Toko Bedoeit</span>
    </a>
  </div>
  
  <div class='tile-bt solid-olive AbMetroMenu' data-navid='om-nav2'>
    <a class='gradient' href='/p/tools-ala-ai.html'>
      <img alt='Music' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm4M3olG4kNGNxWf4dZ470So0LvZniTrlACTLnB-En20b6SsXX8sho1CwOh-VqEVjeH5lUoVIqHa9OWqgy7oHXJ7RN3WujXrSxK8TXqdh_6BDgzeimxG7gRJGKlYMvD86tJQfQzSoliejHYRLhpa8_GsIzZfjhA0MB37or77D_3LDLZpG4RYtitx0V1Ue9/s1600/tools.png'/>
      <span class='light-text'>Tools</span>
    </a>
  </div>  
</div>

</b:if>

lalu teman teman cari kode <://skin> atau <style> tepat diatasnya tempatkan kode CSS dibawah ini:

Kode bagian CSS:

</> Bagian CSS

/* Pengaturan dasar semua ubin disamakan */
  .AbMetroMenu {
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s ease;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  
  .AbMetroMenu:hover {
    transform: scale(1.02); /* Efek membesar sedikit saat di-hover */
  }

.AbMetroMenu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    padding: 10px;
    box-sizing: border-box;
  }

.AbMetroMenu img {
    max-width: 40px;
    height: auto;
    display: block;
    margin-bottom: 8px;
  }

.AbMetroMenu .light-text {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    word-break: break-word;
  }

/* Warna Background & Shadow Tradisional Windows Metro */
  .solid-violetred { background-color: #C11B17; box-shadow: 3px 3px 0px #000; }
  .solid-coral { background-color: #F87431; box-shadow: 3px 3px 0px #E55B3C; }
  .solid-purple { background-color: #8E35EF; box-shadow: 3px 3px 0px #483D8B; }
  .solid-red { background-color: #E41B17; box-shadow: 3px 3px 0px #B22222; }
  .solid-darkred { background-color: #8B0000; box-shadow: 3px 3px 0px #FF0000; }
  .solid-black { background-color: #000000; box-shadow: 3px 3px 0px #333; }
  .solid-orange { background-color: #FFA500; box-shadow: 3px 3px 0px #000; }
  .solid-darkblue { background-color: #00008B; box-shadow: 3px 3px 0px #0000FF; }
  .solid-blue { background-color: #0055ff; box-shadow: 3px 3px 0px #0000FF; }
  .solid-olive { background-color: #808000; box-shadow: 3px 3px 0px #008000; }
  .solid-blue-2 { background-color: #0078d7; box-shadow: 3px 3px 0px #005a9e; }

/* == UKURAN UNTUK LAYAR LAPTOP/DESKTOP (Sama rata seperti ukuran Facebook) == */
  @media (min-width: 769px) {
    .abmetromenu { justify-content: flex-start; } /* Rata kiri di laptop */
    .AbMetroMenu { 
      width: 120px; 
      height: 120px; 
    }
  }

/* == UKURAN UNTUK LAYAR HP/TABLET == */
  @media (max-width: 768px) {
    .AbMetroMenu {
      /* Membuat ubin otomatis membagi layar menjadi 2 kolom rata di HP */
      width: calc(50% - 5px); 
      height: 110px; 
    }
    .AbMetroMenu img {
      max-width: 35px; 
    }
    .AbMetroMenu .light-text {
      font-size: 11px; 
    }
  }
/*]]>*/
</style>

KETERANGAN DAN PERUBAHAN KODE

Edit dan rubah kode:

<a class='gradient' href='http://ngerapik.blogspot.com'>
<img alt='Homepage' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwTxb786N3U3HMfxjGnn-dQBfWAgQ5Fdo5Ygodn-DE1UN9LZr4sIdYaFvYFA9CiHAMVfvXvMOCFvB0lBmCyJvPa13c8_REcvL_C39Fd0-pgYEHVSW2LEZt9ZnR_6Kd7fWgWwagewnDW1Q/s1600/home.png'/>
<span class='light-text'>Homepage</span>
</a> // sesuai navigasi icon Menu sobat blogger semuanya

gap: 10px; /* Jarak antar ubin */ penaturan jarak icon apabila ingin teman teman blogger merubahnya
SIMPAN edit HTML Template

Kesimpulan

Membuat ICON MENU ABMETRO UNIFORM bukan hanya soal mempercantik tampilan website, tetapi juga meningkatkan kenyamanan pengunjung dalam menggunakan navigasi. Dengan desain yang konsisten, responsif, dan sesuai identitas perusahaan, icon menu mampu memperkuat citra brand sekaligus mendukung pengalaman pengguna yang lebih baik.

Penggunaan icon berkualitas, tata letak yang rapi, serta pemilihan warna yang tepat akan menjadikan website ABMETRO UNIFORM lebih profesional, mudah digunakan, dan siap bersaing di era digital. Investasi pada desain navigasi yang baik juga dapat memberikan dampak positif terhadap kepercayaan pelanggan dan perkembangan bisnis dalam jangka panjang.

Demikianlah artikel kali ini tentang "Membuat Menu ICON ABMETRO MENU UNIFORM Ala Ngerapik Blog dan Ai" semoga bermanfaat dan bisa diaplikasikan di blogger teman teman semua. Apabila ada yang ingin disampaikan dan ditanyakan silahkan koment di bawah ya.. Salam Ngerapik Blog..