Cara Menambahkan Ikon Font Awesome di Tombol Menu Blogger (Tab View)

[Show]

Ingin membuat tampilan menu tab di blog kamu jadi lebih menarik, modern, dan informatif? Salah satu caranya adalah dengan menambahkan ikon di setiap tombol menu. Ikon membantu memperjelas maksud dari setiap menu dan juga mempercantik tampilannya, apalagi jika blog kamu dibuka di perangkat mobile.

🔧 Apa Itu Font Awesome?

Font Awesome adalah pustaka ikon gratis yang berisi ribuan ikon dalam bentuk font yang bisa dengan mudah digunakan di situs web, termasuk Blogger.

✍️ Langkah-langkah Menambahkan Ikon

1. Tambahkan Link Font Awesome

Pastikan kamu sudah menyisipkan kode berikut di bagian atas HTML blog kamu (misalnya di dalam <head> atau sebelum </body>):

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>

2. Tambahkan Ikon ke Tombol Menu

Contoh tombol menu dengan ikon:

<button class="tab-btn active" data-target="komputer">
  <i class="fas fa-desktop"></i> Komputer
</button>

Kamu bisa mengganti bagian <i class="fas fa-desktop"></i> dengan ikon lain dari daftar di bawah ini.

✅ Daftar Ikon Font Awesome Populer untuk Menu Blogger

Menu	Ikon	Kode Class
Komputer	🖥️	`fas fa-desktop`
Tutorial	🧰	`fas fa-chalkboard-teacher`
Blogger	💻	`fab fa-blogger`
Info	ℹ️	`fas fa-info-circle`
Tips & Trik	💡	`fas fa-lightbulb`
Komentar	💬	`fas fa-comments`
Musik	🎵	`fas fa-music`
Berita	📰	`fas fa-newspaper`
File / Dokumen	📝	`fas fa-file-alt`
Internet / Web	🌐	`fas fa-globe`
Edukasi	📚	`fas fa-book`
Keamanan	🔒	`fas fa-shield-alt`

💡 Tips Desain

Gunakan ikon secara konsisten agar menu terlihat rapi.
Jangan terlalu banyak ikon berbeda yang membuat tampilan jadi berantakan.
Pastikan ikon mudah dikenali oleh pengunjung.

📷 Contoh Lengkap

<div class="tab-buttons modern-tab">
  <button class="tab-btn active" data-target="tutorial">
    <i class="fas fa-chalkboard-teacher"></i> Tutorial
  </button>
  <button class="tab-btn" data-target="blogger">
    <i class="fab fa-blogger"></i> Blogger
  </button>
  <button class="tab-btn" data-target="komputer">
    <i class="fas fa-desktop"></i> Komputer
  </button>
  <button class="tab-btn" data-target="info">
    <i class="fas fa-info-circle"></i> Info
  </button>
</div>

Berikut adalah versi lengkap HTML siap paste ke Blogger (melalui Tata Letak → Tambahkan Gadget → HTML/JavaScript) yang sudah:

Mobile friendly
Pakai ikon Font Awesome
Menampilkan judul artikel berdasarkan label
Memuat konten tab saat tombol diklik
Tampil rapi di desktop dan mobile

✅ Kode Siap Pakai (copy semuanya ke dalam gadget HTML/JavaScript):

<!-- Font Awesome (untuk ikon) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>

<!-- Tab Buttons -->
<div class="tab-buttons modern-tab">
  <button class="tab-btn active" data-target="tutorial">
    <i class="fas fa-chalkboard-teacher"></i> Tutorial
  </button>
  <button class="tab-btn" data-target="blogger">
    <i class="fab fa-blogger"></i> Blogger
  </button>
  <button class="tab-btn" data-target="komputer">
    <i class="fas fa-desktop"></i> Komputer
  </button>
  <button class="tab-btn" data-target="info">
    <i class="fas fa-info-circle"></i> Info
  </button>
</div>

<!-- Tab Content -->
<div class="tab-content modern-tab-content">
  <div class="tab-panel active" id="tutorial">
    <ul id="label-tutorial"></ul>
  </div>
  <div class="tab-panel" id="blogger">
    <ul id="label-blogger"></ul>
  </div>
  <div class="tab-panel" id="komputer">
    <ul id="label-komputer"></ul>
  </div>
  <div class="tab-panel" id="info">
    <ul id="label-info"></ul>
  </div>
</div>

<!-- CSS -->
<style>
.modern-tab {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.modern-tab::-webkit-scrollbar {
  height: 5px;
}
.modern-tab::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.tab-btn {
  padding: 8px 12px;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.3s ease;
  white-space: nowrap;
  scroll-snap-align: start;
}
.tab-btn i {
  font-size: 14px;
}
.tab-btn:hover {
  background: #e0e0e0;
}
.tab-btn.active {
  background: #007BFF;
  color: #fff;
}
.tab-content {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}
.tab-panel ul {
  padding-left: 20px;
  margin: 0;
  list-style: none;
}
.tab-panel li {
  margin-bottom: 6px;
  position: relative;
}
.tab-panel li::before {
  content: "📌";
  margin-right: 6px;
}
.tab-panel li a {
  text-decoration: none;
  color: #007BFF;
  transition: color 0.3s;
}
.tab-panel li a:hover {
  text-decoration: underline;
  color: #0056b3;
}

@media screen and (max-width: 600px) {
  .modern-tab {
    flex-wrap: nowrap;
  }
}
</style>

<!-- JS -->
<script>
//<![CDATA[
(function () {
  var btns = document.getElementsByClassName("tab-btn");
  var panels = document.getElementsByClassName("tab-panel");

  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function () {
      for (var j = 0; j < btns.length; j++) {
        btns[j].classList.remove("active");
        panels[j].classList.remove("active");
      }
      this.classList.add("active");
      var targetId = this.getAttribute("data-target");
      document.getElementById(targetId).classList.add("active");
    });
  }
})();

function loadLabelPosts(label, containerId, maxResults) {
  var script = document.createElement('script');
  script.src = `/feeds/posts/default/-/${label}?alt=json-in-script&callback=function_${containerId}&max-results=${maxResults}`;
  document.body.appendChild(script);
}

function buildList(entries) {
  var list = '';
  for (var i = 0; i < entries.length; i++) {
    var title = entries[i].title.$t;
    var link = entries[i].link.find(l => l.rel === "alternate").href;
    list += `<li><a href="${link}">${title}</a></li>`;
  }
  return list;
}

// Callback Functions
function function_label_tutorial(json) {
  document.getElementById('label-tutorial').innerHTML = buildList(json.feed.entry || []);
}
function function_label_blogger(json) {
  document.getElementById('label-blogger').innerHTML = buildList(json.feed.entry || []);
}
function function_label_komputer(json) {
  document.getElementById('label-komputer').innerHTML = buildList(json.feed.entry || []);
}
function function_label_info(json) {
  document.getElementById('label-info').innerHTML = buildList(json.feed.entry || []);
}

// Load Feed
loadLabelPosts('Tutorial', 'label_tutorial', 5);
loadLabelPosts('Blogger', 'label_blogger', 5);
loadLabelPosts('Komputer', 'label_komputer', 5);
loadLabelPosts('Info', 'label_info', 5);
//]]>
</script>

📌 Catatan:

Ganti label sesuai dengan label yang kamu gunakan di postingan Blogger.
Kamu bisa menambah tab lain dengan duplikat <button> dan <div> sesuai pola di atas.
Ingin ikon lain? Gunakan daftar dari Font Awesome.

Jika ingin saya bantu buat versi untuk label lain, tinggal beri tahu nama label dan ikon yang kamu inginkan.

🏁 Penutup

Dengan menambahkan ikon Font Awesome pada menu tab, tampilan blog kamu akan menjadi lebih profesional dan user-friendly, terutama untuk pengunjung dari perangkat mobile. Jangan lupa sesuaikan ikon dengan isi konten dari setiap tab ya!

Kalau kamu butuh ikon kategori lain (misalnya islami, sekolah, bisnis, dll), tulis di komentar — nanti saya bantu kirim daftarnya.

Semoga bermanfaat! 👍