Menu Tab View Tanpa Edit HTML 2

Selamat Bertemu Kembali!!! Postingan ini adalah update dari postingan saya sebelumnya. Postingan ini saya buat karena style menu tab view sebelumnya, terkesang sangat sederhana dan itu-itu saja. Jadi, saya membuat dua style baru yang. Langkahnya sudah tau kan? Kalau belum, gampang kok. tidak terlalu susah. Oke, kita mulai saja.

Pertama, silahkan login ke akun Anda. Klik RANCANGAN kemudian klik TAMBAHKAN GADGET, pada halaman ELEMEN LAMAN. Kalau sudah terbuka tab baru, copy kode di berikut ke dalamnya.

  • Copy kode berikut untuk Menu Tab View dengan border yang melengkung.


    Hasilnya seperti gambar di bawah.

  • Copy kode berikut untuk Menu Tab View biasa.




  • Hasilnya akan seperti ini.
    Catatan: Silahkan ganti tulisan berwarna HIJAU sesuai keinginan Anda. Untuk tulisan berwarna MERAH ganti sesuai dengan judul Menunya dan WIDTH sesuaikan dengan ukuran sidebar blog Anda.


Oke!!! Silahkan berkreasi untuk lebih bagusnya agar sesuai dengan warna blog Anda. Kalau ada yang kurang jelas, silahkan tinggalkan komentar.

Membuat Menu Tab View tanpa Edit HTML

Para blogger mungkin sudah pernah mencoba membuat tab view menu atau menu dengan tab (lihat gambar di atas) yang tentu saja dalam pembuatan tab view menunya kita harus mengedit HTML template. Bagi yang belum dan ingin mencobanya, tidak perlu takut. Tulisan kali ini akan membahas cara membuat tab view menu tanpa mengedit kode HTML template.

Caranya sangatlah gampang, tidak perlu susah-susah. Sobat blogger tinggal menggabungkan kode tab view menu ke dalam sidebar Anda. Masih bingung? Oke, langsung saja ikuti petunjuk berikut ini.
Silahkan login ke Blogger, pilih RANCANGAN, kemudian pada Elemen Halaman, klik Tambah Gadget. Silahkan pilih HTML/Javascript. Copy paste kode di bawah ini ke dalamnya:

<style type="text/css">
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:8px; 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">

Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Tulisan warna kuning adalah judul dari menu Anda, sedangkan tulisan warna merah adalah isi dari menunya. Untuk lebar, huruf (font), dan tingginya, silahkan sesuaikan dengan lebar sidebar blog Anda. Hasilnya bisa Anda lihat di sini!

Kalau belum jelas, silahkan berkomentar. Ditunggu ya???
Selamat Belajar!!!

Mengenal Kode HTML

Bagi teman-teman yang baru belajar dan ingin tahu tentang kode-kode HTML, silahkan pelajari kode-kode dasar berikut.

HTML adalah singkatan dari Hypertext Markup Language yang merupakan bahasa dari World Wide Web (WWW) yang dipergunakan untuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program browser

Tag-tag dasar HTML:
<html>           : Definisi sebuah dokumen HTML
<title>            : Definisi judul dalam dokumen
<body>          : Definisi body dokumen
<h1> - <h6>  : Definisi heading 1 s/d 6
<p>                : Definisi sebuah paragraf
<br>               : Sisipan line break
<!-- >             : Definisi kompentar dalam source code

Tag-tag pemformatan:
<b>         : Teks yang ditebalkan
<big>       : Teks dengan ukuran yang besar
<em>       : Teks yang diberi tekanan
<i>           : Teks yang dimiringkan
<small>    : Teks yang kecil ukurannya
<strong>  : Teks yang ditebalkan
<sub>      : Subscipt
<sup>      : Superscript
<ins>        : Teks yang disisipkan
<del>       : Teks yang dihapus
<u>          : Teks yang diberi garis bawah

Tag-tag Link dan List:
<a>       : Definisi untuk ancor
<link>    : untuk warna text sebelum diklik
<vlink>  : untuk mengubah warna text link setelah diklik
<alink>  : akan mengubah warna link aktif
<ol>      : Ordered list / untuk penomoran
<ul>      : Unordered List / bullet
<li>       : List item
<dl>      : Definition term
<dd>     : Definition description

Karakter khusus dalam file HTML :
& quot ;   ( " ) 
& amp ;   ( & ) 
& frasl ;    ( ⁄ ) 
& lt ;         ( < )
& gt ;        ( > ) 
& nbsp ;    ( spasi )
& copy ;    ( © )

Selamat belajar dan sukses selalu!!!