Advertise

Merubah Warna Background Dasar Blog Secara Otomatis

jika tutorial blog sebelumnya membahas cara modifikasi label-tag seperti menu navigasi ala wordpress, dan untuk tutorial blog kali ini akan membahas cara mengganti warna background dasar blog secara otomatis tanpa harus mengdit html template anda.

Cara merubah warna background dasar blog ini bisa dilakukan secara otomatis dengan menambahkan sedikit script yang bisa ditempatkan pada bagian widget blog anda.

Lihat DEMO

Cara pembuatannya seperti berikut :

Masuk pada dasbor blog anda
Pilih Rancangan >> Add widget Template >> Pilih HTML/Javascript
Masukan script merubah background outomatis dibawah ini :
<div style="overflow:auto; width:100%; height:100%;margin-top:16px">
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
Pilih Warna Latar
<table border="1" width="300" height="20">
<tr> <td
onclick="bgChange('')" bgcolor="white">
</td> <td
onclick="bgChange('#FAFAD2')" bgcolor="#FAFAD2">
</td> <td
onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">
</td> <td
onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
</td> <td
onclick="bgChange('#98FB98')" bgcolor="#98FB98">
</td> <td
onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
</td> <td
onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
</td> <td
onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
</td> <td
onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">
</td> <td
onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
</td> <td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">
</td> </tr>
</table>
</div>

Jika sudah silahkan Klik Simpan.
dan lihat hasilnya.

NB :: Anda bisa merubah warna-warna background yang ada di script diatas dengan mengganti kode warna sesuai selera anda. selamat mencoba.

17 komentar:

  1. wow....keren tutorial ini brader...hehehhe.....hebat nyari bahannya....

    BalasHapus
  2. Saya angkat topi, blog ini konsen dengan permainan warna dan desain, kapan-kapan saya akan coba mengaplikasikan tutor diatas.

    BalasHapus
  3. sejujurnya yang saya inginkan tampilan di blog saya adalah background yang tidak berwarna hitam, tapi sepeti pnya Kang Chugy ato punya Kang Adit B.I.
    Ketika coba-coba ngubah HTML, mesti dengan trial dan seringkali terbentur dengan ngubah warna font. akhirnya mumet menyerah.
    mudah-mudahan dengan tutor ini, akan saya coba
    suwun Kang

    BalasHapus
  4. lucu juga ya scriptnya.. bisa dicoba.

    BalasHapus
  5. Dulu aku pernah nyoba make kaya gini Sob.. tapi kata yg ngunjungin malah bikin sakit mata jadi aku ilangin hhe... ini hapir sama kaya sistem bikin tulisan large atau small dengan di klik hhe.... mantabz.... aku tunggu tutor selanjutnya....

    happy blogging n semangat ::

    BalasHapus
  6. aq dah lihat demonya, keren bgt sob, nanti kalau sudah ada waktu akan saya coba, terima kasih dah d share

    BalasHapus
  7. Terima kasih infonya. Sangat bermanfaat.
    Save As dulu... sepertinya nanti bakalan butuh scriptnya :D

    BalasHapus
  8. wah ntar aja deh gan, kalau sudah bosan dengan background saya ....

    BalasHapus
  9. simpel nii triknya.. tinggal masukin...
    blasss.. maknyus :) keren kang :)

    BalasHapus
  10. Oke, ane save bwt ane plajari ya...

    BalasHapus
  11. tipsnya keren uy...dapet dr mana ni. makin ok aj.

    BalasHapus
  12. mantap nih. boLeh, boLeh, boLeh.
    asLi keren banget deh, sekaLi kLik warna bisa kayak bungLon.

    BalasHapus
  13. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  14. asli keren buangget trims yah

    BalasHapus