Tabber Sidebar With CSS And Javascript

Tabber Sidebar With CSS And Javascript

Bola Hero Gawai

Tabber Sidebar With CSS And Javascript

Tabber Sidebar With CSS And Javascript
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.

Tabber Sidebar


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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

3 Comments Add Comment

kok jadi ga bisa sih side tabber ini, setelah pasang komentar disqus, blogger, facebook.

Balas

Kalau dua-duanya digunakan harus ada perubahan di javascript-nya agar tidak bentrok.

Balas

Salam saya coba di blog saya, Tabber ini hanya berfungsi di homepage saja, setelah readmore, Tabber popular dan arsip tidak berfungsi? bagaimana solusinya?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×