MEMASANG BACKGROUND Header,footer dan Column

TEMPLETE STANDARD:
Address Url disertai code sintak tanda Petik pembuka dan penutup dan variabel-image.

/* Header  : Kolom Judul Blog dan Descripsi Blog
----------------------------------------------------------------------- */
KODE XML:
.header-outer {
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96_Oq63WYtll-oQIORK3tjDNOZxEn1dbBnpfJjq61FwivCSnnYtD4DFGCnk_ktqIMBYit3k23FcDxcpdBr01N7h535Qv5r-Nh6z7YW5g2e0YzetLBibZISCUWD_KvXRrIoeBojXj9uCM/s1600/headprast.jpg'); background-repeat: no-repeat; background-position:center top;
   }


/* Columns  : Kolom Kiri /Tengah/ Maupun Kanan Main Column
----------------------------------------------------------------------- */
Kolom Utama :
KODE XML:
.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtcbNyyKfkA-IaBQhQz47bXOL1ySjy0nHS2-ivhYi3F2wJaZeE8sw32vSx4dgh57s0u0Sj9ILNJoSuhpCBDZ6sxwft9-ePSleJUR1aw9JmLaz8Pi3P5Kh7xjKaKmiAPJ2n_yMdTS551M/s1600/Widgetright.jpg');
}
Kolom kanani : biasanya Sebagai halaman Widget ataupun Halaman Posting
KODE XML:
.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 2px solid $(body.rule.color);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtcbNyyKfkA-IaBQhQz47bXOL1ySjy0nHS2-ivhYi3F2wJaZeE8sw32vSx4dgh57s0u0Sj9ILNJoSuhpCBDZ6sxwft9-ePSleJUR1aw9JmLaz8Pi3P5Kh7xjKaKmiAPJ2n_yMdTS551M/s1600/Widgetright.jpg');
}
/* Accents
---------------------------------------------------------------------- */
KODE XML:
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga5jLecRZYcxGQ2Jp9YrRdjKp3MyjL8L_PK9dIx7qGMHlZYX0LGxTLn4lDWqAp8ZF_v3PUUtpznybNX93yWK-mc3H-vOn26mvuTckwt_S37lNxaoXl03hNqx3CcQRlj8ZMXcNrEh1r_9o/s1600/footerprast.jpg'); background-repeat:no-repeat;
}
TEMPLETE LOAD:Address Url disertai  Tanpa code sintak tanda Petik .


Conten Inner adalah kotak keseluruhan Kolom blog Main
.content-inner {
background-color: #080302;
background: url(http://fhg.sunnyleone.com/fhg/73/13.jpg)
}

Header Outer adalah kotak header yg berisi judul blog/deskripsi dll:
.header-outer {
background: url( http://1.bloger.com/preCIA44_files/imgQ99F4.gif); none repeat-x scroll 0 -400px;
_background-image:none;
}
Footer outer adalah kotak kaki halaman blog
.footer-outer {
border-top: 0 dashed #bbbbbb; background: url( http://1.bloger.com/preCIA44_files/imgQ99F4.gif); none repeat-y scroll 0 -400px;
Main Outer adalah kotak posting, sekaligus kotak komentar,judul posting dan nama posting
.main-outer {
border-top: 2 solid #462946;
background: url(http://fhg.sunnyleone.com/fhg/96/05.jpg)
}
SAMPLE:

POSISI BACK GROUND DAN REPEAT
background repeat secara vertikal,
repeat kesamping:

background-image:url('paper.gif');
background-repeat:repeat-x;

repeat kebawah:

background-image:url('smiley.gif');
background-repeat:repeat-y;

gambar posisi tetap tanpa di repeat: kode = background-repeat:no-repeat;

background-image:url('smiley.gif');
background-repeat:no-repeat;

kode lain untuk repeat back ground:

margin: adalah untuk menentukkan nilai jarak obyek ( background) dari tepi, tepi kanan,kiri, bawah maupun atas.

margin:10px 5px 15px 20px;
posisi dari tepi atas (jarak 10px)
posisi dari tepi kanan (jarak 5px)
posisi dari tepi bawah (jarak 15px)
posisi dari tepi kiri (jarak 20px)

margin:10px 5px 15px;
posisi dari tepi atas 10px
posisi dari tepi kanan dan kiri 5px
posisi dari tepi bawah 15px

margin:10px 5px;
posisi dari tepi atas dan tepi bawah 10px
posisi dari tepi kanan dan kiri 5px

margin:10px;
posisi dari tepi atas, bawah, kanan dan kiri jaraknya sama = 10px

padding : hampir sama dengan margin, padding untuk menentukan jarak tulisan atau gambar yang berada di dalam obyek ( background)

kode padding:
padding:10px 5px 15px 20px;

bentuk kotak teks:
scrol = menggunakan tab scroll di samping dan bawah

menggunakan bar scroll di samping dan di bawah : kode = overflow:scroll;

tanpa scroll : kode = overflow:hidden;

hanya scroll menggunakan bar scroll disamping: overflow: auto;

Posisi teks dalam post,kotak, maupun background:
text-align:center; tulisan berada ditengah.
text-align:justify;
text-justify:inter-word;

Posisi Background:

index=letak elemen lapisan bgn
Misal akan menampilkan 4 gambar dalam satu box/kotak.
contoh= gambar terletak pada lapis pertama dari 4 lapis

position:absolute;
background-color:red;
z-index:auto;

lapis berikut dari pertama:
 z-index:1;
kemudian lapisan berikutnya lagi diberi kode index 2,3, 4 dst
z-index:2;
z-index:3;
z-index:4; 

Posisi background,gambar, teks,atau elemen

position:absolute; mengikuti halaman saat di scroll.
left:0px;
top:0px;

position:fixed; Gambar tetap dan tidak bergerak saat di scroll, elemen tampil di muka.

kode lain untuk posisi:

background-position:center; letak berada di titik pusat/tengah area
background-position:50% 50%; membagi jarak tepi masing-masing 50%.
background-position:center top; letak di tengah tepi atas
background-position:left center; letak ditengah tepi sebelah kiri
background-position:left top; letak sebelah kiri atas

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMcwyvnwDf-zYkLYcy8fXIWeRv_SlQACn3XVYYhVBK1jCRQ7scSIkU3nR6CaKwSKAiKxu_WFr68PM18bP-wx_9i2oAMu3Yyhv55DHNT9AJIlkHMG9HzUx7RhlnwoqMZSst9fG19MfxaIgF/s1600/titleptn.png);

Membuat border Radius (garis tepi dan sudut bulatan pada gambar/element/box , background).

border:1px solid #999999; garis tepi memiliki ketebalan 1px;
border-top-left-radius:1em; membentuk sudut bulatan pada sudut kiri atas.
border-top-right-radius:1em; membentuk sudut bulatan pada sudut kanan atas.

border-bottom-left-radius:1em; membentuk sudut bulatan pada sudut kiri bawah.
border-bottom-right-radius:1em; membentuk sudut bulatan pada sudut kanan bawah

membuat sudut bulatan pada seluruh sudut:
kode :{
border: 2px solid #00ff00; border-radius: 13px; -mozborder-top-left-radius: 13px;-mozborder-top-right-radius: 13px;}