PASTEKAN SAJA DI GADGET: HTML/JAVASCRIPT .

KEBAWAH

kotak menu tipe tab view

==================================

 <style type="text/css">

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid white;
border-bottom: none;
background: gray;
}

#tablist li a:link, #tablist li a:visited{
color: white;
}

#tablist li a.current{
background: red;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid yellow;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>


<ul id="tablist">
<li><a href="#" class="current" onclick="return expandcontent('sc1', this)">D'CODE</a></li>

<li><a href="#" onclick="return expandcontent('sc2', this)" theme="black">KOTAK 1</a></li>

<li><a href="#" onclick="return expandcontent('sc3', this)" theme="black">KOTAK 2</a></li>

<li><a href="search.#" onclick="return expandcontent('sc4', this)" theme="black">KOTAK 3</a></li>

<li><a href="search.#" onclick="return expandcontent('sc4', this)" theme="black">KOTAK 4</a></li>

</ul>

<div id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
HVJVFJJJV,,,VWKWFWJEW,,EFEWFEWFEF,,EFEFEWFEWF,FEWFEFEF,,FEWFEFEFEF,EFEFEFEF,EFEFEFEF,EFEFEFE,FEFEFEF,EFEFE:<br />
</div>

<div id="sc2" class="tabcontent">
MENUJU KE <a href="#">D'CODE</a> ,,,,,MAAF YAH DIK,,, TERLAMBAT SAYA POSTING WIDGET YG TAMPIL DI HALAMAN,,, TAPI SABAR YAH,,, SEMUA APA YG ADA DI HALAMAN AWAL BLOG INI,,AKAN SAYA BONGKAR,,, SIAPA TAU ADA DIANTARA ADIK ADIK YG BERMINAT,,, OK ,,KITA LANGSUNG SAJA,,, KORBAN PERTAMA SITUS....
</div>

<div id="sc3" class="tabcontent">SELAIN MENGETAHUI KODE WARNA,, ADIK JUGA HARUS TAHU NAMA NAMA WARNA,, KARNA ADAKALANYA TAK DIBUTUHKAN KODE,,NAMUN HANYA NAMA WARNA,,, KALI IN SAYA BERIKAN REFERENSI NAMA NAMA WARNA,, SILAHKAN DI COPY,,, LALU PASANG DI WIDGET HTML JAVASCRIPT,, ATAU DI POSTINGAN KALIAN,,, TINGGAL BUAT LINKNYA AGAR MUDAH DI TEMUKAN BILA INGIN MEMAKAINYA, JANGAN LUPA EDIT SCROLL NYA,,SESUAIKAN LEBAR WIDGET,,, DAN...
MENUJU KE <a target="_blank" href="http://teater88.blogspot.com/2012/02/nama-nama-kode-warna.html">FRAME88</a>,,, UNTUK MEMBACA SELENGKAPYA
</div>

<div id="sc4" class="tabcontent">SELAIN MENGETAHUI KODE WARNA,, ADIK JUGA HARUS TAHU NAMA NAMA WARNA,, KARNA ADAKALANYA TAK DIBUTUHKAN KODE,,NAMUN HANYA NAMA WARNA,,, KALI IN SAYA BERIKAN REFERENSI NAMA NAMA WARNA,, SILAHKAN DI COPY,,, LALU PASANG DI WIDGET HTML JAVASCRIPT,, ATAU DI POSTINGAN KALIAN,,, TINGGAL BUAT LINKNYA AGAR MUDAH DI TEMUKAN BILA INGIN MEMAKAINYA, JANGAN LUPA EDIT SCROLL NYA,,SESUAIKAN LEBAR WIDGET,,, DAN...
MENUJU KE <a target="_blank" href="http://teater88.blogspot.com/2012/02/nama-nama-kode-warna.html">FRAME88</a>,,, UNTUK MEMBACA SELENGKAPYA
</div>

<div id="sc5" class="tabcontent">SELAIN MENGETAHUI KODE WARNA,, ADIK JUGA HARUS TAHU NAMA NAMA WARNA,, KARNA ADAKALANYA TAK DIBUTUHKAN KODE,,NAMUN HANYA NAMA WARNA,,, KALI IN SAYA BERIKAN REFERENSI NAMA NAMA WARNA,, SILAHKAN DI COPY,,, LALU PASANG DI WIDGET HTML JAVASCRIPT,, ATAU DI POSTINGAN KALIAN,,, TINGGAL BUAT LINKNYA AGAR MUDAH DI TEMUKAN BILA INGIN MEMAKAINYA, JANGAN LUPA EDIT SCROLL NYA,,SESUAIKAN LEBAR WIDGET,,, DAN...
MENUJU KE <a target="_blank" href="http://teater88.blogspot.com/2012/02/nama-nama-kode-warna.html">FRAME88</a>,,, UNTUK MEMBACA SELENGKAPYA
</div>

</div>



KEMBALI

KE ATAS.