Cara Membuat Multi Tab Responsive Pada Sidebar Blogger

cara membuat multi tab responsive pada sidebar blogger - ternyata sangat mudah sekali loh untuk kalian coba pasang pada blog yang sedang kalian kelola saat ini, dan multi tab yang akan admin bagikan pada kesempatan kali ini tentunya responsive dan tidak memberatkan loading blog jadi kalian tidak usah khawatir jika blog kalian loading nya lemot.

Tampilan dari multi tab ini sangat simple sekali karena sudah admin modifikasi sedemikian rupa sehingga tampilan nya akan terlihat simple namun terlihat elegan karena tidak menggunakan terlalu banyak warna pada tampilan nya, oke jika kalian sudah tidak sabar ingin mengetahui caranya silahkan ikuti langkah-langkah berikut ini.

CARA MEMBUAT MULTI TAB RESPONSIVE PADA SIDEBAR BLOGGER.

1) Masuk Blogger.
2) Pilih Tema => Edit HTML.
3) Lalu cara kode ]]></b:skin> atau bisa juga kode </style> gunakan tombol Ctrl-F untuk mempermudah pencarian.
4) Jika sudah ketemu kalian copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin> atau </style> tadi.

/* Multi Tab By Riziq Design*/ #sidebar-tab h2{display:none;} #select-tab{margin:0 auto 10px} #select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden} #select-tab li{float:left;width:33.3%;text-align:center} #select-tab a{line-height:53px;display:block;background-color:#425967;color:white;font-size:15px;text-decoration:none} #select-tab .selected a,#select-tab a:hover{background-color:#E74C3C} #sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0} #sidebar-main{overflow:hidden}

5) Lalu masukkan kode pemanggilnya di  bawah kode sidebar yaitu kode <aside id='sidebar-wrapper'> atau bisa juga kode <div id='sidebar-wrapper'> sesuai kan dengan template yang sedang kalian gunakan.

<div id='sidebar-tab'> <div id='tab'> <div class='tab-widget-menu clear'> <ul id='select-tab'> <li class='tab1'><a href='#tab1'>Popular Posts</a></li> <li class='tab2'><a href='#tab2'>Latest Posts</a></li> <li class='tab3'><a href='#tab3'>Labels</a></li> </ul> </div> <div id='sidebar-main'> <div class='widget1' id='tab1'> <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab2'> <b:section class='sidebar' id='tab2-latest-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab3'> <b:section class='sidebar' id='tab3-labels' showaddelement='yes'> </b:section> </div> </div> </div> <script type='text/javascript'> //<![CDATA[ $(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})}); //]]> </script> </div>

6) Simpan template.

Akan muncul 3 widget dengan bertulisan Tab1,Tab2,Tab3 jika masih belum muncul juga, kalian coba refresh (tekan tombol F+5) jika sudah muncul tinggal di isi dengan widget yang akan di tampilkan.

Nah ituh dia cara membuat  multi tab pada sidebar blog, gimana mudah sekali bukan? jika di antara kalian ada yang masih bingung atau tidak mengerti silahkan tinggalkan komentar kalian pada artikel ini admin akan membalas jika sedang tidak sibuk (ada waktu luang).

Mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya.

Facebook Twitter Google+