Tabber Sidebar With Css And Javascript
Berlanjut dari pembuatan show hide komentar Disqus, Blogger, dan Facebook, aku tertarik untuk memanfaatkan tabber yang dipakai untuk dimanfaatkan sebagai tabber widget di sidebar. Namun pada show hide komentar, aku 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 kalau blog tersebut tidak memakai jquery library yang di simpan di atas aba-aba </head>.Untuk itu aku lalu mencari cara dengan mengganti jqery dengan javascript untuk mengatur tampilan tab aktif semoga tidak memerlukan jquery library sehingga dapat tampil di semua halaman walaupun blog tidak memakai jquery library sekalipun.
Dan karenanya tabber dapat berjalan dengan javascript untuk mengatur tab aktif menyerupai 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 aba-aba 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 dibentuk tabber. Untuk widget yang akan dibentuk tabber simpan berurutan dari widget kesatu, kedua, dan ketiga. Dan untuk aba-aba HTML1 silahkan ganti dengan ID Widget daerah aba-aba HTML tabber (langkah ketiga di bawah).Untuk aba-aba di bawah ini yakni 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 alasannya yakni biasanya setiap custom template memakai kode-kode tag yang berbeda. Makara siahkan sesuaikan kode-kodenya kalau ada yang tidak pas atau silahkan tanyakan di kolom komentar, mudah-mudahan dapat aku bantu.
2. Kode Javascript
Silahkan simpan aba-aba javascript di bawah ini di atas aba-aba
</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 kode
["FeaturedPost1", "PopularPosts1", "BlogArchive1"]; dengan ID Widget yang dibentuk 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 aba-aba 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 dibentuk tabber dan sesuaikan text judul tabnya dengan title widgetnya.
Dan jangan lupa silahkan hapus semua kode
<b:include name='quickedit'/> di edit HTML.Penerapan aba-aba tabber sidebar ini memerlukan sedikit ketelitian semoga tabbernya dapat berjalan sempurna. Selamat mencoba dan semoga bermanfaat.
Sumber https://www.kompiajaib.com/
0 Response to "Tabber Sidebar With Css And Javascript"
Posting Komentar