Tabber Sidebar With CSS And Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 2/29/2016

Berlanjut dari pembuatan show hide komentar Disqus, Blogger, dan Facebook, saya tertarik untuk memanfaatkan tabber yang digunakan untuk dimanfaatkan sebagai tabber widget di sidebar. Namun pada show hide komentar, saya memanfaatkan jquery dari threaded comments untuk mengatur tab aktif pada tabber sehingga ini tidak akan berjalan pada tabber sidebar yang akan tampil di semua halaman jika blog tersebut tidak menggunakan jquery library yang di simpan di atas kode </head>.

Untuk itu saya kemudian mencari cara dengan mengganti jqery dengan javascript untuk mengatur tampilan tab aktif agar tidak memerlukan jquery library sehingga bisa tampil di semua halaman walaupun blog tidak menggunakan jquery library sekalipun.

Dan akhirnya tabber bisa berjalan dengan javascript untuk mengatur tab aktif seperti pada gambar animasi gif di bawah ini atau silahkan lihat pada link demonya. Saya menerapkan tabber sidebar ini pada default template Blogger dan custom template Blogger.



Jika ada yang ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Kode CSS
Silahkan copy kode CSS di bawah ini dan simpan 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);

  }

  }

Kustomisasi untuk default template Blogger:
Silahkan ganti dan sesuaikan kode #FeaturedPost1, #PopularPosts1, #BlogArchive1 dengan ID Widget yang akan dibuat tabber. Untuk widget yang akan dibuat tabber simpan berurutan dari widget kesatu, kedua, dan ketiga. Dan untuk kode HTML1 silahkan ganti dengan ID Widget tempat kode HTML tabber (langkah ketiga di bawah).

Untuk kode di bawah ini adalah untuk widget kedua dan ketiga, silahkan ganti dan sesuaikan dengan ID Widget kedua dan ketiga.

#PopularPosts1,

#BlogArchive1 {

  display: none

}

Kustomisasi untuk custom template Blogger:
Untuk custom template Blogger agak sedikit berbeda dan tentunya akan ada perbedaan kustomisasi karena biasanya setiap custom template menggunakan kode-kode tag yang berbeda. Jadi siahkan sesuaikan kode-kodenya jika ada yang tidak pas atau silahkan tanyakan di kolom komentar, mudah-mudahan bisa saya bantu.

2. Kode Javascript
Silahkan simpan kode javascript di bawah ini 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>

Kustomisasi:
Silahkan ganti dan sesuaikan kode ["FeaturedPost1", "PopularPosts1", "BlogArchive1"]; dengan ID Widget yang dibuat tabber. Kemudian silahkan ganti dan sesuaikan kode FeaturedPost1, PopularPosts1, BlogArchive1 yang dibawahnya berurutan untuk widget kesatu, kedua, dan ketiga.

3. Kode HTML Tabber
Silahkan simpan kode HTML di bawah ini pada gadget HTML/JavaScript di tata letak.

<div class="bar">

  <div id="bar" class='box-bar btncurrent'>

    Featured

  </div>

</div>

<div class="bar1">

  <div id="bar1" class='box-bar1'>

    Popular

  </div>

</div>

<div class="bar2">

  <div id="bar2" class='box-bar2'>

    Archive

  </div>

</div>

<div class='clear'>

</div>

Simpan gadget ini di atas semua widget yang akan dibuat tabber dan sesuaikan text judul tabnya dengan title widgetnya.

Dan jangan lupa silahkan hapus semua kode <b:include name='quickedit'/> di edit HTML.

Penerapan kode tabber sidebar ini memerlukan sedikit ketelitian agar tabbernya bisa berjalan sempurna. Selamat mencoba dan semoga bermanfaat.