05 January 2015

Membuat Pure CSS Tabs untuk Blogger

Pure CSS Tabs Untuk Blogger

Pure CSS Tabs - Halo sobat Blanter semua, sudah lebih dari seminggu tidak update tutorial, karena paket modem habis. Kali ini saya akan memberikan tips/tutorial yang gak kalah menarik dari tutorial sebelumnya. "Auto Select Filters" Tutorial kali ini bernama "Pure CSS Tabs".

Apa Itu Pure CSS Tabs? - Pure CSS Tabs adalah suatu Style Teks, yang bertipe Tabs, Jika Tabs Diklik maka akan memunculkan Teks, dan Tabs Lainnya akan memunculkan teks yang berbeda, Pure CSS Tabs ini bukan hanya untuk Teks, tapi bisa juga untuk gambar, untuk lebih jelasnya silahkan lihat demo di bawah ini.


Jika sobat tertarik untuk mencobanya, silahkan ikuti tutorial di bawah ini.

Langkah Pertama Adalah HTML, Letakan HTML di tempat yang sobat inginkan.

 <section class="tabs-frame">
  <article class="tab">
    <input type="radio" id="tab_1" class="radio" name="tab_group_1" />
    <label for="tab_1" class="tab-button"></label>
    <section id="tab_frame_1" class="tab-frame">
      <p>...TAB 1 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_2" class="radio" name="tab_group_1" />
    <label for="tab_2" class="tab-button"></label>
    <section id="tab_frame_2" class="tab-frame">
      <p>...TAB 2 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked />
    <label for="tab_3" class="tab-button"></label>
    <section id="tab_frame_3" class="tab-frame">
      <p>...TAB 3 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_4" class="radio" name="tab_group_1" />
    <label for="tab_4" class="tab-button"></label>
    <section id="tab_frame_4" class="tab-frame">
      <p>...TAB 4 CONTENT...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_5" class="radio" name="tab_group_1" />
    <label for="tab_5" class="tab-button"></label>
    <section id="tab_frame_5" class="tab-frame">
      <p>...TAB 5 CONTENT...</p>
    </section>
  </article>
</section> 

Langkah Selanjutnya adalah CSS (Style), Letakan CSS di atas ]]></b:skin> atau </style>

 /* Frame */
.tabs-frame {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 50px;
    margin: auto;
    display: block;
}
/* Tabs */
.tabs-frame .tab {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
/* Tabs Radio */
.tabs-frame .tab .radio {
    display: none;
}

.tabs-frame .tab .tab-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    border-radius: 100%;
    border: 0 double #fff;
    background: #fafafa;
    display: block;
    -webkit-transition: .15s linear;
}

.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #fc6e51;
}

.tabs-frame .tab .tab-button:hover {
    background: #fc6e51;
}

/* Tabs Frame */
.tabs-frame .tab .tab-frame {
    position: absolute;
    top: 100%;
    left: -126px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    text-align: left;
    line-height: normal;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
    -webkit-transition: opacity .3s linear,
    -webkit-transform .3s linear;
    -webkit-transform: translate(0, -10%);
}

.tabs-frame .tab .tab-frame:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
}

.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}

.tabs-frame .tab .tab-frame p {
    padding: 0 20px;
    margin: 20px 0;
} 

Lalu Simpan Template dan Lihat Hasilnya... :)

Semoga Tutorial Ini bermanfaat... dan Tunggu Update selanjutnya..

Source : twistedshape.blogspot.com/2015/01/pure-css-tabs.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic