Membuat 3 Tab Keren dan Ringan di Sidebar

Sahabat Ngonline06, yang berbahagia. Semoga hari ini dalam keadaan sehat dan tetap semangat ya, terlebih yang 'memelihara' situs atau blog. Harus selalu diupdate dan dirawat penampilan situs dan blognya ya. 

Ngonline06 yakin bahwa teman-teman akan merawat dan mengupdatenya selalu. O ya, salah satu bentuk merawat dan memelihara situs atau blog adalah memberikan kemudahan kepada pengunjung berupa widget-widget yang sangat menarik. Namun di lain sisi, keberadaan widget tersebut tidak memakan tempat di blog atau situs kita.

Keren bukan? Mau tahu cara memasang widget yang banyak, tapi tak memakan tempat?

Salah satu cara mengantisipasi itu adalah dengan membuat tab di sidebar. Dalam berbagai situs profesional, keberadaan tab ini penting. Bahkan hampir semua situs profesional memakai tab di sidebarnya. Hal itu tidak lain selain meringkas tempat, juga menjadikan situs tersebut terlihat profesional.

Maka dari itu, menarik sekali untuk kita praktikkan. Eit, kadang hal yang membuat seseorang mengurungkan niat dalam membuat 3 tab di sidebarnya adalah loading blog. Bagaimana tidak, sudah memasang banyak widget, dan menambah tab koq tidak mengurangi loading blog. TENANG SAJA, dalam tutorial membuat 3 tab ini bisa dikatakan sangat ringan dan tidak banyak membebani loading blog sahabat semua.

Menariknya lagi, tab ini juga memiliki tampilan yang keren. Dia akan muncul dari bawah ke atas. Bagaimana apakah sahabat tertarik untuk membuatnya.

Mungkin sahabat Ngonline06 akan bertanya-tanya, bagaimana membuat tab tapi tidak membebani loading? Mungkin sahabat Ngonline06 akan bertanya-tanya, bagaimana tab yang ringan tapi tampilannya keren? Semua pertanyaan itu akan terjawab jika sahabat mempraktikkan tutorial membuat 3 tab keren dan ringan di seidebar ini dengan baik dan benar.

Yang pasti, trik membuat 3 tab keren dan ringan di sidebar ini menjadi RINGAN, karena tidak memakai jquery library yang memang sedikit banyak merender kecepatan blog. Maka ketika tidak memakai jquery, tentunya tidak akan banyak mempengaruhi loading blog sahabat semua.

Cara Membuat 3 Tab Keren dan Ringan di Sidebar

OK, langsung saja berikut tata cara membuat 3 tab keren dan ringan di sidebar. Trik ini adalah milik kang Adhy Suyadi dalam kompiajaibnya. INGAT, lakukan langkah-langkahnya dengan teliti dan benar.

1. Silahkan sahabat login di template sahabat semua.
2. Klik menu template > edit html.
3. Silahkan copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>.
.bar,
.bar1,
.bar2 {
  display: inline;
  float: left;
  width: 33.3333333333%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}
.bar{
  padding-right:2px;
}
.bar1{
  padding:0 3px;
}
.bar2{
  padding-left:2px;
}

.box-bar,
.box-bar1,
.box-bar2 {
  width: 100%;
  padding: 5px 10px;
  background: #f1f1f1;
  border: 1px solid #ddd;
  border-bottom: none;
  font-weight:bold;
  text-align:center;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clear {
  clear: both
}
#HTML1{
  margin:0 auto!important;
}

#FeaturedPost1,
#PopularPosts1,
#BlogArchive1 {
  width: 100%;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-top:none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin:0 auto!important;
}

#PopularPosts1,
#BlogArchive1 {
  display: none
}
#FeaturedPost1 h2,
#PopularPosts1 h2,
#BlogArchive1 h2{
  position:fixed;
  top:-1000px;
  right:-1000px;
}

.btncurrent {
  padding: 5px 10px 6px;
  margin-bottom: -1px;
  background:#fff;
  z-index:999;
}
#FeaturedPost1 .post-summary,
#PopularPosts1 .widget-content,
#BlogArchive1 .widget-content {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInUp {
  0% {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
Keterangan: Silahkan lakukan penyesuaian kode di atas dengan widget yang sahabat Ngonline06 hendak dipasang. Pada kode di langkah ketiga, widget yang ada adalah Feature Post, Popular Post, dan Arsip. Oleh karenanya, silahkan dirubah #FeaturedPost1, #PopularPost1, dan #BlogArchive1 dengan ID widget sahabat sendiri. Untuk widget yang akan dibuat, silahkan tempatkan secara berurutan. Adapun untuk kode #HTML1 silahkan ganti dengan ID widget tempat kode html tabber.
4. Selanjutnya, cari kode </body>. Letakkan kode di bawah ini tepat di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[
    var divs = ["FeaturedPost1", "PopularPosts1", "BlogArchive1"];
    var bar = document.getElementById('bar');
    var bar1 = document.getElementById('bar1');
    var bar2 = document.getElementById('bar2');
    var visibleDivId = null;
    bar.onclick = function() {
      this.addClass('btncurrent');
      this.toggleVisibility("FeaturedPost1");
      bar1.removeClass('btncurrent');
      bar2.removeClass('btncurrent');
    }
    bar1.onclick = function() {
      this.addClass('btncurrent');
      this.toggleVisibility("PopularPosts1");
      bar.removeClass('btncurrent');
      bar2.removeClass('btncurrent');
    }
    bar2.onclick = function() {
      this.addClass('btncurrent');
      this.toggleVisibility("BlogArchive1");
      bar1.removeClass('btncurrent');
      bar.removeClass('btncurrent');
    }

    HTMLElement.prototype.toggleVisibility = function(divId) {
      if (visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }

    function hideNonVisibleDivs() {
      var i, divId, div;
      for (i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if (visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

    HTMLElement.prototype.addClass = function(string) {
      if (!(string instanceof Array)) {
        string = string.split(' ');
      }
      for (var i = 0, len = string.length; i < len; ++i) {
        if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
          this.className = this.className.trim() + ' ' + string[i];
        }
      }
    }

    HTMLElement.prototype.removeClass = function(string) {
      if (!(string instanceof Array)) {
        string = string.split(' ');
      }
      for (var i = 0, len = string.length; i < len; ++i) {
        this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
      }
    }


//]]>
</script>
KETERANGAN: Silahkan lakukan penyesuaian untuk kode-kodenya dengan baik, khususnya dengan titte (judul) widgetnya.
5. Jika telah selesai, simpan.

Tralala, sekarang sahabat Ngonline telah memiliki 3 tab keren dan ringan di sidebar blognya. Semoga berhasil ya... Silahkan corat-coret jika ada hal yang belum dipahami, semoga bisa membantu.