Cara Membuat Tabs di Blogspot

Cara membuat tabs di blogspot atau di blogger adalah hal yang sangat perlu di terapkan. karena hal ini akan memberikan daya tarik sendiri untuk penampilan blog kita, yang kelihatannya lebih simpel dan menarik untuk di lihat. Nah tentunya akan menjadi daya pikat bagi pengunjung, agar pengunjung betah berlama-lamaan di blog kita.

Seperti kebanyakan blog lain, dimana kita lihat di sidebar mau pun di fotter atau di header blog mereka banyak terdapat widget - widget, yang memungkin kan akan lama nya proses loading suatu blog tersebut. Nah untuk mengatasi terjadi nya kelamaan loading adalah dengan cara menambah Tabs. kita hanya cukup memerlukan satu widget untuk menempat kan isi content yang terdapat di widget-widget yang banyak tadi.

Untuk anda yang ingin blog nya kelihatan simple dan menarik untuk di lihat anda bisa menambahkan widget ini untuk blog anda. Berikut langkah-langkah cara menambah tabs ke dalam blog:

1. Langkah Pertama

1. Login ke blogger
2. Klik Template >> Edit HTML;
3. Cari kode </head>;
4. Kemudian letakkan kode di bawah ini tepat di atas </head>
   
   

   <style>
   .MultiTabs {
     border: 0;
     margin: 1.5rem 0;
     padding: 0;
   }
   .MultiTabs input, .MultiTabs .content > div {
     display: none;
   }
   .MultiTabs label, .MultiTabs .content {
     border-style: solid;
     border-width: 1px;
   }
   .MultiTabs input:checked + label, .MultiTabs .content {
     border-color: #ddd;
   }
   .MultiTabs .label {
     display: flex;
     flex-wrap: nowrap;
     flex-direction: row;
     max-width: calc(100vw - 2.5rem);
     overflow: auto;
   }
   .MultiTabs label {
     background-color: #cae2d4;
     border-color: transparent;
     border-bottom: 1px solid #ddd;
     color: #000;
     cursor: pointer;
     display: inline-block;
     float: left;
     padding: .65rem 1.25rem;
     position: relative;
     top: 1px;
     transition: all .3s ease;
   }
   .MultiTabs input:checked + label {
     background-color: #88aaab;
     border-bottom: 4px solid #ffdf07;
     color: #fff;
     font-weight: bold;
   }
   .MultiTabs .content {
     clear: both;
     padding: 1.5rem 1.25rem;
   }
   
   .MultiTabs #tab1:checked ~ .content .tab1,
   .MultiTabs #tab2:checked ~ .content .tab2,
   .MultiTabs #tab3:checked ~ .content .tab3,
   .MultiTabs #tab4:checked ~ .content .tab4,
   .MultiTabs #tab5:checked ~ .content .tab5 {
     display: block;
   }
   </style>
   

   
   
5. Kemudian klik Simpan Tamplate

2. Langkah Kedua

1. Langkah kedua membuat Tabs, Klik Tata Letak >> Tambahkan Gadget;
2. Pilih HTML/JavaScript
   
   
3. Paste kode dibawah ini ke dalamnya
   
   

   <fieldset class="MultiTabs">
     <input id="tab1" name="mTab" type="radio" checked="checked"/>
     <label for="tab1">Tab 1</label>
     <input id="tab2" name="mTab" type="radio"/>
     <label for="tab2">Tab 2</label>
     <input id="tab3" name="mTab" type="radio"/>
     <label for="tab3">Tab 3</label>
     <input id="tab4" name="mTab" type="radio"/>
     <label for="tab4">Tab 4</label>
     <input id="tab5" name="mTab" type="radio"/>
     <label for="tab5">Tab 5</label>
     
    <div class="content">
     <div class="tab1">
   
         ISI TAB 1
         
     </div>
     <div class="tab2">
   
         ISI TAB 2
    
     </div>
     <div class="tab3">
   
         ISI TAB 3
   
     </div>
     <div class="tab4">
   
         ISI TAB 4
   
     </div>
     <div class="tab5">
   
        ISI TAB 5
        
     </div>
     </div>
   </fieldset>
   

   
   
4. Untuk Tulisan berwarna MERAH letakkan kode konten yang ingin Anda tampilkan
5. Untuk tulisan berwarna BIRU ganti Judul Tab sesuai konten, yang tentunya kode html antara kedua warna ini memiliki keterikatan satu sama lain;
6. Kemudian simpan dan lihat hasilnya

Silahkan Anda berkreasi mengganti besar kecilnya tampilan tab serta warna yang pasti menyesuaikan dengan warna default blog Anda. Pengaturannya ada di style CSS kode script diatas.

Semoga Bermanfaat.