Kamis, Agustus 06, 2009

Mengubah gambar background blog dengan gambar sendiri

Buat teman-teman yang masih pemula, mungkin ada yang belum tahu cara mengganti background blog. Sebenarnya anda bisa mengubah background blog dengan menambah sedikit script CSS ke template blog.

Sebagai Catatan:
Saya menguji coba template ini pada template bawaan blogger yaitu: "Denim"
Mungkin jika menggunakan template lain tidak berfungsi optimal, karena setiap template mempunyai struktur dan syntax script yang berbeda.

Jika tertarik mengganti background blog dengan gambar sendiri , bisa ikuti prosedur berikut:
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 yang saya punya 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 {
background: $bgColor;

5. Masukkan kode berikut di bawahnya:

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

Hasilnya seperti di bawah ini

body {
background: $bgColor;
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:
http://i725.photobucket.com/albums/ww252/papao74/bg_blogku.gif

6. Simpan template

Update 2 januari 2010

Sejak 29 Desember, saya mengganti template menggunakan template denim + sun of moto (masih template bawaan /standar blogger), seperti yang saya gunakan di blog ini, jika ingin mencobanya bisa lakukan modifikasi script pada template anda:

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;

Contoh blog yang menggunakan template blogger designer yang telah diganti backgroundnya bisa dilihat disini Background Blog




Update:
Jika menggunakan template baru blogger (template blogger designer tidak perlu lagi mengubah script templatenya cukup upload gambar yang akan dijadikan background blog, selengkapnya bisa dilihat disini mengganti gambar backgound blogspot dengan gambar sendiri

Beberapa panduan menggunakan blogger bisa dilihat disini cara membuat blog





Artikel Terkait :



30 komentar:

Gue Banget! mengatakan...

thx bgt!

Uchiha7Sasuke mengatakan...

saia masi ga ngerti ..
coba deh liad hendyrull.blogspot.com

Artikel Komputerku mengatakan...

Karena template yang anda gunakan adalah template type minima, maka background postingan dan sidebar transparan, jadi perlu sedikit penambahan script di template anda,
Coba cari kode berikut:
#outer-wrapper {

Ubah mejadi seperti berikut:
#outer-wrapper {
background:#000000;

hasilnya bisa dilihat seperti di blog berikut ini
dummy-ku.blogspot.com

Ada beberapa permasalahan yang sering timbul, terkadang gambar background tdk muncul karena photo bandwith exceeded (pemakaian bandwith melebihi quota), untuk menhindari ini anda bisa upload gambar di tinypic, atau bisa gunakan kode gambar yang sudah saya upload di tinypic

Cari kode berikut
background: #642D8B url('http://i373.photobucket.com/albums/oo176/Akasuna-S/Sasuke/Sasuke06-1.jpg')fixed repeat top left;

url gambarnya diganti dengan http://i36.tinypic.com/n1bdcz.jpg, selengkapnya seperti berikut:

background: #642D8B url('http://i36.tinypic.com/n1bdcz.jpg')fixed repeat top left;

Ipankmilanisty mengatakan...

klw posting blog jd transparan gmn ?
biar begron na keliat'n . .
mksh

Artikel Komputerku mengatakan...

untuk membuat backgroundnya jadi transparan, ada beberapa cara, (saya anggap anda menggunakan template minima)

1. cara 1: menggunakan scirpt opacity
Cari kode yang mirip seperti:

body {
background:$bgcolor;
background: #642D8B url('http://i36.tinypic.com/n1bdcz.jpg')fixed repeat top left;

ubah menjadi
body {
background:$bgcolor;
background: #642D8B url('http://i36.tinypic.com/n1bdcz.jpg')fixed repeat top left;
opacity: 0.80;

angka 0.8 bisa diubah sesuai kebutuhan.

2. cara kedua
cari dan hapus kode

background:#000000;

yang ada di dalam lingkup
#outer-wrapper {
.......
}
dan
#sidebar-wrapper {
......
}

SATRIADI mengatakan...

bos,sudah di cba cman msih bingung mklm pemula heee >>tapi ada kslhn swktu infut variable skin hrus ditntkan clornya,thank postingan anda sgt bergna, salam knal

jeleex mengatakan...

thanks bgt pak tutorialnya..
mantav dan maknyuss
akhirnya saya berhasil jg ikutin tutorialnya..
lam kenal dari anak baru.. hehehe
_jeleex_

---myLord--- mengatakan...

temen2,
check this out!
darzzz96.blogspot.com
thx.
if you like my blog,please be follower..
thx.GBU

Heri mengatakan...

Tq..bermanfaat sekali tulisan2nya...

puTry principessa mengatakan...

hayy slm knal
ohya aku mau tnya, bwat topik "merubah background dngn gambar sendiri"
koq blog sya tidak bisa ya???
karna kode
body {
background; $bgColor itu tidk d tmukan...

trima ksih
tolong krim k e-mail sya ya???
putriprihartini@yahoo.co.id

AcerNoval mengatakan...

nice post

BIK Pemula mengatakan...

Trims artikelnya

free Download mengatakan...

Wae langsung jadi mas.. thanks yow... tutorial manstab

LutFiiy Lavhalitya mengatakan...

thx berat :)

Rama mengatakan...

Kk Mcm Mna Si Cara Mengganti Template di blog
susah bingung nih..???

habibie mengatakan...

makasih dah ngasih caranya.,..,

nabilchipmunks mengatakan...

hii susah banget si ga ngerti ngerti bener ...
jadi nya background q simpwl liatdeh http://nabil-chipmunks.blogspot.com/
kolo bisa follow juga heheh
hemm gimana sih susah amat .....

ronald mengatakan...

kk kok gg ketemu kode ini body {
background: $bgColor;
trus gmna cara yang lain

FIKRY FATURROCHMAN mengatakan...

http://www.fikrymoslem.blogspot.com

Anonim mengatakan...

http://weirdboard.blogspot.com

blog siswa smk al-ma'rifah mengatakan...

bos mau tanya ni gmana mengganti backgrnd blog dgn foto fb, kira2 bisa gak .......
terima kasih

anita j-pop mengatakan...

punya saya kok ga ada save tamplete-nya

magazineticker mengatakan...

thnks gan atas infonya,,,

lika_be_sad mengatakan...

itu tipe log yang dulu yang sekarang udah susah

sya selalu mncoba tpi tdak bsa :(

luka bakar mengatakan...

makasih mantap infonya

TOETNICK mengatakan...

INFO yang bagus buat pemula seperti saya -̶̶•-̶̶•̸Ϟ•̸Ťђαηĸ Ɣõú•̸Ϟ•̸-̶̶•-̶̶ ya.....

Nevilla prawardhani mengatakan...

terima kasih mmas artikel nya sangat membantu.

abdulbasit119 mengatakan...

om kalo templet yg ada bacaan warna tidak berlaku di templet ini,bisa ga dirubah?.tks

Uem Cuters mengatakan...

Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

dilla itue dayla mengatakan...

gak ada pilihan gitu
help me