CARA MEMBUAT MENU TAB VIEW DI BLOG TANPA EDIT HTML TEMPLATE

Cara Membuat Menu Tab View di Blog Tanpa Edit HTML Template – Menu tab view di blog ini berguna untuk membuat kotak untuk meletekkan links artikel – artikel kita, teks – teks yang lain, banner dan kita juga bisa meletakkan widget. Mugnkin, banyak kita temukan cara membuat menu tab view di blog dengan mendesain HTML template. Ini beresiko kegegalan dan merusak template kita jika kita tidak memback-up template kita.

Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML

Namun kali ini kita akan membahas mengenai cara membuat menu tab view di blog tanpa edit HTML template kita. disini kita hanya tinggal memasukkan apa yang kita inginkan. Baiklah langsung saja. Kebanyakan basa – basi bosan nanti.

Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML Template

Langkah – Langkahnya :

•        Pastikan sudah terhubung dengan internet.
•        Lalu, kita login ke blogger.com.
•        Selanjutnya, kita pilih arah panah ke bawah dan klik Tata Letak.

  

  Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML (1)

•        Kemudian, kita klik Tambah Widget.

  

  Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML (2)

•        Setelah itu, pilih HTML/JavaScript.

  

  Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML (3)

•        Selanjutnya, kita masukkan kode di bawah ini pada kolom konten.

  

  Cara Membuat Menu Tab View Di Blog Tanpa Edit HTML (4)

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color: #000;
padding-top: 2px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E;  }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #ffffff;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan :
                 - Kode warna kuning adalah warna judul tab.
                 - Kode warna ungu adalah judul tab.
                 - Kode warna hijau adalah panjang dan tinggi kotak.
                 - Kode warna merah adalah isi menu tab view. Bisa diisi teks, link, benner, dan widget – widget.

• Pada kolom judul bisa kita isi atau dikosongkan.
• Jika sudah selesai. Kita klik simpan atau Save.
• Kita bisa lihat hasilnya di blog kita.
• Selesai.

# Baca Juga : Cara Membuat Artikel Terkait atau Related Post di blog

Itulah langkah – langkah mudah cara membuat menu tab view di blog tanpa edit HTML template kita. Mudah – mudahan dapat bermanfaat bagi kita semua. Mohon ma’af atas kesalahan dan kekurangan. Terima kasih atas kunjungannya. Jangan lupa like fanspage di bawah. Sekian dan Terima Kasih.