Mengganti Warna Background

Assalamu'alaikum salam Blogger, sebelumnya Saya ucapkan selamat Liburan Panjang Dan Tahun Baru, setelah lama Saya posting yang gak jelas di blog untuk kesempatan ini saya meluangkan waktu untuk membuat postingan khususnya untuk para sobat 21 Siak semua, ya sambil mengisi Liburan yang suntuk ini mudah-mudahan postingan ini menjadi sebuah Liburan bagi saya dan dapat bermanfaat bagi para sobat semua.

Postingan kali ini 21 Siak mau mengetengahkan tutorial sederhana yaitu tentang "Pasang Tombol Ganti
Background Blog". dengan adanya tombol ini Blog kita bisa di ganti-ganti dengan bermacam-macam efek Background Warna sesuai kesukaan kita.

Untuk DEMO silahkan klik salah satu warna di bawah ini dan lihat perubahannya :














OK, 21 Siak tidak akan banyak-banyak berbicara lagi kita langsung aja ke tahap pembuatan Tombol Ganti Background Blog :


  1. Seperti biasa LogIn ke Blogger sobat
  2. Pada halaman Dasbor klik Rancangan
  3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
  4. Kemudian Copy dan Paste Kode di bawah ini di ktak HTML/Javascript


    <center><script type="text/javascript">
    function bgChange(bg)
    {
    document.body.style.background=bg;
    }
    </script>

    <table border="1" width="660" height="20">
    <tr> <td
    onclick="bgChange('#FFFFFF')" bgcolor="white">
    <td
    onclick="bgChange('#000000')" bgcolor="#000000">
    <td
    onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">

    <td
    onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
    <td
    onclick="bgChange('#98FB98')" bgcolor="#98FB98">
    <td
    onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
    <td
    onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
    <td
    onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
    <td
    onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">

    <td
    onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
    <td
    onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

    </td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></td
    ></tr>
    </table>

    <div class='clear'></div></center>

  5. Kemudian Klik tombol Simpan/Save

Selamat mencoba, dan semoga bermanfaat. Untuk tombol Ganti Background dengan Gambar akan menyusul.
Dan Mari Berkarya?

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar

Kawan Setia