Cara Mudah Buat Menu Tabview Tanpa Edit Html

Cara Buat TabView Tanpa Edit Html - Sebagai cara untuk menghemat space blog, biasanya para blogger menggunakan berbagai cara tampilan menu, seperti menu dropdown, menu sliding, menu horisontal, atau banyak juga yang menggunakan tabview pada sidebar blog. 

Tampilan menu tabview sangat efisien untuk di pasang pada sidebar blog, karena ukuran yang relatif kecil tetapi memuat banyak space. Tampilan sidebar menu tabview bisa sobat lihat pada gambar di bawah ini.

Bagi sobat yang ingin membuat menu tabview untuk dipasang pada sidebar blog, sebagai blogger pemula, saya ingin berbagi sedikit pengetahuan kepada sobat blogger pemula yang mungkin masih belum tahu cara membuat menu tabview.

Berikut script menu tabview tanpa edit html :

<style type="text/css">

body {font-family: "Lato", sans-serif;}

/* Ukuran Tab */ 

div.tab {width:100%; /* Lebar tabview */
    overflow: hidden;
    border: 1px solid #ccc; /*warna garis pinggir tab */
    background-color: #f1f1f1;
}

/* Style tombol Tab */
div.tab button {width:50%;height:100%; /*Lebar dan Tinggi Tombol Tab Tabview */
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 16px;
    transition: 0.3s;
    font-size: 14px; /*Font menu Tab */

    border: 1px solid #ccc;
}

/* Ganti warna Tab ketika ditunjuk kursor */
div.tab button:hover {
    background-color: #888;
}

/* Tab aktif */
div.tab button.active {
    background-color: #0084ce;
}

/* Style isi tab */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

</style>


<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'TAB1')" id="defaultOpen">TAB1</button>
<button class="tablinks" onclick="openCity(event, 'TAB2')">TAB2</button>
</div>


<div id="TAB1" class="tabcontent">

Isi dengan script Tab1

</div>

<div id="TAB2" class="tabcontent">

Isi dengan script Tab2

</div>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>


Source : 
https://www.w3schools.com/

Langkah membuat Menu TabView :

1. Login ke blogger.com
2. Pilih dan klik "Tata Letak"

3. Kemudian klik "Tambah Widget" pada sidebar.

4. Setelah itu, pilih Html/Javascript

5. Lalu, Copy dan Pastekan script tabview di atas pada kolom konten.

6. Terakhir klik "Simpan/Save"

Demikian cara membuat menu TabView tanpa Html yang bisa saya bagikan pada sobat blogger pemula yang sekiranya membutuhkan.  "Semoga Bermanfaat"