Mengganti background dengan tombol pada blog atau website

Idris

Monday, June 2, 2014

Berikut kodenya:



<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';
backColor[1] = '#F0E68C';
backColor[2] = '#E0FFFF';
backColor[3] = '#008000';
backColor[4] = '#FF0000';
backColor[5] = '#87CEFA';
backColor[6] = '#FFDAB9';
backColor[7] = '#FFC0CB';
backColor[8] = '#E6E6FA';
backColor[9] = '#0C10F3';
backColor[10] = '#00FFFF';
backColor[11] = '#0000A0';
backColor[12] = '#800080';
backColor[13] = '#FFFF00';
backColor[14] = '#00FF00';  
backColor[15] = '#FF00FF';
backColor[16] = '#FFFFFF';
backColor[17] = '#C0C0C0';
backColor[18] = '#FFA500';
backColor[19] = '#800000';

function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>

<style>
.tomblf {
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0 1px;
    outline: none;
    cursor: pointer;
    /* text-align: center;*/
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    padding: .6em .6em .6em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tomblf:hover {
   text-decoration: none;
}
.tomblf:active {
    position: relative;
    top: 1px;
}
.reds {
color: #000;
border: solid 1px #000;
background: #000;
}
.kuning {
color: #F0E68C;
border: solid 1px #F0E68C;
background: #F0E68C;
}
.birumuda {
color: #E0FFFF;
border: solid 1px #E0FFFF;
background: #E0FFFF;
}
.hijau {
color: #008000;
border: solid 1px #008000;
background: #008000;
}
.merah {
color: #FF0000;
border: solid 1px #FF0000;
background: #FF0000;
}
.warna5 {
color: #87CEFA;
border: solid 1px #87CEFA;
background: #87CEFA;
}
.warna6 {
color: #FFDAB9;
border: solid 1px #FFDAB9;
background: #FFDAB9;
}
.warna7 {
color: #FFC0CB;
border: solid 1px #FFC0CB;
background: #FFC0CB;
}
.warna8 {
color: #E6E6FA;
border: solid 1px #E6E6FA;
background: #E6E6FA;
}
.warna9 {
color: #0C10F3;
border: solid 1px #0C10F3;
background: #0C10F3;
}
.warna10 {
color: #00FFFF;
border: solid 1px #00FFFF;
background: #00FFFF;
}
.warna11 {
color: #0000A0;
border: solid 1px #0000A0;
background: #0000A0;
}
.warna12 {
color: #800080;
border: solid 1px #800080;
background: #800080;
}
.warna13 {
color: #FFFF00;
border: solid 1px #FFFF00;
background: #FFFF00;
}
.warna14 {
color: #00FF00;
border: solid 1px #00FF00;
background: #00FF00;
}
.warna15 {
color: #FF00FF;
border: solid 1px #FF00FF;
background: #FF00FF;
}
.warna16 {
color: #FFFFFF;
border: solid 1px #FFFFFF;
background: #FFFFFF;
}
.warna17 {
color: #C0C0C0;
border: solid 1px #C0C0C0;
background: #C0C0C0;
}
.warna18 {
color: #FFA500;
border: solid 1px #FFA500;
background: #FFA500;
}
.warna19 {
color: #800000;
border: solid 1px #800000;
background: #800000;
}
.warna20 {
/* color: #254117;*/
border: solid 1px #254117;
background: #254117;
margin-left:20px;
padding: .3em .2em .1em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    width: 450px;
}

</style>


<div class="warna20">
<a class="tomblf reds" onclick="javascript:changeBG(0)"></a>
<a class="tomblf kuning" onclick="javascript:changeBG(1)"></a>
<a class="tomblf birumuda" onclick="javascript:changeBG(2)"></a>
<a class="tomblf hijau" onclick="javascript:changeBG(3)"></a>
<a class="tomblf merah" onclick="javascript:changeBG(4)"></a>
<a class="tomblf warna5" onclick="javascript:changeBG(5)"></a>
<a class="tomblf warna6" onclick="javascript:changeBG(6)"></a>
<a class="tomblf warna7" onclick="javascript:changeBG(7)"></a>
<a class="tomblf warna8" onclick="javascript:changeBG(8)"></a>
<a class="tomblf warna9" onclick="javascript:changeBG(9)"></a>
<a class="tomblf warna10" onclick="javascript:changeBG(10)"></a>
<a class="tomblf warna11" onclick="javascript:changeBG(11)"></a>
<a class="tomblf warna12" onclick="javascript:changeBG(12)"></a>
<a class="tomblf warna13" onclick="javascript:changeBG(13)"></a>
<a class="tomblf warna14" onclick="javascript:changeBG(14)"></a>
<a class="tomblf warna15" onclick="javascript:changeBG(15)"></a>
<a class="tomblf warna16" onclick="javascript:changeBG(16)"></a>
<a class="tomblf warna17" onclick="javascript:changeBG(17)"></a>
<a class="tomblf warna18" onclick="javascript:changeBG(18)"></a>
<a class="tomblf warna19" onclick="javascript:changeBG(19)"></a>
</div>

untuk melihat hasilnya klik www.madurafm.com

Labels: Blogger, Logikaku, Tips dan Triks

Thanks for reading Mengganti background dengan tombol pada blog atau website . Please share...!