Membuat Tab Dengan Pure CSS Pada Blog

Cara ini adalah cara yang sangat simpel dan membuat sebuah tata letak lebih strategis dan lebih teratur karena pada tutorial kali ini kita akan membuat sebuah penyempurnaan dari yang awalnya terpisah kita ambil contohnya yaitu Tab 1 dengan tab 2 dan seterusnya namun dengan memaksimalkan hasil yang sesuai dengan keinginan kita.

Mari kita langsung saja ke artikel pembuatannya

Pertama anda masuk ke dashboard blogger 

Kemudian anda klik Tema - Edit HTML

Lalu masukan kode dibawah ini tepat diatas ]]></b:skin> 

.tabs {
    width: 650px;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
}
.tabs li {
    display: block;
}
.labels:after {
    content: '';
    display: table;
    clear: both;
}
.tabs label {
    display: inline-block;
    float: left;
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: normal;
    background: #5E9C00;
    cursor: pointer;
}
.tabs label:hover {
    background: #3498db;
}
.tab-content {
    display: none;
    width: 100%;
    padding: 15px;
    border:1px solid #ccc;
    border-top: 10px solid #08C;
    background-color:#ffffff;
}
.tabs input[type=radio] {
    display:none;
}
[id^=tab]:checked ~ div[id^=tab-content] {
    display: block;
}
[id^=tab]:checked ~ [id^=label]  {
    background: #08C;
    color: white;
}

Lalu untuk mempercantik bagian Body Tab nya anda tambahkan kode dibawah ini

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  background: #F6703A;
  font-size:18px;
  line-height: 32px;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  }

Jika sudah ini yang terakhir, masukan kode dibawah ini di dalam HTML/JavaScript.

Caranya ke Tata Letak - Add WIdget - Pilih HTML/Javascript

<ul class="tabs">
        <li class="labels">
            <label for="tab1" id="label1">tab 1</label>
            <label for="tab2" id="label2">tab 2</label>
            <label for="tab3" id="label3">tab 3</label>
        </li>
        <li>
            <input type="radio" checked name="tabs" id="tab1">
            <div id="tab-content1" class="tab-content">
                <h3>Tab 1</h3>
                <!-- Your Content Here -->
            </div>
        </li>
        <li>
            <input type="radio" name="tabs" id="tab2">
            <div id="tab-content2" class="tab-content">
                <h3>Tab 2</h3>
                <!-- Your Content Here -->
            </div>
        </li>
        <li>
            <input type="radio" name="tabs" id="tab3">  
            <div id="tab-content3" class="tab-content">
                <h3>Tab 3</h3>
                <!-- Your Content Here -->
            </div>
        </li>
    </ul>  

Mudah bukan caranya, Selamat mencoba dan berkreasi
Untuk melihat demo anda bisa lihat disini

Terima kasih anda telah membaca artikel Membuat Tab Dengan Pure CSS Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: