Membuat Widget Multi Tab Pure Css Di Sidebar Blog

Cara Membuat Widget Multi Tab Pure Css Di Sidebar Blogger

Tutorial Cara Memasang Widget Multi Tab Di Sidebar Blogger Tanpa Javascript Kali ini aku akan membuatkan tutorial untuk memasang sebuah widget gres yang di sebut dengan multi tab widget sidebar...

Sebelumnya aku 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 memakai javascript, silahkan mampir ke tutorial berikut ini... Cara Memasang Widget Multi Tab Di Sidebar Blogger

Nah pada tutorial kali ini kita hanya memakai css untuk menentukan widget mana yang akan ditampikan...

pribadi saja ke tutorial cara memasang widget gres 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 sempurna 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 instruksi ibarat berikut ini... <div id='sidebar-wrapper'> Atau <aside id='sidebar-wrapper'>
  Kalo tidak ada, silahkan sesuaikan dengan widget sidebar kalian, setiap template dapat 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 hingga di sini tutorial perihal Cara Memasang Multi Tab Bidget Di Sidebar Pure CSS No Javascript ini bermanfaat ya :)

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