Background dalam Web/blog bisa disebut juga latar belakang suatu Web/blog. Latar belakang suatu Web terbagi atas 2 (dua) dasar, yaitu Background-Color dan Background-Image.
DEMO Background Color Changer
- Background Color atau disebut juga background yang terjadi akibat dari efek warna warna. Syntax dalam CSS Background ini adalah → background-color: #KODE WARNA;
- Background Image atau disebut juga background dengan gambar. Syntax dalam CSS Background ini adalah → background-image: url(URL_GAMBAR.com);. Karena background ini menggunakan fungsi gambar maka bisa di tambahkan Syntax lain
background-color: color code html
Background ini bisa menggunkan kombinasi Gradient
background-repeat: no-repeat/repeat-x/repeat-y
background-attactment: fixed/relatives/absolute
background-position: top/left/bottom/right/ or both
Dalam permainan Javascript segala sesuatu yang terlihat susah menjadi mungkin. Javascript kali ini adalah membuat Background Color Changer. Javascript apa itu? Javascript ini bertujuan untuk merubah suatu Latar warna belakang menjadi warna lain.
Ada 2 (dua) Style dalam Background Color Changer ini menurut saya yang paling cocok disini.
Ada 2 (dua) Style dalam Background Color Changer ini menurut saya yang paling cocok disini.
DEMO Background Color Changer
- Standard Background Color Changer Dalam penggunaan script ini sobat tentu bisa mengubah ubah background langsung dari situ dengan memasang tombolnya satu persatu.
- Pertama tama Buka Blogger.com dengan Password dan ID
- Buka Layout/Design
- Page Elemen → Add a Gadget → Javascript/HTML
- Letakin kode Berikut di kotak Javascript/HTML yang kosong itu :
- Kemudian Save!
- Special Background Color Changer Script ini adalah script Full Color dengan kombinasi kode warna HTML dengan Script yang tadi. Untuk lebih jelasnya silahkan lihat caranya di bawah.
- Pertama tama sobat Buka blogger.com dengan Password dan ID
- Kemudian Sobat buka Layout/Design → Edit HTML → Cari kode <body>
- Kemudian ubah code tersebut menjadi kode <body id="clrchange">
- Kemudian Save!
- Buka lagi Layout → Page Element
- Add a Gadget → Javascript/HTML
- Isi kotak kosong tersebut dengan kode
- Selesai.
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<style>
.bgchange{width:15px;height:15px;border:1px solid #000;margin:1px;}
</style>
<input class="bgchange" style="background:#000" type="button" onClick="bgChange('#000')"/>
<input class="bgchange" style="background:#00f" type="button" onClick="bgChange('#00f')"/>
<input class="bgchange" style="background:#0f0" type="button" onClick="bgChange('#0f0')"/>
<input class="bgchange" style="background:#0ff" type="button" onClick="bgChange('#0ff')"/>
<input class="bgchange" style="background:#f00" type="button" onClick="bgChange('#f00')"/>
<input class="bgchange" style="background:#f0f" type="button" onClick="bgChange('#f0f')"/>
<input class="bgchange" style="background:#ff0" type="button" onClick="bgChange('#ff0')"/>
<input class="bgchange" style="background:#fff" type="button" onClick="bgChange('#fff')"/>
<script type="text/javascript" src="http://www.westciv.com/tools/shadows/jscolor/jscolor.js"></script>
<script type="text/javascript">
function effect() {
clrchangeDiv=document.getElementById("clrchange");
backgroundColor="#" + document.getElementById("bgclr").value;
if (clrchangeDiv) {
clrchangeDiv.style.backgroundColor=backgroundColor;
}}
</script>
<input class="color" id="bgclr" value="FFFFFF" onchange="effect()">
10 komentar:
gooood !!!
mana yang mau ane kunjungi blog nya ?
lagi pengin belajar nih !! salam sejahtera..
ane mau donk !!!!!!!!!!!
maksih bank
terimaksih for visit
oke mas main ke fbku aja ?
https://www.facebook.com/daniar.tresna.r
yah ...
mantep kang !!
gimana tuh posting kaya agan?
Full..
@Anonim:
oke !
kampreet
Posting Komentar