komputerdia.com - Apa yang dimaksud dengan multi tab sidebar ? Multi tab sidebar yaitu salah satu fitur yang terdapat pada sebuah situs atau blog yang selalu dipasang di samping kiri atau kanan blog, guna untuk menampilkan beberapa gosip blog tersebut menyerupai popular post, archive, kategori atau bahkan widget lainnya.
Dalam kata lain multi tab sidebar sanggup juga diartikan sebagai sidebar di dalam sidebar. Maksudnya didalam satu sidebar kita sanggup menambahkan dua, tiga, atau bahkan empat sidebar dengan aksesori tombol tab.
Dalam artikel kali ini, saya akan mencoba menjelaskan cara menciptakan 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 Memasang Kode Agar Konten atau Artikel Blog Tidak Bisa Di Copy Paste
- Cara Membuat Button Sosial Media Di Kombinasikan Dengan Tombol Back To Top
- Cara Direct atau Meneruskan Page Not Found 404 Ke Halaman Lain
Cara Membuat Multi Tab Responsive Di Blogger
- Langkah pertama silahkan kalian login ke akun blogger kalian
- Masuk ke sajian Tema dan pilih sajian 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 arahan dibawah ini sempurna 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 arahan </body>, dan tempelkan arahan dibawah ini sempurna diatas arahan </body> tersebut
<script type='text/j4vascript'> //<![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 arahan dibawah ini sempurna 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 arahan telah kalian pasang, silahkan simpan sehabis template blog kalian dan lihat hasilnya
- Selesai, agar bermanfaat untuk kalian semuanya