CARA CARA MENGGANTI BACKGROUND BLOG DENGAN GAMBAR

CARA CARA MENGGANTI BACKGROUND BLOG DENGAN GAMBAR


Cara mengganti Background Blog Dengan Gambar

1. Silahkan masuk ke dashbord blogspot
2. Pilih menu template >> sesuaikan >> latar belakang
3. Klik pada bagian Gambar latar lalu akan muncul kotak pop up dan silahkan pilih gambar atau desain yang anda senangi

Anda juga bisa mengunggah gambar yang tersimpan di komputer atau laptop anda >> unggah gambar >> pilih file >> open >> jika sudah silahkan klik tombol selesai

Anda dapat mengunggah file JPG, GIF dan PNG berukuran hingga 300k. Untuk latar belakang penuh , gunakan gambar 1800 X 1600 atau lebih besar

Usahakan ukuran gambar tidak terlalu besar, usahakan di bawah 50kb, agar tidak membuat loading berat dan lama

Gambar tersebut dapat diatur agar ketika di scroll ke bawah, gambar menjadi tetap dan tidak berubah. syaratnya ukuran gambar harus memiliki panjang vertikal minimal 860px. contoh: 1220 x 880, 500 x 880, 1400 x 880

Silahkan gunakan fungsi
Gulir dengan laman
Perataan
Deretkan

Untuk mendapatkan pengaturan posisi gambar yang maksimal untuk kenyamanan tampilan blog. perhatikan pada pratinjau, jika tampilan blog sudah cocok dan menarik, klik tombol terapkan ke blog


Cara lain mengganti Background Blog 

1. Anda harus mengupload gambar yang akan digunakan menjadi background blog, bisa upload di situs hosting file image gratis seperti photobucket. Jika belum punya account disana bisa mendaftar di photobucket.com atau tinypic

Setelah mengupload gambar anda akan mendapakan url gambar tersebut.

(Catatan: gambar yang diupload sebaiknya ukuran filenya kecil, usahakan tidak melebihi dari 10 kbyte) agar saat membuka blog dapat cepat loadingnya, saya sarankan anda upload gambar ke tinypic)

2. Atau jika ingin mencoba gambar background, anda bisa pakai url berikut:

http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif

http://i37.tinypic.com/apb69k.jpg

http://i36.tinypic.com/n1bdcz.jpg

(pilih salahsatu untuk ujicoba)

3. Selanjutnya masuk ke account blogger:

Pilih dasboard -> Rancangan -> Edit Html

4. cari kode berikut:

body {

font: $(body.font);
color: $(body.text.color);
background: $(body.background);


5. Masukkan kode berikut di bawahnya:

background: #642D8B url('url gambar anda' ) fixed repeat top left;

Hasilnya seperti di bawah ini


body {

font: $(body.font);
color: $(body.text.color);
background: $(body.background);


background: #642D8B url('url gambar anda') fixed repeat top left;

6. Agar background di samping header berubah, maka anda harus mengubah kode berikut:

#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;

Ubah menjadi:

#header-wrapper {
margin:0;
padding: 0;
background: #642D8B url('url gambar anda') fixed repeat top left;
background-color: $headerCornersColor;
text-align: $startSide;

catatan;
url gambar anda diganti dengan url gambar yang telah anda upload, atau diganti dengan url gambar yang saya pakai lihat no 2


Tambahan :
Jika anda menggunakan template denim + sun of moto (masih template bawaan /standar blogger) dan ingin mencoba mengganti background  dengan foto anda sendiri,  bisa lakukan modifikasi script pada template anda seperti dibawah ini:

a. Script untuk mengganti gambar background body

body {
background: $bgColor;
background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg') top center repeat-y;
margin: 0;
padding: 0px;

b. Script untuk mengganti gambar background header

#header-wrapper {
margin:0;
padding: 0;
background: #692 url('http://i48.tinypic.com/2ccrmgi.jpg')


c. Script untuk mengubah lebar content (menjadi 900 pixel)

#content-wrapper {
width: 900px;

d. Script untuk mengubah lebar main (postingan)

#main-wrapper {
margin-$startSide: 14px;
width: 500px;

e. Script untuk mengubah lebar sidebar

#sidebar-wrapper {
margin-$endSide: 10px;
width: 360px;


Selamat Mencoba teman. Semoga bermanfaat.