Warna Background Otomatis dengan Button CSS3

Tampilan blog yang cantik dan menarik merupakan tujuan utama bagi para pembuat blog, karena dengan tampilan yang bagus akan membuat banyak orang yang akan singgah ke blog kita untuk melihat dan ingin mengikutinya.

Dalam ksempatan ini saya akan coba membagi tips untuk membuat blog yang cantik dan menarik, yaitu membuat Background Otomatis dengan  Button CSS3

Oke bro dari pada panjang kalam, lebih baik kita langsung ke TKP saja. Untuk membuat kategori seperti contoh di bawah ini sangatlah mudah.
Langkah-langkah untuk membuat Blog warna-warni adalah sebagai berikut :
1. Login ke blog anda
2. Buka Dasbord/Desain  lalu klik Tata Letak.
3. Tambah widget dengan cara  mengklik Add Gadget (Tambah Gadget)
4. Cari dan klik HTML JavaScript.

KODE HTML

<table border="0" width="200"> <script type='text/javascript'> function bgChange(bg) {document.body.style.background=bg;} </script> <button onclick="bgChange('#ffffff')" value=('putih') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #ffffff 0%,         #ebebeb 50%,         #dbdbdb 50%,         #b5b5b5);     background: -webkit-gradient(         linear, left top, left bottom,         from(#ffffff),         color-stop(0.50, #ebebeb),         color-stop(0.50, #dbdbdb),         to(#b5b5b5));     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border: 0px solid #949494;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 2px rgba(255,255,255,0.7);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 2px rgba(255,255,255,0.7);     text-shadow:         0px -1px 0px rgba(000,000,000,0.9),         0px 0px 1px rgba(255,255,255,1);margin: 0 0 .5em; " /><b>Poetih</b></button> <button onclick="bgChange('#8B0000')" value=('merah')onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #ff0000 0%,         #660000);     background: -webkit-gradient(         linear, left top, left bottom,         from(#ff0000),         to(#660000));     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border: 1px solid #660000;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 1px rgba(255,255,255,0.5);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 1px rgba(255,255,255,0.5);     text-shadow:         0px 2px 1px rgba(000,000,000,1),         0px 1px 0px rgba(255,255,255,0.3)margin: 0 0 .5em; " /><b>Merah</b></button> <button onclick="bgChange('#0000ff')" value=('biroe')onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #fff3db 0%,         #2014cc 25%,         #0088ff);     background: -webkit-gradient(         linear, left top, left bottom,         from(#fff3db),         color-stop(0.25, #2014cc),         to(#0088ff));     border-radius: 6px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border: 1px solid #f7eb6c;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     text-shadow:         0px -1px 1px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em; " /><b>Biroe</b></button> <button onclick="bgChange('#ffd000')" value=('orange') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #fff3db 0%,         #ffc821 25%,         #ff3c00);     background: -webkit-gradient(         linear, left top, left bottom,         from(#fff3db),         color-stop(0.25, #ffc821),         to(#ff3c00));     border-radius: 6px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border: 1px solid #b85f00;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     text-shadow:         0px -1px 1px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em; " /><b>Orange</b></button> <button onclick="bgChange('#006400')"  value=('hijau tua') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #25a723 0%,         #1d631c);     background: -webkit-gradient(         linear, left top, left bottom,         from(#25a723),         to(#1d631c));     border-radius: 17px;     -moz-border-radius: 17px;     -webkit-border-radius: 17px;     border: 1px solid #012c56;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 1px rgba(255,255,255,1);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 1px rgba(255,255,255,1);     text-shadow:         0px -1px 0px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0);margin: 0 0 .5em; " /><b>Hijau</b></button> <button onclick="bgChange('#000000')" value=('hitam') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #fafafa 0%,         #999999 25%,         #474747);     background: -webkit-gradient(         linear, left top, left bottom,         from(#fafafa),         color-stop(0.25, #999999),         to(#474747));     border-radius: 6px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border: 1px solid #a6a6a6;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px -1px 0px rgba(255,255,255,0.7);     text-shadow:         0px -1px 1px rgba(000,000,000,0.2),         0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em; " /><b>Hitam</b></button> <button onclick="bgChange('#D2691E')"  value=('coklat') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helvetica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #ffffff 0%,         #c9ab34 50%,         #57461c 50%,         #755b1a 65%,         #a38923);     background: -webkit-gradient(         linear, left top, left bottom,         from(#ffffff),         color-stop(0.50, #c9ab34),         color-stop(0.50, #57461c),         color-stop(0.65, #755b1a),         to(#a38923));     border-radius: 10px;     -moz-border-radius: 10px;     -webkit-border-radius: 10px;     border: 1px solid #000000;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 5px rgba(161,142,016,0.6);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 5px rgba(161,142,016,0.6);     text-shadow:         0px -1px 3px rgba(255,255,255,0.8),         0px 1px 0px rgba(255,255,255,0.3);margin: 0 0 .5em; " /><b>Coklat</b></button> <button onclick="bgChange('#FFC0CB')"  value=('pink') onclick="bgchange('http://adaraghassani.blogspot.com/search/label/artikel%20komputer'" style="width: 100px;height:font-family: arial, helv etica, sans-serif;    font-size: 12px;        text-align: center;color: #ffffff;padding: 10px 15px;background: -moz-linear-gradient(         top,         #2ea6d2 0%,         #b1a8f7 18%,         #2b85a6 50%,         #235a6e 75%,         #7c81d6);     background: -webkit-gradient(         linear, left top, left bottom,         from(#2ea6d2),         color-stop(0.18, #b1a8f7),         color-stop(0.50, #2b85a6),         color-stop(0.75, #235a6e),         to(#7c81d6));     border-radius: 6px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border: 1px solid #0079d6;     -moz-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 2px rgba(255,255,255,1);     -webkit-box-shadow:         0px 1px 3px rgba(000,000,000,0.5),         inset 0px 0px 2px rgba(255,255,255,1);     text-shadow:         0px -1px 0px rgba(206,231,240,0.2),         0px 1px 0px rgba(026,052,061,0.4);margin: 0 0 .5em; " /><b>Pink</b></button></table>

5. Masukan Kode Script diatas ke dalam Konten. dan berikan judul sesuai keinginan anda.
6. Selesai..


NB :

• Kode yang berwarna Merah adalah kode untuk warna. anda bisa merubah kode tersebut sesuai dengan warna yang anda inginkan. Untuk mencari warna silahkan klik disini 
• Ganti Kode yang berwarna Biru dengan URL blog anda.
• Jika ingin mengganti bentuk Button silahkan anda ganti kode yang berwarna Kuning dengan kode button yang anda inginkan. Untuk mencari bentuk Tombol Button CSS3 silahkan klik disini
• Cara memakai Tombol Button CSS3 adalah tinggal klik saja Button yang kamu inginkan lalu akan muncul kode script disampingnya, lalu kamu copy seperti kode yang berwarna kuning di atas.

Hasil Tampilan :