Cara Membuat Background Body Gradient
Cara Membuat Background Body Gradient
Assalamu'alaikum Apa kabar sobat semuahsedikit mau berbagi tentang
Cara Membuat Background Body Gradient
nah ini gunanya membuat Background Body Gradien tanpa harus obrak abrik Html atau Css
emang si sudah banyak yang menggunakan warna buat merubah Background Body
tapi yang sering kami temukan itu hanya menggunakan Satu warna atau hanya pake Background yang gak
menggunakan Gradient Nah kali ini kami mau mencoba mengunakan dan merubah menjadi Background Body Gradient.
Buat sobat yang mau pasang silakan jangan lupa ikuti cara penerapanya di bawah ini
1: Ambil Kode javascript di bawah pastekan pas di atas Kode </body>
<script src='http://selladrt.googlecode.com/files/Kode%20Warna%20Untuk%20Blogger.js' type='text/javascript'/>
2: Ambil Kode CSS di bawah pastekan di bawah Kode </b:skin> atau di bawah Kode <head>
<style type='text/css'>
#styleSwitcher #bgpattern span{
display:block;float:left;width:20px;height:20px;border:1px solid black;margin:0 5px 0 0;cursor:pointer;}
#styleSwitcher input[type="text"]
{width:118px !important;padding:4px !important;height:auto !important;}</style>
3: Cara pemasangannya Terserah sobat mau pasang di manah sesuka sobat
4: Ambil Kode Html di bawah ini
<table border='0' id='styleSwitcher'><tr>
<td colspan='2'>
<div id='bgColorer'>
</div>
<h2>SILAKAN PILIH WARNA BUAT BODY BLOG INI</h2>
<div id='bgpattern'><span onclick='bgSwitch(this.style.background);' style='background:#ff9b00; background:-moz-linear-gradient(top, #ffda4d, #ff9b00); background:-webkit-gradient(linear, left top, left bottom, from(#ffda4d), to(#ff9b00)); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, #ff0000 30%, rgb(90, 140, 250) 70%); background: -webkit-linear-gradient(30deg, #ff0000 30%, rgb(90, 140, 250) 70%); background: -o-linear-gradient(30deg, #ff0000 30%, rgb(90, 140, 250) 70%); background: -ms-linear-gradient(30deg, #ff0000 30%, rgb(90, 140, 250) 70%); background: linear-gradient(30deg, #ff0000 30%, rgb(90, 140, 250) 70%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, rgb(90, 140, 250) 70%) 30%, #000 70%); background: -webkit-linear-gradient(30deg, rgb(90, 140, 250) 70%) 30%, #000 70%); background: -o-linear-gradient(30deg, rgb(90, 140, 250) 70%) 30%, #000 70%); background: -ms-linear-gradient(30deg, rgb(90, 140, 250) 30%, #000 70%); background: linear-gradient(30deg, rgb(90, 140, 250) 70%) 30%, #000 70%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, #000000 30%, rgb(90, 140, 250) 70%); background: -webkit-linear-gradient(30deg, #000000 30%, rgb(90, 140, 250) 70%); background: -o-linear-gradient(30deg, #000000 30%, rgb(90, 140, 250) 70%); background: -ms-linear-gradient(30deg, #000000 30%, rgb(90, 140, 250) 70%); background: linear-gradient(30deg, #000000 30%, rgb(90, 140, 250) 70%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background:#00ff00; background:-moz-linear-gradient(top, #000, #ff9b00);background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#ff9b00)); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: rgb(30, 50, 230); background: -moz-linear-gradient(30deg, #000000 30%, #ff0000 70%); background: -webkit-linear-gradient(30deg, #000000 30%, #ff0000 70%); background: -o-linear-gradient(30deg, #000000 30%, #ff0000 70%); background: -ms-linear-gradient(30deg, #000000 30%, #ff0000 70%); background: linear-gradient(30deg, #000000 30%, #ff0000 70%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background-color: #1a82f7;background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #1a82f7); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #1a82f7); }; repeat;'/><span onclick='bgSwitch(this.style.background);' style='background-color: #1a82f7; background-image: url(images/linear_bg_1.png); background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7); /* IE 10 */ background:-ms-linear-gradient(left, #2F2727, #1a82f7); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7); };repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); }; repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);background: linear-gradient(to right, red, orange, yellow, green, blue); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: -prefix-linear-gradient(top, blue, white 80%, orange);background: linear-gradient(to bottom, blue, white 80%, orange); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: -prefix-linear-gradient(left top, blue, white);background: linear-gradient(to bottom right, blue, white); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: radial-gradient(red, yellow, rgb(30, 144, 255)); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%); repeat;'/><span onclick='bgSwitch(this.style.background);' style='background:-moz-linear-gradient(top, red, blue); repeat;'/>
</div>
</td>
</tr>
</table>
Silakan sobat lihat DEMO di atas pilih warna sesuka sobat.
Sekian dulu dari kami semoga bermanfaat buat sobat semuah Amin...?
{ 11 comentários... read them below or Comment }
1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
efek gradient bikin background makin matep tuh mas, nais inpoh
BalasHapusiya mas kyk gula hehe
HapusEfek gradien memang keren mas ... :D
BalasHapusDengan back ground gradient, akan membuat tampilan blog keren ya Kang? Terima kasih tutornya dan kopi angatnya.
BalasHapuskeren kang , terlalu mencolok kayak nya kang :(
BalasHapusmantap... makin lama, makin banyak mainan css... keren..
BalasHapussaya masih suka yang polos-polos aja mas,
BalasHapustermasuk kopinya juga tetap pilih yang hitem-hitem
minta kopi se ember gag pake lama
BalasHapusmantap nih mas, tak coba di blog lain dulu nih
BalasHapus.. keren,, ..
BalasHapusmantaap kren
BalasHapus