Cara Membuat Tab Menu View Pada Blog

Guna untuk membuat blog Anda tidak memiliki kesan rumit karna terlalu banyak Gadget atau fasilitas tambahan yang terpasang di blog Anda, yang tentunya berpengaruh terhadap kecepatan blog. Untuk menghemat tempat, Cara Membuat Tab Menu View Pada Blog sangat efisien dan menjadi salah satu solusi terbaik. Ukuran yang relatif kecil tapi bisa memuat banyak space.

Cara Membuat Tab Menu View Pada Blog

Pasang Cara Membuat Tab Menu View Pada Blog Hematkan Ruangan Home Page Blog Anda

Berbagi Kreativitas akan mengulas sebuah artikel yang tidak asing lagi tentunya untuk para blogger mania, namun tips ini sungguh bermanfaat dan menguntungkan untuk blog dan masih pula banyak peminatnya seperti para blogger yang baru atau newbe seperti saya. Langsung saja lihat langkah-langkah-nya di bawah ini.

1. Masuk ke blogger.com
2. Pada Dasbor pilih Rancangan ->> Edit HTML
3. Setiap melakukan Edit HTML pada blog Anda, alangkah baiknya Backup atau Download terlebih dahulu template blog Anda
4. Ceklis atau centang Expand Template Widget, sebelum melakukan pengeditan
5. Lalu cari kode tekan (Ctrl+F) untuk mencari, </head> letakan kode di bawah ini tepat di atas kode tersebut

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

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);

// ----- Pages -----

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);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>

6. Kemudian cari kode tekan (Ctrl+F) untuk mencari, ]]></b:skin> letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

7. Kemudian simpan template blog Anda
8. Masuk ke Elemen lama blog Anda tambahkan Gadget HTML/ JavaScript, dan tambahkan kode di bawah ini

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

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

9. Simpan Gadget.

Keterangan :
• Lakukan pengaturan pada lebar dan tinggi form, judul dan isi menu sesuai kebutuhan Anda pada kode langkah no urut 6 di atas
• Isi dari menu, silahkan Anda isi dengan teks, link, gambar dan lain-lain.
Selamat mencoba salam sukses!