Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengganti Background Blog Otomatis


Cara Mengganti Warna Background Blog Otomatis – Banyak cara untuk membuat variasi dan memperindah tampilan blog. Salah satunya adalah dengan menempatkan widget untuk mengganti warna background otomatis ini di sidebar blog anda, sehingga pengunjung dapat memilih warna background kesukaan mereka. Selain supaya kita juga ngga bosan dengan tampilan background yang itu-itu saja, dan pengunjung yang datang pun kita harapkan mendapatkan kenyamanan sehingga mereka betah berlama-lama membaca  di blog kita. Contoh penggunaan widget pengganti warna background blog otomatis ini dapat sobat lihat langsung di sidebar blog ini.


Cara Mengganti Background Blog :

1.       Login ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.       Copy script yang ada dibawah ini dan paste pada gadget.

<div class="widget-content">
<center><b>Pilih Warna Kesukaan Anda</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>

4.       Silahkan sobat edit teks tulisan yang berwarna merah dan kode pilihan warna yang berwarna biru dengan warna-warna kesukaan anda. Untuk kode warna dapat dilihat disini.
5.       Save / Simpan.

Mudah dan gampang bukan ? Pada widget pengganti warna background ini hanya ada 9 pilihan warna background, jika sobat ingin menambahkannya copy saja kode yang terakhir sehingga kolom warna akan bertambah. Kalau masih bingung, baca lagi postingan sebelumnya tentang cara membuat tabel dan kolom. Semoga tips Cara Mengganti Warna Background Blog ini bermanfaat untuk anda.

32 komentar untuk "Cara Mengganti Background Blog Otomatis"

  1. @Ban Terbaik
    Ban lagi..ban lagi..kontes lagi..kontes lagi..=)) Gimana posisi SERP terakhir sob?

    BalasHapus
  2. pilih warnanya pake kode ya,,rumitt unkk

    BalasHapus
  3. @mas irfan : kalo background'y di ganti2 gambarnya bisa kagak? bukan sekedar ganti warna, hehehe, penasaran aja :)

    BalasHapus
  4. kunjungan malam gan... mau tanya jika ingin merubah pilihannya ke gambar gimana ya gan... soalnya jika warna saya udah dipasang cuman saya pingin pengunjung itu merubah dengan pilihan gambar... mohon bimbingannya terimakasih... sekalian nitip blogs gan http://brotherrickyxp.blogspot.com/

    BalasHapus
  5. coba lebih baik daripada diam saja
    iya gak

    BalasHapus
  6. @ Mister Bo & Brother Ricky XP
    Untuk mengganti background blog otomatis dengan beberapa pilihan gambar memang bisa, tapi scriptnya puanjang banget..!! Ntar ya kapan2 akan saya posting deh. Kalo cara mengganti dengan manualnya kalian harus mengupload gambar yang mau dijadikan background ke hosting googlepages atau picassa dan catat URLnya. Kemudian pada template cari kode seperti ini:

    body { background: #FFFFFF;
    margin:0; color:#000000;
    font:12px trebuchet ms;
    text-align: center }

    Selipkan kode URL gambar pada CSS sehingga jadi seperti ini:

    body { background: #FFFFFF url('http://gambargue.googlepages.com/pattern_096.gif') repeat-x;
    margin:0; color:#000000;
    font:12px trebuchet ms;
    text-align: center }

    Selamat mencoba !! ;)

    BalasHapus
  7. Gan bisa gan sukses tapi script untuk mengganti warnanya dengan gambar ada tidak? share nya ditunggu :)

    BalasHapus
  8. sukses gan udah ane terapin di blog ane ..trima kash

    BalasHapus
  9. terimakasih sobat buat tutorialnya
    sangat membantu sob
    mampir nalik ke blog saya sob

    BalasHapus
  10. thanks banyak gan infonya.... saya coba deh di web saya.... :-*

    BalasHapus
  11. wahh makasii gann..
    nice sharee!! ^^
    mantaapppp..

    BalasHapus
  12. ijin praktek mas... makasih tutorialnya ya... ditunggu kunjungan baliknya....

    BalasHapus
  13. ijin coba , om..

    maklum saya masih pemula :(

    BalasHapus
  14. test dulu ah. . . nanti balik lagi kalo bingung =))

    BalasHapus
  15. thank sblomnya ;saya udah coba boss;widget nya udah muncul tapi kok nggak bisa ganti warna klo di klik....

    BalasHapus
  16. Wah sory banget nie sob century 21 masuk sini..

    Saya pernah post script itu.dan saya mencoba pake gambar. coba deh ganti jangan pake warna. pake background gambar lebih keren dan mungkin agak sedikit lemot. Makasih sob sukses selalu..

    BalasHapus
  17. manteb infonya...thx gan.. :)

    BalasHapus
  18. GAN untu meni icon Fb yang muncul dari tas itu gimana,..?

    BalasHapus
  19. Nemu lagi nih script..sempet ke hapus di widget & lupa sumberna..makasih bro :D

    BalasHapus
  20. wah bermanfaat bgt ni.
    Saya minta ijin ngutip artikelnya ya.
    Trimakasih
    http://cvwirajaya.blogspot.com

    BalasHapus
  21. Artikelnya bermanfaat ni. Ijin ngopy artikelnya ya.
    Trimakasih
    http://cvwirajaya.blogspot.com

    BalasHapus
  22. mas gimana kalo cara ganti background gambar otomatis/ bukan background warna , ada ngak ? ( koment balik di blog saya ya, trims )

    BalasHapus
  23. yang di HTML delete smua yah mas ?
    terus kalo mau ganti background yang kaya gini
    http://www.sw-corp.net/ gimana caranya ?

    BalasHapus
  24. nice info Gan, share info yang sama ya ... trim

    BalasHapus
  25. nice info gan..cm kl misalnya isi htmlnya rada beda atau tdk persis sma spt contoh..gmn ya cara rubahnya...
    thx b4

    BalasHapus
  26. blog ane ini kok tampilanya kurang bagus ya.

    BalasHapus