Cara Membuat Tab Multi Widget 3in1 Sederhana
- Masuk ke akun Blog sobat => Rancangan => Edit HTML
- Cari kode </head> gunakan ctrl+f atau f3 untuk mempercepat pencarian.
- Dan tepat di atasnya simpan kode di bawah ini.
<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var Halamans = Tabtampil.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
document.write('');}
//]]>
</script>
- Simpan template dan beralih ke Elemen Laman
- Klik Tambah Gadget => HTML/Javascript
- Dan masukan kode di bawah ini.
<style type="text/css">Keterangan :
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
#Eee: Ini adalah warna latar belakang Tab. Warna Default adalah abu-abu. Jika sobat ingin mengubahnya ke warna yang berbeda pilihan sobat kemudian Gunakan Kode Warna BUS
#Fff: Ini adalah warna perbatasan tab widget multi sobat. Warna default adalah putih sobat dapat menyesuaikannya dengan warna pilihan sobat menggunakan bagan warna yang sama disebutkan di atas.
#Ffffff: Ini adalah warna latar belakang tubuh utama widget sobat. Yang standar adalah putih.Gunakan Gunakan Kode Warna BUS jika sobat ingin menggunakan warna yang berbeda.
#Eee: Ini adalah warna perbatasan di sekitar tab persegi panjang. Yang standar adalah abu-abu. Gunakan Kode Warna BUS jika sobat ingin menggunakan warna yang berbeda.
#000000: Ini adalah warna teks / font untuk nama tab. Dengan kata lain, itu warna judul tab. Yang standar adalah hitam.
Ganti ini dengan judul tab
Tab 1, Tab 2, Tab 3
Ganti ini dengan kode widget Anda.
Tab 1 konten goes here , Tab 2 konten goes here , Tab 3 konten goes here
Itulah yang dapat saya sampaikan pada postingan kali ini semoga bermanfaat, jika sobat ingin lihat lebihbanyak lagi artikel-artikel blog urang sunda lihat disini.
Theant Budiana About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya
warning Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.
0 comments:
Post a Comment