Halo para sobat bloger khususnya kang fatur dateng lagi nie mao bagi
bagi dengan sobat tercinta, pernah ada sobat yang meminta pada kang
fatur tolong kang katanya saya ajarin cara membuat Background
berbeda-beda seperti Backgrounnya kang fatur!!. Demi permintaan sobat
akhirnya kang fatur bikin postingin yang berjudul "Bikin background yang
berbeda untuk setiap halaman blog". 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;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}
2. Gantilah
http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.
3. Kode center
no-repeat;
(hijau) 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 {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
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("
<style type="text/css">
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">
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'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</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 ...
Memasang background untuk halaman Selanjutnya :
Halaman
selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya
) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin
membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat
udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode
tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk
memudahkan pencarian kode ini nantinya.
Namun biar lebih jelas, baiknya kang fatur uraikan sedikit di bawah ini. ok coy ...
1.
Ikuti langkah pertama seperti pada saat kita membuat backround untuk
halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya
dengan worpad atau document txt.
2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.
3.
Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit
berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik
perbedaannya.
<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>
4. Save dan view blog untuk melihat hasilnya.
Selamat mencoba semoga sukses dan bermanfaat di hati sobat
!