Cara Mengganti Gambar Background Blog di Blogger

Cara Mengganti Gambar Background Blog di Blogger

Cara Mengganti Gambar Background Blog di Blogger - Memperindah blog merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Salah satu cara membuat blog tampak beda dengan yang lain adalah dengan mengubah background blog dengan gambar.

Pada artikel yang berjudul "Cara Mengganti Gambar Background Blog di Blogger" ini. Saya akan menjelaskan cara merubah background dengan gambar pada blog agar terlihat rapih dan membuat pengunjung merasa nyaman sehingga akan memaksimalkan traffic pengunjung yang lebih baik. Hal ini juga akan membuat pengunjung bertahan lama mengikuti setiap artikel yang kita buat. Berikut akan saya jelaskan caranya.

1. Silahkan Anda ke halaman template, dan edit HTML
2. Lalu tekan CTRL+F dan carilah kode body{
3. Kodenya mirip-mirip seperti yang dibawah ini
body{background:#ccc url(http://4.bp.blogspot.com/-syg4U0ZTb4c/TivPIFkCCRI/AAAAAAAABu4/xtY2LXfZcfc/s1600/background.png) repeat-x top;
color:$textcolor;
font:x-small Georgia Serif;
font-size:small;
text-align:center;
margin:0
}
4. Kalau sudah ketemu tinggal ganti kode yang mirip seperti warna merah dengan Url Gambar anda. Tapi kalau kodenya berbeda anda bisa menambah setelah kode body seperti berikut
 body{background-image: url(alamat url gambar anda);
5. Simpan Template

Perlu diperharikan ukuran gambar anda, usahakan tidak menggunakan gambar dengan byte yang besar, usahakan dibawah 50kb, agar tidak membuat loading berat lama.

Gambar memiliki ukuran pixel yang berbeda-beda. Pastikan hasil gambar background blog anda penuh dari kiri ke kanan dan dari atas ke bawah. Untuk membuat gambar background penuh diperlukan pengulangan. Gunakan tag repeat (mengulang) ke kanan/samping: repeat-x, dan ke bawah: repeat-y.


Gambar tersebut juga dapat diatur agar ketika di scroll ke bawah, gambar menjadi tetap dan tidak berubah. Syaratnya ukuran gambar harus memiliki panjang vertikal minimal 860px. Contoh : 1160 x 880, 600 x 880, 1400 x 880. Caranya tinggal kamu rubah  kata repeat-x; menjadi repeat-x top left fixed;

Atau kamu juga bisa merubah sebuah gambar kecil menjadi gambar besar. Caranya sama tinggal mengganti repeat-x; menjadi repeat scroll 0 0;

Mudahkan caranya? Sekian tutorial Cara Mengganti Gambar Background Blog di Blogger. Semoga bermanfaat.

Anda sedang membaca Artikel tentang Cara Mengganti Gambar Background Blog di Blogger dan anda bisa menemukan Artikel Cara Mengganti Gambar Background Blog di Blogger ini dengan URL http://blogmashanif.blogspot.com/2013/05/cara-mengganti-gambar-background-blog.html. Diharapkan agar tidak melakukan copy paste terhadap Artikel Cara Mengganti Gambar Background Blog di Blogger ini, untuk pengutipan harus meletakkan link Cara Mengganti Gambar Background Blog di Blogger sebagai sumbernya.

Enter your email address:

readers

33 komentar:

  1. Ganti background tanpa utak-atik template bisa ga yah.... hahaha,

    BalasHapus
    Balasan
    1. kalo pake template bawaan blogger bisa, masuk Template > Sesuaikan. ganti aja dari situ

      Hapus
  2. hmm begitu ya. Nambah backgroundnya. Sekarang kalo caranya antara bagian atas dan bawah berbeda gambar gemana? Saya tunggu cara buatnya, beserta penjelasan yang jelas.

    BalasHapus
    Balasan
    1. background atas bawah berbeda? itu saya masih masa pembelajaran :)

      Hapus
    2. yah masih masa pembelajaran ya... Saya dulu juga pernah melihat template yang lebih aneh lagi. Ketika di scrooll ke bawah pasti gambar background berubah setiap beberapa detik. Contohnya di link ini (bukan promosi): http://www.htmldrive.net/items/demo/1279/skrollr-javascript-parallax-scrolling-lib. Kalo bisa share juga dunk caranya biar kayak gitu.. :)

      Hapus
    3. ada caranya tuh, tapi lupa aku :v

      Hapus
  3. keren kang tipsnmya , izin menyebarkan kang

    BalasHapus
  4. ini buat blogspot aja ya, kang?
    kasih tau donk buat wordpres juga.. :D

    BalasHapus
    Balasan
    1. waduh kalo wordpres saya gak tau.. belom punya akunya XD

      Hapus
  5. keren sob tutorialnya, thanks.
    visit me back.

    BalasHapus
  6. Terima kasih tutornya sobat, jika dipasang back ground, tidak menjadikan loading blog berat sob? Terima kasih.

    BalasHapus
  7. biar tambah cantik nihh kalo ganti background

    Kunjungan Rutin Oleh Ipul...

    :D

    BalasHapus
  8. Wah terimakasih sob, tapi aku suka warna yang netral jadi yg simpel2 aja.

    Hehe

    BalasHapus
  9. Pastinya lebih menarik dan tampil beda ya mas :)
    Trims buat infonya :)

    BalasHapus
  10. Wah bagus juga nih tapi perlu di koreksi ada beberapa template yang gak bisa walaupungak semua ;D

    BalasHapus
  11. Wah jadi mau daftar di blogspot nih,
    tpi ane cuma punya hp

    BalasHapus
  12. wah, thanks udah share ya sob :)

    lain kali share yg buat WP juga dong :D

    BalasHapus
  13. wajib d terapkan nih ilmu abang..thx sharenya heheh

    komen back yee

    BalasHapus
  14. kunjungan rutin sob.wah tambah lengkap aja tutor diblog ini,makasih infonya sob

    BalasHapus
  15. thanks gan buat solusinya bingung nih mau komen apa lagi

    BalasHapus
  16. wah keren nih buat mempercantik blog :D

    BalasHapus
  17. makasih buat tutorialnya... :)
    ditunggu potingan selanjutnya...

    BalasHapus
  18. thanks sob sudah berbagi ilmu yang bermanfaat..salam kenal anae blogger dari Madin

    BalasHapus
  19. Kalo gambar itu terkunci gimana 0m? Kan ane dh nyoba nih, ane dah ganti link fotonya, tp tetep aja gk brobah.. Nah, gmana ngatasinya?

    BalasHapus
    Balasan
    1. mungkin ada kesalahan dalam penulisan kode, coba anda pake gambar lain dulu, kalo bisa coba gambar yg dipengenin

      Hapus
  20. Makasih gan, pembahasannya lengkap. mantap

    BalasHapus
  21. kok di saya gk berfungsi repeat-x dan repeat-y gan ?? ajarin donk yang lebih jelas, please gan

    BalasHapus
    Balasan
    1. ini kan sangat simpel sob, repeat-y buat mengulang ke atas bawah, dan repeat-x buat mengulang ke kanan kiri

      Hapus
  22. knp di template saya gk ada body background'nya udh dicari" pke Ctrl+f jga gk ketemu

    BalasHapus
    Balasan
    1. diatas saya sudah menjelaskan, jika tidak ada bisa ditambahkan sendiri

      Hapus

Berkomentarlah dengan sopan dan bijak. Dilarang berkomentar dengan menyertakan link hidup atau unsur yang berbau spam. Jika ingin minta followback silahkan dan jangan sungkan, karena saya juga senang jika teman saya bertambah.