Cara Membuat Tabber di Sidebar Blog

Cara Membuat Tabber di Sidebar Blog - Tidak sedikit pengguna Blogger yang memasang CSS dan Java Script ini untuk membuat Tabber si Sidebar di Blog mereka. Tujuan Membuat Tabber di Sidebar Blog ini adalah agar tampilan Blog kita tampil rapi dan memberikan tambahan ruang di sidebar widget kita. Untuk sobat yang penasaran ingin mencobanya, silahkan simak Bagaimana Cara Membuat Tabber di Sidebar Blog berikut :

Cara Membuat Tabber di Sidebar Blog

1. Kode CSS

Login ke Blogger > Template > Edit HTML > 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

Login ke Blogger > Template > Edit HTML > Silahkan copy kode javascript di bawah ini dan simpan 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 login ke Blogger > Tata Letak > Add Widget > HTML/JavaScript > Copas Kode HTML di bawah ini :

<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.