Halo para sobat bloger Ine jalan-jalan eh...ketemu
blog yang sangat menarik...trus Ine copy dech
postingnya...tapi dah izin lho...hehe...kali nie mao bagi bagi dengan
sobat tercinta,lumayan dech buat tampil agak lain dari yang lain. Narsis
gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena
bisa tampil dengan background yang berbeda-beda di setiap halamannya
O.K.
O.K. Jangan banyak banyol bentar lagi hari semakin
malam, duduk udah pegal, kopi udah abis, rokok tinggal sebatang, perut
udah laper, sebaiknya kita lanjutkan aja O.K.
Persiapan :
Memasang background utama :
Background utama yang kumaksud di sini adalah script
backgroud yang terpasang langsung di Template blogmu, alias terpasang
pada struktrur htmlnya. Ok kita lanjut yach.
1. Kopi kode di bawah ini, lalu edit dengan
menggunakan worpad atau document txt.
body {background-image: url("http://alamat-gambar-sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;<br /> color:$textcolor;<br /> font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;<br /> font-size/* */:/**/small;<br /> font-size: /**/small;<br /> }<br />.2. Gantilah http://alamat-gambar-sobat yang berwarna
merah dengan url gambar sobat.
3. Kode center no-repeat; (kuning) bisa sobat ganti
dengan left atau right. Ini adalah kode yang mengatur tata letak gambar
pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.
4. Kode no-repeat; boleh sobat hapus bila akan
menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya
menjadi penuh.
5. Kalau sudah selesai ngeditnya , balik lagi ke blog
sobat. Cari kode seperti di bawah ini :
body {<br />background:$bgcolor;<br />margin:0;<br />color:$textcolor;<br />font:x-small Georgia Serif;<br />font-size/* */:/**/small;<br />font-size: /**/small;<br />text-align: center;<br />}
5. Hapus seluruh kode di atas, lalu gantikan dengan
kode hasil editan sobat tadi.
6. Jika udah beres, klik SAVE
Nah sampai pada tahap ini, sobat sudah bisa melihat
perubahan background blog sobat, klik aja View Blog.
Memasang background untuk halaman depan :
Halaman depan adalah halaman atau tampilan utama blog
sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang
wajib ada di halaman depan, diantaranya semisal tab menu, link para
sobat kita, label, buku tamu atau widget-widget lain yang kita anggap
perlu demi memudahkan pengunjug menjelajah isi blog kita.
Kerja kita kali ini agak sedikit praktis, karena css
background dipasang seperti layaknya kita menambah widget/aksesoris ke
sidebar blog.
Langkah pertama :
a. Copy script di bawah ini :
body {background-image: url("<br /><style type="text/css"><br />body {background-image: url("http://alamat-gambar sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center"><br />Visit InfoServe for <a href="http://ade-tea.blogspot.com/" target="_blank">Blog Kang Fatur</a>.</div>
b. Edit dengan menggunakan wordpad atau document.txt.
c. Ganti http://alamat-gambar-sobat (kode yang
berwarna merah ) dengan url gambar sobat
d. Ganti kode (yang berwarna biru) dengan left atau
right, kode ini merupakan kode yang mengatur letak gambar sobat itu
nantinya.
e. Kode no-repeat; bloeh sobat hapus kalo memakai
gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan
untuk bisa tampil penuh pada seluruh halaman
Langkah ke-dua :
Sekarang kita memasuki tahap kedua dimana kita akan
memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa
dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini.
yuuuu ...
Seperti biasa :
1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul,
ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang
jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang
edit html.
7. Pastekan kode hasil editan kita tadi ke ruang
conten.
8. Terus Save.
Langkah ke-tiga :
Sekarang kita masuk pada langkah ke_tiga, dimana kita
akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada
sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila
kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...
1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna
biru merupakan kode tambahan yang membuat css background hasil editan
kita tadi tampil di halaman utama atau front page.
<b:widget id="'HTML20'" locked="'false'" title="'CSS1'" type="'HTML'"><br /><b:includable id="'main'"><br /><b:if cond="data:blog.url == data:blog.homepageUrl"><br /><!-- only display title if it's non-empty --><br /><b:if cond="'data:title"><br /><h2 class="'title'"><data:title/></h2><br /></b:if><br /><div class="'widget-content'"><br /><data:content/><br /></div><br /></b:if><br /><b:include name="'quickedit'/"><br /></b:includable><br /></b:widget>
7. Klik save, lantas klik view blog untuk melihat
hasilnya.
Ok, kita sekarang sudah punya 2 buah backround
berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau
dilanjutkan ... yuuuuuk ...
OK...di tunggu commen'nya ya...
