Cara Mudah Membuat Tab Multi Widget (Tiga TAB Tampil di Sidebar) Pada Blogger

Tutorial Blog: Cara Mudah Membuat Tab Multi Widget (Tiga TAB Tampil di Sidebar) Pada Blogger 

 

Salam Saungjiwa blog, kali ini saya mencoba membahas cara membuat Tab Multi Widget. Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab diatasnya. Jadi sobat tidak perlu menyediakan area yang luas untuk widget yang banyak. Disini saya contohkan ada Tiga Tab tertera yaitu: TAB Artikel Popular Post, TAB Pengikut Sosial Media, dan TAB Komentar Artikel Blog.

Oke langsung saja ke langkah-langkah pembuatanya. 

A. Widget Peletakan di GADGET TATA LETAK  

1. Login ke kaun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode <script src='https://googleapis.com' type='text/javascript'/>, di atas kode </head>.
6. Klik simpan Template.
7. Selanjutnya masuk ke bagian Tata Letak.
8. Klik Tambah Gacget di posisi yang sobat inginkan.
9. Pilih HTML/Javascript.
10. Masukan kode berikut.

<style type="text/css">
/* --- Desain Kontainer Utama --- */
/* Menampilkan Tab dengan Efek Animasi Fade-In Halus */
.tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-list li {
  display: flex;
  align-items: center; /* Membuat gambar dan teks sejajar di tengah */
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
  font-size: 13px;
  line-height: 1.4;
}

.tab-container {
  margin: 15px 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* --- Baris Tombol Navigasi dengan Emoji --- */
.tab-buttons {
  display: flex;
  background: #f7f9fa;
  border-bottom: 1px solid #e0e0e0;
}
.tab-btn {
  flex: 1;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  transition: all 0.3s ease;
}
.tab-btn:hover {
  background: #f0f2f5;
  color: #333;
}
.tab-btn.active {
  background: #ffffff;
  color: #0073ff;
  border-bottom: 2px solid #0073ff;
}

/* --- Konten Tab --- */
.tab-content {
  display: none;
  padding: 15px;
  max-height: 380px;
  overflow-y: auto;
}
.tab-content.active {
  display: block;
}

/* --- Gaya List Artikel & Efek Thumb Berputar --- */
.tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
  font-size: 13px;
  line-height: 1.4;
}
.tab-list li:last-child {
  border-bottom: none;
}

/* Efek Thumbnail Bulat & Spin */
.thumb-round {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  transition: transform 0.6s ease-in-out;
  flex-shrink: 0;
}
.tab-list li:hover .thumb-round {
  transform: rotate(360deg);
  border-color: #0073ff;
}

.tab-list a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.tab-list a:hover {
  color: #0073ff;
}

/* Gaya Teks Tab Komentar */
.comment-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.blogger-emoji {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Box Pengikut & Tombol SVG Sosmed Keren --- */
.follow-box {
  text-align: center;
  padding: 10px 0;
}
.follow-btn {
  display: inline-block;
  background: #0073ff;
  color: #fff !important;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,115,255,0.3);
  text-decoration: none;
}
.social-icons-wrap {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}
.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  transition: transform 0.2s;
}
.social-icon-btn:hover {
  transform: scale(1.1);
}
.social-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}
.fb-btn { background: #1877F2; }
.ig-btn { background: #E1306C; }
.x-btn { background: #000000; }
</style>

<div class="tab-container">
  <!-- Baris Navigasi Tab Menggunakan Emoji Pilihan Anda -->
  <div class="tab-buttons">
    <button class="tab-btn active" onclick="switchTab(event, 'popular-tab')">🔥 Populer</button>
    <button class="tab-btn" onclick="switchTab(event, 'follow-tab')">👥 Pengikut</button>
    <button class="tab-btn" onclick="switchTab(event, 'comments-tab')">💬 Komentar</button>
  </div>

  <!-- TAB 1: POPULER -->
  <div id="popular-tab" class="tab-content active">
    <ul id="popular-list" class="tab-list"><li>Memuat artikel...</li></ul>
  </div>

  <!-- TAB 2: PENGIKUT (Menggunakan Ikon Gambar Sistem SVG Tersemat Langsung) -->
  <div id="follow-tab" class="tab-content">
    <div class="follow-box">
      <a class="follow-btn" href="https://www.blogger.com/followers/follow/6786013530695459380" target="_blank">Ikuti Blog Ini</a>
      <p style="font-size: 12px; color: #666; margin: 0;">Ikuti pembaruan artikel dan media sosial kami:</p>
      
      <div class="social-icons-wrap">
        <!-- Facebook SVG -->
        <a class="social-icon-btn fb-btn" href="https://facebook.com/aulia.tiloeagusta" target="_blank" title="Facebook">
          <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        </a>
        <!-- Instagram SVG -->
        <a class="social-icon-btn ig-btn" href="https://www.instagram.com/rumahbelajar_saungjiwa" target="_blank" title="Instagram">
          <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
        </a>
        <!-- X (Twitter) SVG -->
        <a class="social-icon-btn x-btn" href="https://x.com/agustaaulia" target="_blank" title="X Twitter">
          <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- TAB 3: KOMENTAR -->
  <div id="comments-tab" class="tab-content">
    <ul id="comments-list" class="tab-list"><li>Memuat komentar terbaru...</li></ul>
  </div>
</div>

<script type="text/javascript">
function switchTab(evt, tabId) {
  var contents = document.querySelectorAll(".tab-content");
  for (var i = 0; i < contents.length; i++) { contents[i].classList.remove("active"); }
  var buttons = document.querySelectorAll(".tab-btn");
  for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove("active"); }
  document.getElementById(tabId).classList.add("active");
  evt.currentTarget.classList.add("active");
}

// Ambil Artikel Populer
var xhrPosts = new XMLHttpRequest();
xhrPosts.open("GET", "/feeds/posts/default?alt=json&max-results=5", true);
xhrPosts.onreadystatechange = function() {
  if (xhrPosts.readyState === 4 && xhrPosts.status === 200) {
    var json = JSON.parse(xhrPosts.responseText);
    var entries = json.feed.entry || [];
    var html = "";
    
    for (var i = 0; i < entries.length; i++) {
      var entry = entries[i];
      var title = entry.title['$t'];
      var href = "";
      
      if (entry.link) {
        for (var j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel === "alternate") { href = entry.link[j].href; break; }
        }
      }
      
      var thumbUrl = "https://googleusercontent.com";
      if (entry.media$thumbnail) {
        thumbUrl = entry.media$thumbnail.url.replace(/\/s72\-c/, "/s150-c");
      }
      
      html += "<li><img class='thumb-round' src='" + thumbUrl + "' alt='" + title + "'/><a href='" + href + "'>" + title + "</a></li>";
    }
    document.getElementById("popular-list").innerHTML = html || "<li>Tidak ada artikel.</li>";
  }
};
xhrPosts.send();

// Ambil Komentar Terbaru & Singkirkan Komentar Admin
var xhrComments = new XMLHttpRequest();
xhrComments.open("GET", "/feeds/comments/default?alt=json&max-results=15", true); 
xhrComments.onreadystatechange = function() {
  if (xhrComments.readyState === 4 && xhrComments.status === 200) {
    var json = JSON.parse(xhrComments.responseText);
    var entries = json.feed.entry || [];
    var html = "";
    var count = 0;
    
    for (var i = 0; i < entries.length; i++) {
      if (count >= 5) break; 
      
      var entry = entries[i];
      
      // Ambil isi teks komentarnya dulu
      var content = entry.summary ? entry.summary['$t'] : (entry.content ? entry.content['$t'] : "");
      
      // 🟢 LANGSUNG DILEWATI JIKA KOMENTAR DIHAPUS / HIDDEN / KOSONG
      if (!content || content.toLowerCase().indexOf("hidden") !== -1 || content.toLowerCase().indexOf("disembunyikan") !== -1) {
        continue;
      }
      
      // Ambil data penulis menggunakan index Array [0] yang benar
      var author = (entry.author && entry.author[0]) ? entry.author[0].name['$t'] : "Anonim";
      var profileUrl = (entry.author && entry.author[0] && entry.author[0].uri) ? entry.author[0].uri['$t'] : "";
      
      // 🚫 FILTER ADMIN: Lewati jika link profil berisi ID Admin atau nama Anda
      if (profileUrl.indexOf("auliaagusta") !== -1 || profileUrl.indexOf("TiloeJungle") !== -1 || author.toLowerCase() === "tiloejungle" || author.toLowerCase() === "auliaagusta") {
        continue; 
      }
      
      content = content.replace(/<\/?[^>]+(>|$)/g, "");
      if (content.length > 55) content = content.substring(0, 55) + "...";
      
      var href = "";
      if (entry.link) {
        for (var j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel === "alternate") { href = entry.link[j].href; break; }
        }
      }
      
      // Penggantian Ikon Gambar Blogger Asli
      html += "<li class='comment-item'><img src='https://blogger.googleusercontent.com/img/a/AVvXsEiAQTkeBAEK0ZGLxkNbntg-Yfs-YrI5Mup1jJDBNG2Gu4ibexsZLh0TfvaJUkBVUCVDLKI7iYFrddaW-A2wKllwN30kIfsYgojsZ6E7ulGIPHCwFPnjeyUi22x87fsY88NsfJWlPtZfQIFQWb-syE4Xbbw6A4GDIk-m_iG6JRyHF3iByXPORQQ2l2Vu57pV=s1600' style='width:16px; height:16px; vertical-align:middle; margin-right:6px; flex-shrink:0;' alt='Blogger'/> <span><strong>" + author + ":</strong> <a href='" + href + "'>" + content + "</a></span></li>";
      count++;
    }
    document.getElementById("comments-list").innerHTML = html || "<li>Tidak ada komentar terbaru dari pembaca.</li>";
  }
};
xhrComments.send();

</script>

Keterangan, kode berwarna biru adalah kode-kode perubahan admin komentar di mode TAB Komentar, sesuaikan saja dengan data anda sob, kode berwarna hijau adalah kode-kode Sosial Media yang bisa sobat ubah URL nya. Semua kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan dan telah otomatis sobat sesuai kode.
11. Klik Simpan.
12. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.

 

Selesai, sobat dapat lihat hasilnya.

B. Menampilkan Widget dengan cara Mode kode HTML/Javascript Edit Template

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode </head> .

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>

6. Cari kode ]]></b:skin>,  agar lebih mudah gunakan tombol ctrl+F.
7. Masukan kode berikut di atas kode  ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

8. Klik Simpan Template.
9. Selanjutnya, Masuk ke bagian Tata Letak.
10. Klik Tambah gadget di posisi yang sobat inginkan.
11. Pilih HTML/Javascript.
12. Masukan kode berikut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

Selesai, sobat dapat lihat hasilnya.

Demikianlah artikel singkat saya kali ini tentang "Cara Mudah Membuat Tab Multi Widget (Tiga TAB Tampil di Sidebar) Pada Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...