Cara membuat tab selector keren di blogger valid amp
Assalamu alaikum wr.wb..
Hai apa kabar semua kalon kemaren saya membuat artikel cara membuat komentar buka tutup dan sekarang saya hanya akan membagikan css untuk membuat TAB selecktor dan tentunya keren banget seperti biasa
Di bawah ini adalah demo TAB
Tentunya banyak sekali manfaat yang kita dapat dari sebuah TAB Selain sifatnya mandiri TAB bisa kita manfaat kan untuk kebutuhan lain misalnya kita ingin membuat artikel menjadi beberapa bagian kita bisa manfaatkan TAB tersebut, atau seperti saya, saya memanfaatkan TAB Untuk membuat tiga kotak komentar, supaya rapih dan enak di pandang
Gimanah apa kalian berminat ingin mencobanya, tenang Ajah gratis ko, saya kan baik hati hehehe
TAB selector di atas hanya membutuhkan dua jenis kode yaitu css murni dan HTML tentunya bisa kalian pasang untuk blogger
Langsung sajah di bawah ini adalah codenya
CSS
HTML
TIDAK ADA KETERANGAN
Supaya kita sama sama belajar
Itu ajah yang dapat saya search hari ini semoga bermanfaat
Hai apa kabar semua kalon kemaren saya membuat artikel cara membuat komentar buka tutup dan sekarang saya hanya akan membagikan css untuk membuat TAB selecktor dan tentunya keren banget seperti biasa
Di bawah ini adalah demo TAB
Tentunya banyak sekali manfaat yang kita dapat dari sebuah TAB Selain sifatnya mandiri TAB bisa kita manfaat kan untuk kebutuhan lain misalnya kita ingin membuat artikel menjadi beberapa bagian kita bisa manfaatkan TAB tersebut, atau seperti saya, saya memanfaatkan TAB Untuk membuat tiga kotak komentar, supaya rapih dan enak di pandang
Gimanah apa kalian berminat ingin mencobanya, tenang Ajah gratis ko, saya kan baik hati hehehe
TAB selector di atas hanya membutuhkan dua jenis kode yaitu css murni dan HTML tentunya bisa kalian pasang untuk blogger
Langsung sajah di bawah ini adalah codenya
CSS
.tabs {
position: relative;
display: flex;
min-height: 400px;
border-radius: 1px 1px 0 0;
overflow: hidden;
}
.tabby-tab {
flex: 1;
}
.tabby-tab label {
display: block;
box-sizing: border-box;
height: 200px;
color: #fff;
padding: 7px;
text-align: center;
background: rgb(42,98,169);
background: -moz-linear-gradient(top, rgba(42,98,169,1) 0%, rgba(51,146,190,1) 50%, rgba(61,200,213,1) 100%);
cursor: pointer;
transition: background 0.5s ease;
}
.tabby-tab label:hover {
background: #ff0000;
color:#fff;
}
.tabby-content {
position: absolute;
left: 0; bottom: 0; right: 0;
top: 15px;
padding: 5px;
border-radius: 0 0 2px 2px;
background: rgb(42,98,169);
background: -moz-linear-gradient(top, rgba(42,98,169,1) 0%, rgba(51,146,190,1) 50%, rgba(61,200,213,1) 100%);
background: -webkit-linear-gradient(top, rgba(42,98,169,1) 0%,rgba(51,146,190,1) 50%,rgba(61,200,213,1) 100%);
background: linear-gradient(to bottom, rgba(42,98,169,1) 0%,rgba(51,146,190,1) 50%,rgba(61,200,213,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a62a9', endColorstr='#3dc8d5',GradientType=0 );
color:#fff;
transition:
opacity 0.8s ease,
transform 0.8s ease ;
/* buka/tutup */
opacity: 0;
transform: scale(0.1);
transform-origin: top left;
}
.tabby-content amp-img {
float: left;
margin-right: 20px;
border-radius: 8px;
}
.tabby-tab [type=radio] { display: none; }
[type=radio]:checked ~ label {
background: #0d8de2;
z-index: 2;
}
[type=radio]:checked ~ label ~ .tabby-content {
z-index: 1;
/* buka/tutup */
opacity:30;
transform: scale(1);
}
@media screen and (max-width: 1087px) {
.tabs { min-height: 500px;}
}
@media screen and (max-width: 1087px) {
.tabs { min-height: 500px; }
.tabby-tab label {
height: auto;
}
.tabby-content { top: 30px; }
.tabby-content amp-img {
float: none;
margin-right:0;
margin-bottom: 2px;
}
}
HTML
<div class="tabs">
<div class="tabby-tab">
<input type="radio" id="tab-1" name="tabby-tabs" checked>
<label for="tab-1">TERBARU</label>
<div class="tabby-content">
Konten Anda taro di sini seperti gambar atau text
</div>
</div>
<div class="tabby-tab">
<input type="radio" id="tab-3" name="tabby-tabs">
<label for="tab-3">POPULAR</label>
<div class="tabby-content">
Konten Anda taro di sini seperti gambar atau text
</div>
</div>
<div class="tabby-tab">
<input type="radio" id="tab-4" name="tabby-tabs">
<label for="tab-4">MENARIK</label>
<div class="tabby-content">
Konten Anda taro di sini seperti gambar atau text
</div>
</div>
</div>
TIDAK ADA KETERANGAN
Supaya kita sama sama belajar
Itu ajah yang dapat saya search hari ini semoga bermanfaat
