Cara Membuat Multi Tab Sidebar Responsive Di Blogger - Komputerdia | Berbagi Tutorial

Cara Membuat Multi Tab Sidebar Responsive Di Blogger

komputerdia.com - Apa yang dimaksud dengan multi tab sidebar ? Multi tab sidebar adalah salah satu fitur yang terdapat pada sebuah situs atau blog yang selalu dipasang di samping kiri atau kanan blog, guna untuk menampilkan beberapa informasi blog tersebut seperti popular post, archive, kategori atau bahkan widget lainnya.

Dalam kata lain multi tab sidebar bisa juga diartikan sebagai sidebar di dalam sidebar. Maksudnya didalam satu sidebar kita bisa menambahkan dua, tiga, atau bahkan empat sidebar dengan tambahan tombol tab.

Dalam artikel kali ini, saya akan mencoba menjelaskan cara membuat multi tab sidebar responsive di blogger dengan cara edit html. Untuk kalan yang belum membaca artikel sebelumnya, silahkan kalian baca di artikel terkait dibawah ini

Baca Juga Artikel Lainnya :

Cara Membuat Multi Tab Sidebar Responsive Di Blogger

Cara Membuat Multi Tab Responsive Di Blogger

  • Langkah pertama silahkan kalian login ke akun blogger kalian
  • Masuk ke menu Tema dan pilih menu edit html
  • Setelah itu silahkan kalian cari kode ]]></b:skin> atau </style>, dengan cara menekan ctrl+f dan ketikkan perintah ]]></b:skin> atau </style>
  • Setelah itu silahkan kalian copy dan tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#005cba;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #005cba;font-size:14px;text-transform:capitalize}
  • Selanjutnya silahkan kalian cari kode </body>, dan tempelkan kode dibawah ini tepat diatas kode </body> tersebut
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
  • Langkah selanjutnya, silahkan kalian cari kode <div id='sidebar-wrapper'>, dan tempelkan kode dibawah ini tepat dibawah kode <div id='sidebar-wrapper'>
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
  • Setelah semua kode telah kalian pasang, silahkan simpan setelah template blog kalian dan lihat hasilnya
  • Selesai, semoga bermanfaat untuk kalian semuanya
.
.
.
.

Berlangganan Artikel terbaru (free):

Post a Comment