Cara Mengganti Warna Background Dengan Tombol

Baca Juga

Bismillah... di hari minggu yang cerah ini semoga sobat blogger masih pada cemangat he he.. oke pada kesempatan ini saya akan tulis sedikit tentang cara mengganti warna Background Blogger sehingga para pengunjung bebas memilih warna sesuai dengan yang mereka inginkan.

Ganti background Blogspot

Oke sobat kita langsung saja ke TKP, untuk mengganti background blogger dengan warna cukup mudah dan gampang sobat tinggal ikuti saja postingan kali ini. tapi sebelumnya sobat harus mengenal dulu java sscript di bawah ini, biar sobat lebih gampang dalam merubahnya, untuk mengganti background blogger disini saya menggunakan script JavaScript, scriptnya saya ambil dari situs ini http://www.codebelly.com/ jika sobat penasaran silahkan sobat kunjungi situsnya di alamat tadi.

Code JavaSccript untuk merubah background

<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';

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

Nah scriptnya cuma sedikit dan gampang di hapal, terus cara penerapannya sobat bisa menggunakan seperti di bawah ini 

<a haref="#" onclick="javascript:changeBG(0)"></a>

Oke sobat itu kode dasarnya, jika sobat mau kembangkan silahkan kembangkan sendiri, jika sobat mau mencoba script yang di bawah juga tidak apa apa, bebas untuk di copy paste, cara penerapan script di bawah ini cukup mudah dan gampang sobat tinggal tambahkan gadget HTML/JavaScript terus copy code di bawah dan Paste di form HTML/JavaScript. sebelum ke kode sebaiknya sobat lihat contohnya gambarnya,

Warna Untuk Background Blog

Untuk scriptnya silahkan sobat copy di bawah ini.. jika masih ada kekurangan silahkan sobat modif sendiri.

<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: 2em 2em 2em;
    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:300px;
}

</style>
<div class="tomblf warna20" align="center">
<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>
<br/>
<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>
<br/>
<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>
<br/>
<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>

Sobat simpan Script ini di gadget HTML/JavaScript. Oke Good Luck Happy Blogging