Tab View dengan Background
TabView adalah salah satu alternatif dimana teman-teman bisa menghemat tempat dalam satu halaman, dengan memasang widget TabView ini teman-teman dapat menambahkan berbagai jenis widget hingga beberapa widget kedalamnya.
Selain itu TabView ini juga dapat divariasikan, misalnya dengan menempatkan sebuah gambar hingga menjadi Background untuk TabView ini. Untuk lebih jelas lagi teman-teman dapat membuatnya dengan mengikuti langkah-langkah dibawah ini;
Langkah Pertama:
/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: right;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: -24px; /* ukuran tinggi menu */
padding-top: 4px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #6E6E6E; /* warna border menu */
border-bottom-width: 1px solid #6E6E6E;;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 11px; /* besar hurup menu */
letter-spacing: -1px;
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/DeepSea.gif) repeat scroll 0 0; /* warna latar menu */
color: #FAAC58; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:2px;
}
div.TabView div.Tabs a.Active {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/Golden.gif) repeat scroll 0 0; /* warna background menu aktif */
color: #66B5FF;
}
div.TabView div.Tabs a:hover {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/YellowContrast.gif) repeat scroll 0 0; /* warna background menu hover */
color: #B45F04;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #6E6E6E; /* warna border kotak utama */
overflow: hidden;
background: transparent url("http://static.myopera.com/community/graphics/themes/darkvines.jpg"); /* 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;
font-size: 11px; /* besar hurup kotak utama */
}
Keterangan:
Langkah Kedua:
<script src="https://sites.google.com/site/archivesiugi/for_post/TabViewJavascript.js" type="text/javascript"/>
Langkah Ketiga:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
Keterangan:
Pada tulisan yang tercetak tebal dapat teman-teman ganti disesuaikan dengan kebutuhan. Milsalnya, Widget, Foto atau Gambar dll...
width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.
Selain itu TabView ini juga dapat divariasikan, misalnya dengan menempatkan sebuah gambar hingga menjadi Background untuk TabView ini. Untuk lebih jelas lagi teman-teman dapat membuatnya dengan mengikuti langkah-langkah dibawah ini;
Langkah Pertama:
- Login ke akun Blogger kamu.
- Dari halaman dashboard, pilih Edit HTML.
- Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
- Copy script berikut dan letakkan di atas kode ]]></b:skin>
/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: right;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: -24px; /* ukuran tinggi menu */
padding-top: 4px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #6E6E6E; /* warna border menu */
border-bottom-width: 1px solid #6E6E6E;;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 11px; /* besar hurup menu */
letter-spacing: -1px;
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/DeepSea.gif) repeat scroll 0 0; /* warna latar menu */
color: #FAAC58; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:2px;
}
div.TabView div.Tabs a.Active {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/Golden.gif) repeat scroll 0 0; /* warna background menu aktif */
color: #66B5FF;
}
div.TabView div.Tabs a:hover {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/YellowContrast.gif) repeat scroll 0 0; /* warna background menu hover */
color: #B45F04;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #6E6E6E; /* warna border kotak utama */
overflow: hidden;
background: transparent url("http://static.myopera.com/community/graphics/themes/darkvines.jpg"); /* 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;
font-size: 11px; /* besar hurup kotak utama */
}
Keterangan:
- warna Merah, URL Image background.
- warna Kuning, kode warna background
- warna Hijau, ukuran untuk menu utama ( bentuk ujung lengkung / kotak, makin besar angka makin lengkung )
Langkah Kedua:
- Setelah itu letakkan kode berikut di bawah kode]]></b:skin>
<script src="https://sites.google.com/site/archivesiugi/for_post/TabViewJavascript.js" type="text/javascript"/>
Langkah Ketiga:
- Pilih tab Elemen Halaman ( Page Element ).
- Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
- Copy script berikut dan letakkan pada kotak Content yang tersedia:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
Keterangan:
Pada tulisan yang tercetak tebal dapat teman-teman ganti disesuaikan dengan kebutuhan. Milsalnya, Widget, Foto atau Gambar dll...
width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.
- Lalu Simpan dan selesai.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon