Cara Menciptakan Tabber Di Sidebar Blog

Cara Membuat Tabber di Sidebar Blog - Tidak sedikit pengguna Blogger yang memasang CSS dan Java Script ini untuk menciptakan Tabber si Sidebar di Blog mereka. Tujuan Membuat Tabber di Sidebar Blog ini yaitu supaya tampilan Blog kita tampil rapi dan memperlihatkan embel-embel ruang di sidebar widget kita. Untuk teman yang ingin tau 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 arahan ]]></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 arahan #FeaturedPost1, #PopularPosts1, #BlogArchive1 dengan ID Widget yang akan dibentuk tabber. Untuk widget yang akan dibentuk tabber simpan berurutan dari widget kesatu, kedua, dan ketiga. Dan untuk arahan HTML1 silahkan ganti dengan ID Widget tempat arahan HTML tabber (langkah ketiga di bawah).
Untuk arahan di bawah ini yaitu 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 sebab biasanya setiap custom template memakai kode-kode tag yang berbeda. Kaprikornus siahkan sesuaikan kode-kodenya jikalau ada yang tidak pas atau silahkan tanyakan di kolom komentar, mudah-mudahan dapat aku bantu.
2. Kode Javascript

Login ke Blogger > Template > Edit HTML > Silahkan copy arahan javascript di bawah ini dan simpan di atas arahan </body>

<script type='text/javascript'>  //<![CDATA[      var divs = ["FeaturedPost1", "PopularPosts1", "BlogArchive1"];      var kafe = 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 arahan ["FeaturedPost1", "PopularPosts1", "BlogArchive1"]; dengan ID Widget yang dibentuk tabber. Kemudian silahkan ganti dan sesuaikan arahan 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 dibentuk tabber dan sesuaikan text judul tabnya dengan title widgetnya.
Dan jangan lupa silahkan hapus semua arahan <b:include name='quickedit'/> di edit HTML.
Penerapan arahan tabber sidebar ini memerlukan sedikit ketelitian supaya tabbernya dapat berjalan sempurna. Selamat mencoba dan semoga bermanfaat.
Source : http://goo.gl/UDcqLe

Share this post