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="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:#24887B;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{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.
Belum ada tanggapan untuk "Cara Membuat Multi Tab Sidebar CSS "
Posting Komentar