إنضم لنا

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

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail