Cara Membuat Multi Tab Sidebar CSS

Pada Kesempatan ini , admin akan memberikan tutorial Cara Membuat Multi Tab Sidebar CSS Zkrip . Multi Tab Sidebar adalah widget blogger yang wajib dipakai oleh blogger yang menginginkan tampilan blog yang minimalis namun lengkap. Mungkin diantara kalian ada yang bertanya , mengapa bisa seperti itu?.Ya widget ini bisa menghemat tempat dari 3 widget menjadikan satu tempat. Jangan khawatir loading page blog anda menjadi lambat , karena widget ini hanya menggunakan CSS(bukan javascript).Untuk yang sudah tidak sabar untuk mencoba tutorialnya, silakan simak langkah-langkahnya dibawah ini.

• Pertama , masuk ke blogger lalu pilih template dan edit HTML.
• Cari kode </style> atau ]]></b:skin>,pilih salah satu.
• Letakan kode berikut di atas kode </style> atau ]]></b:skin>.

.container{padding-top:5px;width:100%;margin:0 auto}
.tabs input[type=&quot;radio&quot;]{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=&quot;radio&quot;]{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=&quot;radio&quot;]{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=&#39;tab_1&#39;],#tab_2:checked ~ nav [for=&#39;tab_2&#39;],#tab_3:checked ~ nav [for=&#39;tab_3&#39;]{background-color:#24887B;color:white}
#tab_1:checked ~ nav [for=&#39;tab_1&#39;]:after,#tab_2:checked ~ nav [for=&#39;tab_2&#39;]:after,#tab_3:checked ~ nav [for=&#39;tab_3&#39;]:after{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{background-color:#24887B;display:block;left:0;position:relative;top:5px;transform:scale(1);transition:transform 0.2s ease-out}

• Kemudian anda cari kode berikut

<div id='sidebar-wrapper'>

atau 

<aside id='sidebar-wrapper'>

• Kode setiap template berbeda, jadi cari kode HTML yang berhubungan dengan sidebar seperti diatas.
• Lalu letakan kode berikut di bawahnya.

<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>

• Simpan
• Sekarang kalian bisa mengatur widget yang ingin dimasukan ke dalamnya dengan tata letak.

Tweet

Postingan terkait:

Ditulis Tarsisius — Februari 06, 2017 — Add Comment — Tutorial