CARA GANTI BACKGROUND BLOG DENGAN GAMBAR - Tutorial cara mengganti background blog dengan gambar sendiri. Untuk kebanyakan blogger, hal yang paling dilakukan pertama kali ketika memiliki sebuah blog sendiri adalah mengganti background dengan gambar yang diinginkannya. Baik itu foto sendiri ketika lagi narsis, foto dengan teman-temannya ketika liburan, maupun foto pemandangan alam yang berhasil dia foto dengan kamera atau hpnya sendiri.
CSS 3
CSS 3
Tidak sembarangan gambar bisa dipilih dan digunakan untuk latar belakang blog, karena ada beberapa hal dan pertimbangan untuk mendapatkan hasil yang maksimal. Misalkan saja, apabila sobat menggunakan file gambar yang ukuran filenya 5mb maka gambar tersebut akan susah untuk dimuat, malah bahkan bisa memperlambat proses loading blog.

TIPS MEMILIH GAMBAR BACKGROUND BLOG
Berikut ini ada beberapa tips untuk memilih gambar yang akan dipakai sebagai background image :
1. Memiliki ukuran file yang kecil maksimal harus kurang dari 500kb
2. Memiliki ukuran pixel minimal 1024x768
3. Gunakan gambar yang memiliki format file .jpg, karena biasanya file dengan format bitmap atau png memiliki ukuran file yang besar.
4. Untuk mengganti ukuran file gambar bisa diedit menggunakan Microdoft office picture manager > Edit Picture > Compress Picture > Pilih Document atau Web page > Klick OK
5. Jika ingin menggunakan background yang diulang secara vertikal atau horisontal, pastikan gambar tersebut harus sama dengan ukuran standar device browser yang digunakan.

CARA UPLOAD GAMBAR KE BLOGSPOT
Setelah memilih gambar background langkah selanjutnya adalah mengupload gambar tersebut :
1. Buatlah postingan baru, isi judul postingan tersebut dengan sembarang judul
2. Arahkan kursor ke form penulisan kemudian pilih menu Insert Image , Pilih menu Upload > Choose Files > Pilih Gambar > Setelah selesai diupload kemudian pilih Add Selected
cara upload gambar di blogspot
cara upload gambar di blogspot
3.  Klik kanan gambar yang sudah berhasil diupload kemudian pilih Copy Image URL, link url inilah yang nantinya akan kita gunakan untuk mengganti background blog.

CARA MENGEDIT BODY TEMPLATE BLOGGER
Setelah mengupload gambar langkah selanjutnya adalah mengedit template html blogberikut ini beberapa langkah yang harus dilakukan :
1. Pilih menu Template > Edit HTML> Search kata body pada kode html tersebut dengan menggunakan ctrl+f maka sobat akan mendapatkan kode css sebagai berikut:
body{background:#696969;
color:#444;
font:x-small Georgia Serif;
font-size:small;
text-align:center;margin:0}
2. Yang akan kita ganti adalah pada bagian background, ubah background:blablabla; menjadi background: url(http://url gambar kamu) no-repeat; sehingga kode css tersebut berubah menjadi :
body{
background: url(http://url gambar kamu) no-repeat;
color:#444;
font:x-small Georgia Serif;
font-size:small;
text-align:center;margin:0}

cara edit background
cara edit background
3. Setelah itu klik save template, untuk penjelasan pada bagian no-repeat berfungsi untuk mengatur posisi gambar agar tidak berulang. Ada yang lainnya yaitu repeat-x yang berfungsi untuk mengulang gambar secara vertical dan repeat-y untuk mengulang gambar secara horizontal.

Demikian tutorial CARA GANTI BACKGROUND BLOG DENGAN GAMBAR semoga bisa berguna bagi sobat yang ingin mengganti tampilan latar belakang blognya. Salam blogger.
Share this

31 Usercomments

avatar

makasih tipsnya, tapi background pake gambar biar enteng gimana sob

avatar

mau request bikin related post-nya sob hehe..trims yah

avatar

kalo mau pake gambar pemandangan/foto full emang susah. kendalanya di loading blog.. paling kalo mau ganti yg enteng pake tile background yg diulang2..
related post yg mana sob..perasaan sama deh cuma tinggal nambahin image rss doank.

avatar

makasih sudah berkunjung..

avatar

koq cuman separuh kak backround yang muncul?

http://inginmengabdi.blogspot.com

avatar

Tergantung ukuran gambarnya kalo gak full ya munculnya separo.. bisa diakali pake repeat-x ato repeat-y

avatar

nice share gan...bahasanya mudah dipahami oleh newbie seperti saya.
Terima Kasih

avatar

bagi newbie yang masih awam tentang kode css mohon diperhatikan, bahwa kode yang diganti hanya kode yang berwarna merah saja.
Jangan mencopi semua kode yang ada pada CONTOH kode css diatas. :)

avatar

Mas bro,kalau membuat background jadi tranparent seperti di blog ini giama caranya?

avatar

Intinya sih kaya layer2 di potosop gan, background2 yang gak perlu saya delete dengan cara menghapus background:blablabla; di kode cssnya. trus sisain bagian paling dasar buat background utama.

sobat juga bisa menggantinya dengan kode background: url(http://2.bp.blogspot.com/-v3GCBXXRleQ/UMZcuAfJgEI/AAAAAAAAAeo/E-710AncumA/s1600/bg-black.png) transparent; kalo emang bener2 pengin bikin trasnparen background yang seperti ini.

avatar

makasih kawan infonya, kebetulan sy ingin membuat template tapi gak tahu cara ganti backgroundnya.^_^

avatar

Terima kasih bro. Berhasil bro...

avatar

thanks sob , patut dicoba..

avatar

Makasih tipsnya, lagi butuh2nya nih .. hehehe

avatar

udah masuk html CTRL+F tapi ga ada code yang harus diganti, gimana ya?

avatar

oh yang ini pakai url yah, kirain cuma pakai css saja. tapi nggak apalah tutorialnya sangat bagus :)

avatar

makasih sob infonya,, bermanfaat sekali...

avatar

Hopefully always succeeded for admin who always give the information and I say thank you a lot

avatar

Hopefully always succeeded for admin who always give the information and I say thank you a lot

avatar

gan pas saya ketik body, di edit HTML kok gk ada kodenya ya?

avatar

makasih nih tutorialnya bro, upload gambar di photobucket atau imageshack juga bisa kan URL nya ?

avatar

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

avatar

sudah dicoba dan suksesss... :D

Rule of comment:
1. No offense or spam.
2. Spam comments will be deleted by our review
3. No life link ok!
Thanks for visiting, please comment by using google profile, name/url, or openId. So We can visit you back, Thank's before and Happy blogging.

Popular Posts

DRAMA TERBARU

SEO MONITOR

STATISTICS

 
Support : Contact | Disclaimer | Privacy Policy
Copyright © 2013. Tutorial inBlogspot - All Rights Reserved
Creative Commons License DMCA.com
Template Created by Creating Website Modified by Inblogspot.com
Proudly powered by Blogger
Valid HTML5! Valid CSS!