Mengganti Background sesuka otak Lo,,

Hari ini aku pingin posting…? Posting apa ya..?
Aha,,
Aku pingin posting,
Bagaimana cara bikin background seperti background yang saya pakai ini,
Ini bikin sendiri loh, lebih tepatnya ngedit lah,,
Mungkin sudah banyak postingan cara mengganti background sesuka hati kita,
Tapi, mudah – mudahan cara yang saya pakai ini bisa lebih memudahkan untuk para kawan blogger sekalian,
Cara nya gampang gak susah ko.

Pertama – tama sebelum kalian mengutak – atik HTML, kalian lebih dulu upload gambar yang akan dijadikan background nantinya, gambar apa saja, bisa gambar muka narsis kalian juga.
Untuk upload gambar, bisa dimana aja, tapi kalo saya upload di Photobucket, tapi kalau kalian sudah punya tempat upload sendiri, ya terserah kalian sajalah upload dimana aja.

Inget “Format gambar yang akan dijadikan background harus bertipe JPG (gat au yang lain bisa apa gak), terus ukurannya juga harus diatas 900 x 900 (bisa juga dibawah itu, tapi hasilnya kurang maksimal)".

Oke sekarang langsung saja, siap kawan – kawan..

Kalau kalian sudah Log in ke Blog kalian, langsung saja menuju Layout/tataletak==>Edit HTML tapi "JANGAN CENTANG " Expand template widget oke..
Lakukan backup dengan "download lengkap template" (untuk mencegah hal – hal yang tak diinginkan).

kemudian cari kode yang mirip seperti dibawah ini :

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background : #000000
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

Perhatikan warna merah kawan....... !! lalu ganti dengan kode dibawah ini :

background-image: url (http://ALAMAT URL GAMBAR ANDA);

Tulisan Alamat URL diisi dengan gambar yang sudah kalian upload tadi,oke,,
Dan jangan lupa, tambahkan kode ini

background-attachment: fixed;

Dan letakkan tepat dibawah kode baru tsb, atau kurang lebih akan terlihat seperti ini :

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background-image: url (http://ALAMAT URL GAMBAR ANDA);
background-attachment: fixed;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

Warna Kuning bisa anda pilih dari dua pilihan :
Fixed : agar letak gambar background tetap/statis
Scroll : agar gambar background ikut bergerak/bergeser saat kita men-Scroll mouse kita.

Sudah semua nya kawan, kalau sudah, kalian save ya,
Nah gampang kan,
etz, jangan senang dulu, proses diatas belum maksimal kalau background punya kalian sebelumnya belum transparan.
nah setelah kalian selesai melakukan proses diatas,
sekarang aku ngasih trik biar background nya maksimal.
Sudah siap kawan, oke checkidot..

Kalian masih di Edit HTML kan, kalau masih sekarang centang "Expand Template Widget", kalau tadi kan enggak,,oke,

Terus, kalian cari "semua tulisan background terus hapus tulisan dibelakang :" ,contoh ;

background: #000 url(http://i270.photobucket.com/albums/jj89/kendhin/template/template2/foothead05.jpg) no-repeat;

lalu hapus warna merah,
jadinya seperti ini ;

background:;

Ngerti kan, kalau gak ngerti kebangetan,,hehe,,
eitz sebelum kalian hapus semua warna backgroundnya,
ada beberapa yang jangan dihapus, atau dibiarkan (tapi sebenarnya dihapus juga gak apa2, cuman agak rancu jadinya),

Nah yang dibiarkan seperti adanya adalah tulisan2 seperti dibawah ini ;
(Warna Merah dibawah ini tidak sama seperti yang ada diblog kalian, soalnya masing2 blog berbeda.)

#main-wrap1 {
width:482px;
float:$startSide;
background:#000 url("http://i270.photobucket.com/albums/jj89/pimpim/template/template2/mainbawah05.gif") no-repeat $startSide bottom;
margin-top:10px;
margin-$startSide: 4px;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
position: relative;
line-height:1.5em;


#main-wrap2 {
float:$startSide;
width:100%;
background:url("http://i270.photobucket.com/albums/jj89/pimpim/template/template2/mainatas05.gif") no-repeat $startSide top;
padding:10px 0 0;
}



#main {
background:url("http://i270.photobucket.com/albums/jj89/pimpim/template/template2/maintengah05.gif") repeat-y;
padding:0;
}


post h3 {
margin:0;
line-height:1.5em;
background:url("http://1313.photobucket.com/rounders/icon_arrow.gif") no-repeat 5px .5em;


a.title-link:hover {
background-color: $borderColor;
color: $mainTextColor;
}



.post-footer {
background: #000;
margin:0;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
border:1px dotted $borderColor;
border-width:1px;
font-size:100%;
line-height:1.5em;
color: #666;
}



a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://1342.photobucket.com/rounders/icon_comment.gif") no-repeat $startSide 45%;
padding-$startSide:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://4343.photobucket.com/rounders/icon_comment.gif") no-repeat $startSide 45%;



.comment-author {
background:url("http://9990.photobucket.com/rounders/icon_comment.gif") no-repeat 2px .3em;



.profile-link {
background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat $startSide .1em;
padding-$startSide:15px;
font-weight:bold;
}


.sidebar h2 {
text-align:center;
margin:0;
height:20px;
padding:3px 0 .2em 0px;
line-height:1.5em;
font:$headerFont;
background: url(http://i270.photobucket.com/albums/jj89/pimpim/template/template2/sidetitle05.jpg) no-repeat $startSide top;
color: #fff;
}



.sidebar ul li {
background:url("http://4445.photobucket.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:3px;
padding-$startSide:16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height: 1.2em;



Nah sudah selesai sekarang,
kalo sudah semua , kalian tinggal Save, dan lihat hasilnya.
Kalau semua instruksi yang aku kasih tadi dilakukan dengan benar,
aku yakin, background yang kalian inginkan pasti jadi.
oh iya , ada tambahan, kalau kalian ingin bermain - main atau mengedit warna tulisan agar sesuai dengan backgroun, caranya ..gampang,
pasti kawan semua sudah tahu kan,
kalau belum, caranya ; "masuk ke tata letak terus pilih font dan warna". oke kawan

Berhubung matahari sudah nongol, terus mata belum merem,
Aku sudahi dulu ya,
Ucapan Terimakasih yang sebesar - besarnya aku ucapkan
sama Bang Andreas , karena dia aku bisa berbagi, dan Blog aku juga bisa seperti yang aku inginkan.

See yu next time,,