blog saya contentya tentang tutorial, html, css, script serta bebagai hal tentang website :) , untuk kedapanya saya akan share juga tentang javascript, htmldom, dhtml serta php/sql! yah, nantinya saya akan share semua ilmu yang saya miliki. sekarang ini saya lagi belajar membuat cms berbasis php/sql dan ajax! doain ya semoga cms saya cepat rampung! cms yang saya buat sangat simple(yah namanya juga belajar) untuk sekarang cmsnya masih tertanam di komputer saya.

sebenarnya saya kurang yakin dalam pembuatan cms tadi, hanya saja saya sangat tertarik membutnya, kalaupun hasilnya tidak memuaskan “yang pentingkan bisa dan mau belajar”.

back to topic tabview 4 tombol

saya belajar script sejak pertengahan 2009, awalnya si cuma ngedit-ngedit doang. lama-kelamaan saya tertarik untuk membuat sendiri, sayapun terus bejajar-beajar dan belajar hingga akhirnya setelah bisa sedikit html, css, js, htmldom, dhtml, ajax. sayapun memcoba-coba membuat widget.

apa widget yang saya buat? sangat simple . kok simple? yah, saya hanya membuat tab view, tahukan apa itu tab view!?

tab view yang saya buat ini 100% ketiknya pakai jari(tanpa copy script). membuat dan ngedit itu sangat berbeda jaaaaaaaaaaaaaauh!

berikut rincian tab viewnya

version : o.1

author : indam

tombol : 4

language script : html, css, js, dhtml

size widget static : 6,626 bytes(+6 kb) + comment

widget preview:

tombol 1tombol 2tombol 3tombol 4
isi box 1(tombol 1), ganti dengan code widget anda
isi box 2(tombol 2), ganti dengan code widget anda
isi box 3(tombol 3), ganti dengan code widget anda
isi box 4(tombol 4), ganti dengan code widget anda
regards indam site

widget source

<html>
<head>
<title>tab view</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<meta content="0.1" name="version"/>
<meta content="tabview buatan indaam.com" name="description"/>
<style type="text/css">
#indamtabview{/*style ini adalah pembentuk tabviewnya*/
width:100%;/*lebar*/
height:auto;/*tinggi*/
font:normal bold 110% times;/*font*/
}
/**/
#indamtabview .tombolnya{/*style ini adalah hanyapembentuk tombolnya*/
width:100%;/*lebar*/
float:left;
margin-left:10px;/*jarak luar kiri*/
}
/**/
#indamtabview .tombolnya a,#indamtabview .tombolnya a:link{/*style ini untuk tombol linknya*/
padding:1% 2%;/*jarak dalam*/
-moz-border-radius-topright:10px;/*style ini untuk firefox, css3nya border-radius*/
-moz-border-radius-topleft:10px;/*style ini untuk firefox, css3nya border-radius*/
float:left;/*menekan ke kiri, atau tombolnya mengarak ke kiri*/
margin-right:5px;/*jarak luar kanan*/
text-decoration:none;/*text decoration none*/
text-align:center;/*text rata tengah*/
border-top:2px double blue;/*garis atas*/
border-right:2px double blue;/*garis kanan*/
border-left:2px double blue;/*karis kiri*/
margin-bottom:-5px;/**/
position:relative;/**/
}
/**/
#indamtabview .tombolnya #indamlink1{/*style ini untuk set warna tombol 1*/
background:white;/*warna latar belakang putih*/}
#indamtabview .tombolnya #indamlink2,
#indamtabview .tombolnya #indamlink3,
#indamtabview .tombolnya #indamlink4{/*style ini untuk tombol 2, 3 dan 4*/
background:blue;/*warna latar belakang*/color:white;/*warna text*/}
/**/
#indamtabview .tombolnya #indamlink2:hover,
#indamtabview .tombolnya #indamlink3:hover,
#indamtabview .tombolnya #indamlink4:hover{/*style ini untuk set tombol ketika cursor melintas*/
background:white;/*warna latar belakang putih*/
color:blue;/*warna text*/}
/**/
#indamtabview .box{/*style ini pembntuk box bawah*/
width:100%;/*lebar*/
float:left;
height:350px;/*tingiiiiiiiiiiiiiiiiiiiiiiiiinya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
border:5px solid blue;/*garis*/
}
/**/
#indamtabview .box #isibox1{/*style ini untuk isi box 1*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:block;/**/
overflow:auto;/**/
}
#indamtabview .box #isibox2,
#indamtabview .box #isibox3,
#indamtabview .box #isibox4{/*style ini untuk isi box 2, 3, 4*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:none;/**/
overflow:auto;/**/
}
</style>
<script type="text/javascript">
function indaam1(){/**/
document.getElementById ("indamlink1").style.color="white";/**/
document.getElementById ("indamlink1").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam2(){/**/
document.getElementById ("indamlink2").style.color="white";/**/
document.getElementById ("indamlink2").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam3(){/**/
document.getElementById ("indamlink3").style.color="white";/**/
document.getElementById ("indamlink3").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam4(){/**/
document.getElementById ("indamlink4").style.color="white";/**/
document.getElementById ("indamlink4").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaamdotcom1()
{/**/
document.getElementById ("isibox1").style.display="none";/**/}
function indaamdotcom2()
{/**/
document.getElementById ("isibox2").style.display="none";/**/}
function indaamdotcom3()
{/**/
document.getElementById ("isibox3").style.display="none";/**/}
function indaamdotcom4()
{/**/
document.getElementById ("isibox4").style.display="none";/**/}
function indam2()
{/**/
indaam1()
indaam4()
indaam3()
//
document.getElementById ("indamlink2").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink2").style.color="blue";/**/
//
document.getElementById ("isibox2").style.display="block";/**/
indaamdotcom1()
indaamdotcom3()
indaamdotcom4()
}
function indam3()
{/**/
indaam1()
indaam4()
indaam2()
//
document.getElementById ("indamlink3").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink3").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom1()
indaamdotcom4()
document.getElementById ("isibox3").style.display="block";/**/
}
function indam4()
{/**/
indaam1()
indaam2()
indaam3()
//
document.getElementById ("indamlink4").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink4").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom3()
indaamdotcom1()
document.getElementById ("isibox4").style.display="block";/**/
}
function indam1()
{/**/
indaam2()
indaam4()
indaam3()
//
document.getElementById ("indamlink1").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink1").style.color="blue";/**/
//
document.getElementById ("isibox1").style.display="block";/**/
indaamdotcom2()
indaamdotcom3()
indaamdotcom4()
}
</script>
</head>
<body>
<div id="indamtabview">
<div class="tombolnya">
<a id="indamlink1" href="javascript:indam1()"> tombol 1</a>
<a id="indamlink2" href="javascript:indam2()"> tombol 2</a>
<a id="indamlink3" href="javascript:indam3()"> tombol 3</a>
<a id="indamlink4" href="javascript:indam4()"> tombol 4</a>
</div>
<!--//-->
<div class="box">
<!--//-->
<div id="isibox1">
isi box 1(tombol 1), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox2">
isi box 2(tombol 2), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox3">
isi box 3(tombol 3), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox4">
isi box 4(tombol 4), ganti dengan code widget anda
<!-- anda bisa mempublikasikan widget ini, harapan pembuat "tidak menghapus link author", kerja samanya sangat diharapkan, buat widget itu butuh waktu-->
<br/>
regards <a href="http://www.indaam.com" title="indam site" target="_blank">indam site</a>
<!--//-->
</div>
</div>
<!--//-->
</div>
<!--//-->
</body>
</html>

untuk melihat bentuk widgetnya(static)

  • copy markup style script diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama tabview4tombol_v_0.1.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)

cara pasang widget tabview di blogspot(blogger.com)

  • login
  • rancangan
  • add a gadget
  • pilih html java script
  • masukan script/markup dibawah kedalam kolom content
  • baca komentar yang saya tambahkan lalu
  • save

kode tabview untuk blogspot

<style type="text/css">
#indamtabview{/*style ini adalah pembentuk tabviewnya*/
width:100%;/*lebar*/
height:auto;/*tinggi*/
font:normal bold 110% times;/*font*/
}
/**/
#indamtabview .tombolnya{/*style ini adalah hanyapembentuk tombolnya*/
width:100%;/*lebar*/
float:left;
margin-left:10px;/*jarak luar kiri*/
}
/**/
#indamtabview .tombolnya a,#indamtabview .tombolnya a:link{/*style ini untuk tombol linknya*/
padding:1% 2%;/*jarak dalam*/
-moz-border-radius-topright:10px;/*style ini untuk firefox, css3nya border-radius*/
-moz-border-radius-topleft:10px;/*style ini untuk firefox, css3nya border-radius*/
float:left;/*menekan ke kiri, atau tombolnya mengarak ke kiri*/
margin-right:5px;/*jarak luar kanan*/
text-decoration:none;/*text decoration none*/
text-align:center;/*text rata tengah*/
border-top:2px double blue;/*garis atas*/
border-right:2px double blue;/*garis kanan*/
border-left:2px double blue;/*karis kiri*/
margin-bottom:-5px;/**/
position:relative;/**/
}
/**/
#indamtabview .tombolnya #indamlink1{/*style ini untuk set warna tombol 1*/
background:white;/*warna latar belakang putih*/}
#indamtabview .tombolnya #indamlink2,
#indamtabview .tombolnya #indamlink3,
#indamtabview .tombolnya #indamlink4{/*style ini untuk tombol 2, 3 dan 4*/
background:blue;/*warna latar belakang*/color:white;/*warna text*/}
/**/
#indamtabview .tombolnya #indamlink2:hover,
#indamtabview .tombolnya #indamlink3:hover,
#indamtabview .tombolnya #indamlink4:hover{/*style ini untuk set tombol ketika cursor melintas*/
background:white;/*warna latar belakang putih*/
color:blue;/*warna text*/}
/**/
#indamtabview .box{/*style ini pembntuk box bawah*/
width:100%;/*lebarnya*/
float:left;
height:350px;/*tingiiiiiiiiiiiiiiiiiiiiiiiiinya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
border:5px solid blue;/*garis*/
}
/**/
#indamtabview .box #isibox1{/*style ini untuk isi box 1*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:block;/**/
overflow:auto;/**/
}
#indamtabview .box #isibox2,
#indamtabview .box #isibox3,
#indamtabview .box #isibox4{/*style ini untuk isi box 2, 3, 4*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:none;/**/
overflow:auto;/**/
}
</style>
<script type="text/javascript">
function indaam1(){/**/
document.getElementById ("indamlink1").style.color="white";/**/
document.getElementById ("indamlink1").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam2(){/**/
document.getElementById ("indamlink2").style.color="white";/**/
document.getElementById ("indamlink2").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam3(){/**/
document.getElementById ("indamlink3").style.color="white";/**/
document.getElementById ("indamlink3").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam4(){/**/
document.getElementById ("indamlink4").style.color="white";/**/
document.getElementById ("indamlink4").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaamdotcom1()
{/**/
document.getElementById ("isibox1").style.display="none";/**/}
function indaamdotcom2()
{/**/
document.getElementById ("isibox2").style.display="none";/**/}
function indaamdotcom3()
{/**/
document.getElementById ("isibox3").style.display="none";/**/}
function indaamdotcom4()
{/**/
document.getElementById ("isibox4").style.display="none";/**/}
function indam2()
{/**/
indaam1()
indaam4()
indaam3()
//
document.getElementById ("indamlink2").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink2").style.color="blue";/**/
//
document.getElementById ("isibox2").style.display="block";/**/
indaamdotcom1()
indaamdotcom3()
indaamdotcom4()
}
function indam3()
{/**/
indaam1()
indaam4()
indaam2()
//
document.getElementById ("indamlink3").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink3").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom1()
indaamdotcom4()
document.getElementById ("isibox3").style.display="block";/**/
}
function indam4()
{/**/
indaam1()
indaam2()
indaam3()
//
document.getElementById ("indamlink4").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink4").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom3()
indaamdotcom1()
document.getElementById ("isibox4").style.display="block";/**/
}
function indam1()
{/**/
indaam2()
indaam4()
indaam3()
//
document.getElementById ("indamlink1").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink1").style.color="blue";/**/
//
document.getElementById ("isibox1").style.display="block";/**/
indaamdotcom2()
indaamdotcom3()
indaamdotcom4()
}
</script>
<div id="indamtabview">
<div class="tombolnya">
<a id="indamlink1" href="javascript:indam1()"> tombol 1</a>
<a id="indamlink2" href="javascript:indam2()"> tombol 2</a>
<a id="indamlink3" href="javascript:indam3()"> tombol 3</a>
<a id="indamlink4" href="javascript:indam4()"> tombol 4</a>
</div>
<!--//-->
<div class="box">
<!--//-->
<div id="isibox1">
isi box 1(tombol 1), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox2">
isi box 2(tombol 2), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox3">
isi box 3(tombol 3), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox4">
isi box 4(tombol 4), ganti dengan code widget anda
<!-- anda bisa mempublikasikan widget ini, harapan pembuat "tidak menghapus link author", kerja samanya sangat diharapkan, buat widget itu butuh waktu-->
<br/>
regards <a href="http://www.indaam.com" title="indam site" target="_blank">indam site</a>
<!--//-->
</div>
</div>
<!--//-->
</div>

cara pasang widget tabview di wordpress

pasang di sidebar atau footer

  • login
  • appearance
  • widgets
  • drop drag(pilih text) ke sidebar atau footer
  • isi dengan markup/style script dibawah
  • nggak usah di centang Automatically add paragraphs.
  • save

pasang di bawah postingan(atas kolom komentar)

  • masuk ke
  • appearance
  • editor
  • sidebar kiri pilih comment.php
  • kemudian tambahkan code dibawah kedalamnya(comment.php)//bagian atas
  • update file

code tabview untuk wordpress

<style type="text/css">
#indamtabview{/*style ini adalah pembentuk tabviewnya*/
width:100%;/*lebar*/
height:auto;/*tinggi*/
font:normal bold 110% times;/*font*/
}
/**/
#indamtabview .tombolnya{/*style ini adalah hanyapembentuk tombolnya*/
width:100%;/*lebar*/
float:left;
margin-left:10px;/*jarak luar kiri*/
}
/**/
#indamtabview .tombolnya a,#indamtabview .tombolnya a:link{/*style ini untuk tombol linknya*/
padding:1% 2%;/*jarak dalam*/
-moz-border-radius-topright:10px;/*style ini untuk firefox, css3nya border-radius*/
-moz-border-radius-topleft:10px;/*style ini untuk firefox, css3nya border-radius*/
float:left;/*menekan ke kiri, atau tombolnya mengarak ke kiri*/
margin-right:5px;/*jarak luar kanan*/
text-decoration:none;/*text decoration none*/
text-align:center;/*text rata tengah*/
border-top:2px double blue;/*garis atas*/
border-right:2px double blue;/*garis kanan*/
border-left:2px double blue;/*karis kiri*/
margin-bottom:-5px;/**/
position:relative;/**/
}
/**/
#indamtabview .tombolnya #indamlink1{/*style ini untuk set warna tombol 1*/
background:white;/*warna latar belakang putih*/}
#indamtabview .tombolnya #indamlink2,
#indamtabview .tombolnya #indamlink3,
#indamtabview .tombolnya #indamlink4{/*style ini untuk tombol 2, 3 dan 4*/
background:blue;/*warna latar belakang*/color:white;/*warna text*/}
/**/
#indamtabview .tombolnya #indamlink2:hover,
#indamtabview .tombolnya #indamlink3:hover,
#indamtabview .tombolnya #indamlink4:hover{/*style ini untuk set tombol ketika cursor melintas*/
background:white;/*warna latar belakang putih*/
color:blue;/*warna text*/}
/**/
#indamtabview .box{/*style ini pembntuk box bawah*/
width:100%;/*lebarnya*/
float:left;
height:350px;/*tingiiiiiiiiiiiiiiiiiiiiiiiiinya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
border:5px solid blue;/*garis*/
}
/**/
#indamtabview .box #isibox1{/*style ini untuk isi box 1*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:block;/**/
overflow:auto;/**/
}
#indamtabview .box #isibox2,
#indamtabview .box #isibox3,
#indamtabview .box #isibox4{/*style ini untuk isi box 2, 3, 4*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:none;/**/
overflow:auto;/**/
}
</style>
<script type="text/javascript">
function indaam1(){/**/
document.getElementById ("indamlink1").style.color="white";/**/
document.getElementById ("indamlink1").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam2(){/**/
document.getElementById ("indamlink2").style.color="white";/**/
document.getElementById ("indamlink2").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam3(){/**/
document.getElementById ("indamlink3").style.color="white";/**/
document.getElementById ("indamlink3").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam4(){/**/
document.getElementById ("indamlink4").style.color="white";/**/
document.getElementById ("indamlink4").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaamdotcom1()
{/**/
document.getElementById ("isibox1").style.display="none";/**/}
function indaamdotcom2()
{/**/
document.getElementById ("isibox2").style.display="none";/**/}
function indaamdotcom3()
{/**/
document.getElementById ("isibox3").style.display="none";/**/}
function indaamdotcom4()
{/**/
document.getElementById ("isibox4").style.display="none";/**/}
function indam2()
{/**/
indaam1()
indaam4()
indaam3()
//
document.getElementById ("indamlink2").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink2").style.color="blue";/**/
//
document.getElementById ("isibox2").style.display="block";/**/
indaamdotcom1()
indaamdotcom3()
indaamdotcom4()
}
function indam3()
{/**/
indaam1()
indaam4()
indaam2()
//
document.getElementById ("indamlink3").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink3").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom1()
indaamdotcom4()
document.getElementById ("isibox3").style.display="block";/**/
}
function indam4()
{/**/
indaam1()
indaam2()
indaam3()
//
document.getElementById ("indamlink4").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink4").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom3()
indaamdotcom1()
document.getElementById ("isibox4").style.display="block";/**/
}
function indam1()
{/**/
indaam2()
indaam4()
indaam3()
//
document.getElementById ("indamlink1").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink1").style.color="blue";/**/
//
document.getElementById ("isibox1").style.display="block";/**/
indaamdotcom2()
indaamdotcom3()
indaamdotcom4()
}
</script>
<div id="indamtabview">
<div class="tombolnya">
<a id="indamlink1" href="javascript:indam1()"> tombol 1</a>
<a id="indamlink2" href="javascript:indam2()"> tombol 2</a>
<a id="indamlink3" href="javascript:indam3()"> tombol 3</a>
<a id="indamlink4" href="javascript:indam4()"> tombol 4</a>
</div>
<!--//-->
<div class="box">
<!--//-->
<div id="isibox1">
isi box 1(tombol 1), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox2">
isi box 2(tombol 2), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox3">
isi box 3(tombol 3), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox4">
isi box 4(tombol 4), ganti dengan code widget anda
<!-- anda bisa mempublikasikan widget ini, harapan pembuat "tidak menghapus link author", kerja samanya sangat diharapkan, buat widget itu butuh waktu-->
<br/>
regards <a href="http://www.indaam.com" title="indam site" target="_blank">indam site</a>
<!--//-->
</div>
</div>
<!--//-->
</div>

keterangan

  • jika tombolnya numpuk
  • hapus ini <a id=”indamlink4″ href=”javascript:indam4()”> tombol 4</a>
  • setting warnanya ada di kodenya(baca komentar yang saya tambahkan)

pasang tabview di cms lain

berikut kodenya, silakan masukan kedalam tempalte sobat

<style type="text/css">
#indamtabview{/*style ini adalah pembentuk tabviewnya*/
width:100%;/*lebar*/
height:auto;/*tinggi*/
font:normal bold 110% times;/*font*/
}
/**/
#indamtabview .tombolnya{/*style ini adalah hanyapembentuk tombolnya*/
width:100%;/*lebar*/
float:left;
margin-left:10px;/*jarak luar kiri*/
}
/**/
#indamtabview .tombolnya a,#indamtabview .tombolnya a:link{/*style ini untuk tombol linknya*/
padding:1% 2%;/*jarak dalam*/
-moz-border-radius-topright:10px;/*style ini untuk firefox, css3nya border-radius*/
-moz-border-radius-topleft:10px;/*style ini untuk firefox, css3nya border-radius*/
float:left;/*menekan ke kiri, atau tombolnya mengarak ke kiri*/
margin-right:5px;/*jarak luar kanan*/
text-decoration:none;/*text decoration none*/
text-align:center;/*text rata tengah*/
border-top:2px double blue;/*garis atas*/
border-right:2px double blue;/*garis kanan*/
border-left:2px double blue;/*karis kiri*/
margin-bottom:-5px;/**/
position:relative;/**/
}
/**/
#indamtabview .tombolnya #indamlink1{/*style ini untuk set warna tombol 1*/
background:white;/*warna latar belakang putih*/}
#indamtabview .tombolnya #indamlink2,
#indamtabview .tombolnya #indamlink3,
#indamtabview .tombolnya #indamlink4{/*style ini untuk tombol 2, 3 dan 4*/
background:blue;/*warna latar belakang*/color:white;/*warna text*/}
/**/
#indamtabview .tombolnya #indamlink2:hover,
#indamtabview .tombolnya #indamlink3:hover,
#indamtabview .tombolnya #indamlink4:hover{/*style ini untuk set tombol ketika cursor melintas*/
background:white;/*warna latar belakang putih*/
color:blue;/*warna text*/}
/**/
#indamtabview .box{/*style ini pembntuk box bawah*/
width:100%;/*lebarnya*/
float:left;
height:350px;/*tingiiiiiiiiiiiiiiiiiiiiiiiiinya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
border:5px solid blue;/*garis*/
}
/**/
#indamtabview .box #isibox1{/*style ini untuk isi box 1*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:block;/**/
overflow:auto;/**/
}
#indamtabview .box #isibox2,
#indamtabview .box #isibox3,
#indamtabview .box #isibox4{/*style ini untuk isi box 2, 3, 4*/
background:white;/*warna latar belakang*/
height:99%;/*tingginya*/
-moz-border-radius:10px;/*style ini untuk firefox, css3nya border-radius*/
padding:0 5px;/*jarak dalam ats-bwh 0, kiri kanan 5px*/
display:none;/**/
overflow:auto;/**/
}
</style>
<script type="text/javascript">
function indaam1(){/**/
document.getElementById ("indamlink1").style.color="white";/**/
document.getElementById ("indamlink1").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam2(){/**/
document.getElementById ("indamlink2").style.color="white";/**/
document.getElementById ("indamlink2").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam3(){/**/
document.getElementById ("indamlink3").style.color="white";/**/
document.getElementById ("indamlink3").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaam4(){/**/
document.getElementById ("indamlink4").style.color="white";/**/
document.getElementById ("indamlink4").style.backgroundColor="blue";/*warna latar belakang tombol ketika link(tombol) tidak aktif*/
}
function indaamdotcom1()
{/**/
document.getElementById ("isibox1").style.display="none";/**/}
function indaamdotcom2()
{/**/
document.getElementById ("isibox2").style.display="none";/**/}
function indaamdotcom3()
{/**/
document.getElementById ("isibox3").style.display="none";/**/}
function indaamdotcom4()
{/**/
document.getElementById ("isibox4").style.display="none";/**/}
function indam2()
{/**/
indaam1()
indaam4()
indaam3()
//
document.getElementById ("indamlink2").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink2").style.color="blue";/**/
//
document.getElementById ("isibox2").style.display="block";/**/
indaamdotcom1()
indaamdotcom3()
indaamdotcom4()
}
function indam3()
{/**/
indaam1()
indaam4()
indaam2()
//
document.getElementById ("indamlink3").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink3").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom1()
indaamdotcom4()
document.getElementById ("isibox3").style.display="block";/**/
}
function indam4()
{/**/
indaam1()
indaam2()
indaam3()
//
document.getElementById ("indamlink4").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink4").style.color="blue";/**/
//
indaamdotcom2()
indaamdotcom3()
indaamdotcom1()
document.getElementById ("isibox4").style.display="block";/**/
}
function indam1()
{/**/
indaam2()
indaam4()
indaam3()
//
document.getElementById ("indamlink1").style.backgroundColor="white";/*warna latar belakang tombol ketika link(tombol) active*/
document.getElementById ("indamlink1").style.color="blue";/**/
//
document.getElementById ("isibox1").style.display="block";/**/
indaamdotcom2()
indaamdotcom3()
indaamdotcom4()
}
</script>
<div id="indamtabview">
<div class="tombolnya">
<a id="indamlink1" href="javascript:indam1()"> tombol 1</a>
<a id="indamlink2" href="javascript:indam2()"> tombol 2</a>
<a id="indamlink3" href="javascript:indam3()"> tombol 3</a>
<a id="indamlink4" href="javascript:indam4()"> tombol 4</a>
</div>
<!--//-->
<div class="box">
<!--//-->
<div id="isibox1">
isi box 1(tombol 1), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox2">
isi box 2(tombol 2), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox3">
isi box 3(tombol 3), ganti dengan code widget anda
</div>
<!--//-->
<div id="isibox4">
isi box 4(tombol 4), ganti dengan code widget anda
<!-- anda bisa mempublikasikan widget ini, harapan pembuat "tidak menghapus link author", kerja samanya sangat diharapkan, buat widget itu butuh waktu-->
<br/>
regards <a href="http://www.indaam.com" title="indam site" target="_blank">indam site</a>
<!--//-->
</div>
</div>
<!--//-->
</div>

jika ada bug, silakan tinggalkan komentar

untuk versi 5, 6, 7, 8 tombol, menyusul di belakang!

shared to : facebook | twitter

tentang penulis

indamindam

Indam, seorang web designer, wordpress theme development, -
blogger dan penulis yang ingin terus belajar! read more about indam ⇉


Indam on | facebook | twitter

Related post

Berlangganan via FeedBurner

6 Responses to Widget pertama Tab View 4 tombol serta proses Instalasi

  1. ganda says:
    July 6, 2010 at 2:31 pm

    Warna dan pemilihan hurufnya masih kurang.

    Reply
  2. Cerita Dewasa says:
    November 6, 2010 at 8:21 am

    Terima kasih informasinya. Ini yang saya cari-cari dari kemarin. Semoga kali ini bisa berhasil

    Reply
  3. Cerita Dewasa says:
    November 6, 2010 at 8:24 am

    Oya kak, bagaimana cara memanggil Recent Comment, Recent Post, dan Kategori secara manual?
    Biar bisa dimasukkan dalam tab ini maksud saya

    Reply
  4. KEYZEDBLOG says:
    February 27, 2011 at 9:55 pm

    jika tab 4 dihapus apa saja yang perlu dihapus?

    Reply

Sorry, formulir komentar sedang dalam perbaikan