Cara Membuat Widget Multi Tab Pure Css Di Sidebar Blogger

Kali ini Love Karawang akan berbagi tutorial untuk memasang sebuah widget baru yang di sebut dengan multi tab widget sidebar...

Sebelumnya saya juga sudah pernah posting widget multi tab sidebar, tapi pada postingan sebelumnya kita menggunakkan javascript untuk menampilkan dan menyembunyikan widget yang lainnya...

Bagi kalian yang ingin mencoba memasang yang menggunakan javascript,

Nah pada tutorial kali ini kita hanya menggunakan css untuk memilih widget mana yang akan ditampikan...

langsung saja ke tutorial cara memasang widget baru di sidebar dengan multi tab...

Membuat Widget Multi Tab Pure Css Di Sidebar Blog

• Tentunya kalian harus sudah login ke blogger.com

• kalo sudah login, masuk ke Template, Edit HTML
, Cari Kode </head>

• Kalo sudah ketemu, masukan css dibawah ini tepat di atasnya....

• <style type='text/css'>
  .container{width:100%;margin:0 auto}
  .tabs input[type="radio"]{display:none}
  .tabs nav{width:100%;display:table}
  .tabs label{display:table-cell;width:20%;line-height:3;text-align:center;border:1px solid black;text-transform:uppercase}
  .tabs label:hover{background-color:#ff6666;color:white}
  .tabs input[type="radio"]{display:none}
  .tabs nav{background-color:grey}
  .tabs label{width:34%;line-height:2}
  .tabs{position:relative;height:auto;padding:0 3px 24px}
  .tabs input[type="radio"]{display:none}
  .tabs nav{width:100%;display:table}
  .tabs label{background-color:gainsboro;border:1px solid black;cursor:pointer;display:table-cell;line-height:3;text-align:center;text-transform:uppercase}
  .tabs label:hover{background-color:#ff6666;color:white}
  .tabs article{border:1px solid black;left:0;padding:.5em;position:absolute;top:0;transform:scale(0);overflow:hidden}
  #tab_1:checked ~ nav [for='tab_1'],#tab_2:checked ~ nav [for='tab_2'],#tab_3:checked ~ nav [for='tab_3']{background-color:#ff6666;color:white}
  #tab_1:checked ~ nav [for='tab_1']:after,#tab_2:checked ~ nav [for='tab_2']:after,#tab_3:checked ~ nav [for='tab_3']:after{content:"";border-right:9px solid transparent;border-top:13px solid #f66;bottom:-42px;height:0;left:-28px;position:relative;width:0}
  #tab_1:checked ~ .tab_content_1,#tab_2:checked ~ .tab_content_2,#tab_3:checked ~ .tab_content_3{display:block;left:0;position:relative;top:1em;transform:scale(1);transition:transform 0.2s ease-out}
  </style>

• Nah Kalo Sudah Di Pasang kita tinggal memasang HTMLnya untuk menampilkan widget multi tab di seidebarnya...

• Silahkan kalian cari kode seperti berikut ini... <div id='sidebar-wrapper'> Atau <aside id='sidebar-wrapper'>
  Kalo tidak ada, silahkan sesuaikan dengan widget sidebar kalian, setiap template bisa beda2

• Kalo sudah Ketemu, Kalian tinggal memasukan HTML berikut dibawahnya

• <div class='container'>
    <div class='tabs col-xs-12 col-md-6'>
      <input checked='' id='tab_1' name='tab' type='radio'/>
      <input id='tab_2' name='tab' type='radio'/>
      <input id='tab_3' name='tab' type='radio'/>
      <nav>
        <label for='tab_1'>Popular</label>
        <label for='tab_2'>Terbaru</label>
        <label for='tab_3'>Komentar</label>
      </nav>
  <article class='tab_content_1'>
  <b:section class='sidebar' id='sidebartab1' preferred='yes'/>
  </article>
  <article class='tab_content_2'>
  <b:section class='sidebar' id='sidebartab2' preferred='yes'/>
  </article>
  <article class='tab_content_3'>
  <b:section class='sidebar' id='sidebartab3' preferred='yes'/>
  </article>
  </div>
  </div>

Silahkan sesuaikan Tulisan Popular, Terbaru, Komentar Dengan Nama Widget Kalian

• Kalo sudah, tinggal di save Dan Tinggal isi widget tadi dengan widget kalian di Tataletak..

Okeh, cukup sampai di sini tutorial tentang Cara Memasang Multi Tab Bidget Di Sidebar Pure CSS No Javascript ini bermanfaat ya :)

Apabila ada penjelasan yang kurang paham, silahkan bertanya di kolom Komentar ya :)