Widget pertama Tab View 4 tombol serta proses Instalasi

tabview ini hanya memiliki 4 tombol, anda dapat memasang widgetnya di blogspot(blogger) wordpress, serta cms lainya. berikut code dan rincian tabview 4 tombol

Expresi sejati dari diri manusia adalah pada saat ia berdansa sesuai irama dan musiknya.Tubuh tidak pernah berdusta. Agnes de Mille

tabview ini hanya memiliki 4 tombol, anda dapat memasang widgetnya di blogspot(blogger) wordpress, serta cms lainya. berikut code dan rincian tabview 4 tombol

Last Modif at July 8th, 2011

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:

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.net" name="author"/>
<meta content="0.1" name="version"/>
<meta content="tabview buatan indaam.net" 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.net" 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.net" 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.net" 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.net" 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!

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

14 thoughts on “Widget pertama Tab View 4 tombol serta proses Instalasi”

  1. ganda says:

    Warna dan pemilihan hurufnya masih kurang.

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

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

    1. indam says:

      jika ada waktu akan saya tulis caranya, thanks ya sudah mampir.

  4. KEYZEDBLOG says:

    jika tab 4 dihapus apa saja yang perlu dihapus?

  5. Fajar says:

    Thanks atas share ilmunya gan, semoga sukses selalu God Bless U

  6. Rivas says:

    Gimana kalau bang Indaam bikin tutorial kode css footer yang menarik seperti di website anda?

    1. indam says:

      Insha Allah lain waktu–jika ada kesmpatan, akan saya buat.

  7. tks pa anda sangat briliand sekali dan sngt mambntu buat orng lain yg bnr2 mmbthkan nya. kbtln saya sdng nyari ni widget krn mnrt sy ini widget yg sngt unik.

  8. fajarindra says:

    Makasih gan atas bantunnya…

  9. Ganda says:

    aku pasang tab view-nya di post. bisa gak height box mengikuti isi postingnya.
    seperti di lingk berikut

    1. indam says:

      This widget not recomment…

  10. jaely says:

    thax infox om, benar-benar membantu. Saya sudah praktekkan d blog saya..
    Trimss… :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-