Membuat Menu Tab View Di Blog

Halo teman-teman gimana kabarnya? baikkan? sekarang dalam postingan/articles kali ini blog oto website akan membahas tentang Membuat Dan Memasang Menu Tab View Di Blog, pasti udah pada tau dong? bagi yang belum tau akan saya jelaskan sedikit apa maksud postingan/articles kali ini.
Menu Tab View adalah salah satu widget yang bisa di bilang praktis yang bisa kita jadikan satu tempat di blog kita seperti kita menjadikan daftar isi, label, statistik, dan lain-lain.
Jadi kita menjadikannya satu widget simple contohnya sobat bisa lihat di gambar samping, dan mungkin bisa sobat lihat juga di widget blog ini(jika blog ini masih menggunakannya)
jadi di tab menu widget saya hanya memberi tiga kategori seperti daftar isi, label, dan statistik!
sebenarnya tabnya bisa kita tambah tergantung pemilik blog, tapi kalo blog ini cukup hanya tuga saja.
sobat juga bisa membuat menu tab view sobat dan dapat memberikan kategori tab view sobat sendiri, gimana apa sobat berminat membuat menu tab view??? hayo berminat tidak?hehehe....
Jika sobat berminat sobat hanya tinggal menambahkan kode script di element HTML dan menambah kode script di widget,
oke dah tidak panjang-panjang lagi karna saya juga sudah kehabisan kata-kata hehehe....
bagi sobat yang berminat kita lansung bahas aja ya, silahkan sobat ikuti langkah-langkah berikut!

1.Pertama-tama silahkan sobat login ke blog sobat blogger.com.

2.Jika sudah masuk pada menu tab di atas klick Rancangan ➮ Edit HTML.

3.Pada Kotak Edik HTML sekarang sobat cari kode </head> jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.


4.Bila sudah ketemu, sekarang copy kode scrip berikut dan paste/letakkan di atas kode tadi, ya'itu kode </head>

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

5.Masih dalm kotak HTML, sekarang cari kode ]]></b:skin> jika sudah ketemu sekarang letakkan kode script berikut di atas kode tadi.

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

6.Sekarang simpan.

7.Tinggal satu langkah lagi, sekarang pada menu tab klick Rancangan ➮ Tambah Gadget ➮ Pilih HTML/Java Script ➮ pada kolom HTML/Java Script copy kode di bawah ini dan pastekan ke dalamnya.

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

8.Simpan, dan lihat hasilnya!

Keterangan:
a.
Silahkan sobat sesuaikan sendiri kode script pada nomer 2.
Seperti warna border dan jenis font huruf, dan lainnya.
Untuk melihat kode warna sobat bisa melihat di sini Kode Waran V1 - Kode Warna V2 dan Kode Warna V3.
Untuk melihat macam-macam jenis font huruf sobat bisa lihat di sini Macam-Macam Jenis Font Huruf.

b.
Silahkan sobat ganti teks waran merah dengan judul tab/menu sobat seperti Daftar Isi/labe/Statistik/Lain sebagainya.
Ganti warna biru dengan kode link/script/gambar yang sobat suka.


untu memasukkan daftar isi blog sobat kedalam Menu Tab View ada 2 cara, silahkan sobat pilih cara mana yang sobat suka!

cara a;



<br />
<a href='LINK URL'>JUDUL</a>
<br />
<a href='LINK URL'>JUDUL</a>
dan seterusnya . . .

contoh:

<br />
<a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-g-mail.html ' > Cara Membuat E-mail Di G-mail</a>
<br />
<a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-yahoo.html ' > Cara Membuat E-mail Di Yahoo</a>
dan sterusnya . . .

atau cara b;


<li><a href='LINK URL' >JUDUL</li>
<li><a href='LINK URL' >JUDUL</li>
dan seterusnya . . .


contoh;

<li><a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-g-mail.html ' > Cara Membuat E-mail Di G-mail </li>
<li><a href=' http://otowebsite.blogspot.com/2011/12/cara-membuat-e-mail-di-yahoo.html ' > Cara Membuat E-mail Di Yahoo</li>
dan seterusnya.

Gimana sudah ngerti kan???

Bagaimana apakah berhasil menerapkannya di blog sobat? silahkan tinggalkan komentar atau tanggapan sobat tentang postingan/articles kali ini!