Cara Mengganti Background Blog dengan Gambar


Dalam mengedit dan memodifikasi sebuah blog, dibutuhkan pemikiran dan pandangan yang luas. Contohnya, background yang Anda ganti, template yang Anda download, artikel terkait yang Anda gunakan dll. Namun terlepas dari itu semua, kegunaan yang ingin didapat dari pengeditan tersebut bukan untuk tampilan yang mewah tetapi lebih ke kenyamanan pengunjung blog dalam melihat blog kita serta sedikit ditambahkan optimization SEO.

Pada artikel yang berjudul "Cara Mengganti Background Blog dengan Gambar" 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. Untuk tutorial cara mengganti background tersebut sapat anda lihat dalam artikel kali ini.

Cara Mengganti Background Blog dengan Gambar :
1. Silahkan Anda ke halaman template, dan edit HTML
2. Lalu tekan CTRL+F dan carilah kode seperti ini : #body atau .body 
3. Setelah berhasil menemukan kode tersebut, carilah yang mirip seperti kode dibawah ini :
body{
background:#ded8c0;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
}
4. Setelah ketemu, Anda tinggal menambahkan kode ini :
url('url link gambar yang ingin dijadikan background') repeat-x; 
Sehingga, dari contoh kode diatas, menjadi :

body{
background:#ded8c0 url('url link gambar yang ingin dijadikan background') repeat-x; color:#28261A;font:12px verdana,arial,Sans-erif;text-align:left;margin:0;}
5. Klik Preview untuk melihat hasilnya. dan Simpan apabila gambar background telah sesuai dengan pengaturan tampilan Anda.

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;

Bagaimana, mudah kan untuk cara mengganti background sebuah blog. Sekian dulu artikel Media Blogger dengan kategori Tutorial Blogger ini. Terimakasih telah membaca artikel saya berjudul Cara Mengganti Background Blog dengan Gambar , semoga dapat bermanfaat.

94 comments:

  1. ThX For Artikel nya,,
    sangat bermanfaat..
    kunjung balik ke.
    adimbahgahol.blogspot.com
    adimbahgahol.blogspot.com

    Follow aja,Nanti Ane Follow Balik ke blok Elu pada..

    ReplyDelete
  2. bingungg ko gak ketemu kodenya gan

    ReplyDelete
  3. visit blog cyber,, salam blog walking http://cbs4rt.blogspot.com

    ReplyDelete
  4. Visit & Follow blog ku ya.... di http://hearts444.blogspot.com/

    ReplyDelete
  5. makasih tutorialnya Gan, sangat membantu :)

    ReplyDelete
  6. Gk Ngerti nih Kasih Link nya ajja Pliss :)

    :D

    ReplyDelete
    Replies
    1. nih url nya.
      http://4.bp.blogspot.com/_PBK3lWVNM6g/TRzbs0G2wcI/AAAAAAAABlY/5eUQCLSbqtE/s1600/blog%2Bbackground-001.jpg

      Delete
  7. mudah mudahan berhasil.. terima kasih

    ReplyDelete
  8. halaman template itu apa yaa ?? maph gatau , belum berpengalaman .. !!

    ReplyDelete
    Replies
    1. Silahkan Login ke blogger, lalu kan ada nama blog yang kita buat.

      Nah klik nama blognya,terus di menu sebelah kiri adalah tempat-tempat untuk melakukan pengeditan blog.
      Disitu ada yang namanya Template. Nah, tinggal di klik aja.

      Delete
    2. kodenya yg mana sii.. masih bingung

      Delete
    3. itu kodenya : body

      silahkan dicari ^^

      Delete
  9. terima kasih sob,,sangat membantu sekali nih sob,,
    kunjungan balik yah sob,,Dhani's Blog

    ReplyDelete
    Replies
    1. monggo, semoga bermanfaat ya..
      :)

      Delete
    2. templatenya itu dimana ya?? kok gak ketemu2??

      Delete
  10. kodenya itu yg mana sii.. masih bingung

    ReplyDelete
    Replies
    1. kodenya yg seperti ini .body atau #body

      pasti ada kok di setiap template.
      Klik Edit HTML > Lalu cari kodenya dengan menekan tombol ctrl + f

      Delete
  11. nganu, di tmptku gaada body{ nya:|

    ReplyDelete
    Replies
    1. Expand Widget Templatesnya jangan lupa diceklis yah.

      setelah Masuk ke Template > Edit HTML > Ceklis/Centang Expand Widget Templates di pojok kanan atas. Terus baru deh lakukan pencarian.

      :)

      Delete
  12. Replies
    1. ketemu kok, kalau template yg paling baru.. itu di klik tanda panah seperti lambang play musik, di bagian < b :skin >

      Delete
  13. Gua Gak Ngerti nIH cOBA lAkukan Lagi...

    ReplyDelete
  14. bisa broo thx banget ya infonya broo

    http://bermanfaat11.blogspot.com/2013/04/6-cara-menjadi-pemberani_1874.html

    ReplyDelete
  15. thanks infonya sangat bermanfaat

    ReplyDelete
  16. mantep infonya gan...
    visit gan www.lowdrift.blogspot.com

    ReplyDelete
  17. Replies
    1. terimakasih dukungan agan agan semua :D

      Delete
  18. thanks kak, infonya :))
    follow blog ku guys tulisansigemini.blogspot.com ntar di follback deh :)) terimakasih

    ReplyDelete
  19. Makasih gan, kunjungan balik ya >> http://esbepe-sbp.blogspot.com/
    Terima Kasih :)

    ReplyDelete
  20. Makasih infonya bang
    izin copas ya gan? :D

    jangan lupa visit my blog..
    http://hackcheatmax.blogspot.com/

    ReplyDelete
  21. makasih sobat atas cara nya
    follow blog saya ya sobat => http://belajarsmartyuk.blogspot.com

    ReplyDelete
  22. sobat, tau ngga biar background blonya bisa lebih dr satu?

    ReplyDelete
    Replies
    1. lebih dari satu terus ganti ganti gitu?
      kalau itu mesti pake javascript dan jquery sobat.

      Delete
  23. Thanks sob atas infonya

    Kunjungan balik yah^^

    di www.raisids.blogspot.com

    ReplyDelete
  24. thanksbanget buat kamu !!!

    visit back ya www.wahyu-uzumaki.blogspot.com

    sukses selalu

    ReplyDelete
  25. mantab deh ... makasih tutorialnya mas ;)
    tongkrongin jga dong blog sy tentang bunga indah

    sukses selalu :D

    ReplyDelete
    Replies
    1. wahh baru kali ini liat blog dengan tema bunga.
      lanjutkan mas :)

      Delete
  26. thank gan.

    http://meckhye.blogspot.com/

    ReplyDelete
  27. mksh gan.

    http://meckhye.blogspot.com/

    ReplyDelete
  28. gan Expand Widget Templatesnya dimana ya? koq sya kelilingin gak ada, pa itu pake tampilan yg lama!? mohon bantuannya gan! thnx :)

    ReplyDelete
    Replies
    1. benar sekali sob, itu tampilan lama.
      kalau tampilan baru itu sdah tidak ada.

      Delete
  29. udh nyobain tp loadingnya lma, blm tau bs apa gak,,
    makasih infonya,,,

    ReplyDelete
    Replies
    1. kalau loading lama biasanya disebabkan ukuran gambar yang terlalu besar. kalau bisa ukurannya diperkeceil dibawah 400px

      Delete
  30. keren gan, sangat bermanfafat.. saya juga lagi bikin kaya gini coba dilihat di blog saya :)

    ReplyDelete
  31. hebat mas brow . lanjutkan . kunjungan baliknya di tunggu sob . http://ediztian.blogspot.com/

    ReplyDelete
  32. templatenya bsa di edit pake dreamwaver ngga'.....?????

    ReplyDelete
    Replies
    1. ngga bisa sob. Tetapi kalau html dan cssnya saja itu bisa.

      Delete
  33. terimakasih bro, udah bisa nih backgroundnya..

    ReplyDelete
  34. Ane gak bisa gan... gmn nih gan? bisa kasi solusi gak?

    ReplyDelete
    Replies
    1. mungkin gambar anda blum diupload bro. silahkan upload dulu.

      Delete
  35. kok gabisa ya buat ngetiknya-_- gak ada kursornya

    ReplyDelete
    Replies
    1. yang lain pada bisa -,-'
      coba cek lagi mungkin ada yang salah.

      Delete
  36. terima kasih tutorilanya sob. dah bisa

    ReplyDelete
  37. terima kasih sob tutorialnya. Sudah bisa

    ReplyDelete
  38. Url nya gimana ya carinya ? --' Mau pake gambar Keroppi tapi engga tau gimana cari url nya hahah maap belum ngertii hahah --' Mohon bantuannya
    :"D

    ReplyDelete
    Replies
    1. caranya, cari gambarnya di google terus download, terus upload.
      Nah, pastikan setiap proses upload selesai menghasilkan sebuah url gambar, kemudian tinggal di copy link tersebut.

      atau bisa bertanya langsung di group IdBloggers

      Delete
  39. kk, mau tanya...
    kalau misalnya mau buat backgroundnya ditimpa beberapa gambar, caranya gimana ya?
    bukan widgets, jadi seperti menambah gambar background lagi diatas background... *bingung jelasinnya*

    jadi kalau saya seperti menambah desain renda gitu diujung atas blognya, dan mau bikin atas-bawah sebenernya...
    http://i1286.photobucket.com/albums/a615/MurasakiTsurara/begini_zpsd6e04f80.jpg

    mohon bantuannya... m(_ _)m

    ReplyDelete
  40. SUSAH AH GA BISA TERUS, G BISA GMN SH CRA NYA ? G BISA TRS NH

    ReplyDelete
  41. terima kasih atas informasi yang bermanfaat ini http://hainusantara.com/

    ReplyDelete
  42. makasih mas, adik coba dulu...kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    ReplyDelete
  43. gan bantu ane gan cara yg dia atas gak bisa
    ini code nya
    body{overflow-x:hidden}body{margin:0}body{font-family:"Raleway",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.666;color:#818181;background-color:#f6f5f2;font:14px/1.6 'Raleway',Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.table{width:100%;margin-bottom:23px}

    ReplyDelete
  44. Thanks Om. sudah berhasil diganti dengan link yang dari om tadi :
    http://4.bp.blogspot.com/_PBK3lWVNM6g/TRzbs0G2wcI/AAAAAAAABlY/5eUQCLSbqtE/s1600/blog%2Bbackground-001.jpg

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template