Setelah membuat cukup lama, akhirnya selesai juga postingan ini. Kali ini I'am bakal ngajarin cara membuat Background yang berbeda-beda setiap halaman. Kaya blog I'am gitu... hehe....
Kalau Backgroundnya berbeda kan setiap di buka, jadi pengunjung ga bosen dengan tampilannya. Okelah, daripada penasaran, mendingan kita praktekin sekarang juga yukkk....

Memasang Backgound Utama:

Background utama yang I'am maksud di sini adalah script backgroud yang terpasang langsung di Template blog anda, alias terpasang pada struktrur htmlnya OK kita lanjutin lagi...

1. Copy kode di bawah ini, lalu edit dengan notepad atau document txt.

<br />body {background-image: url("http://ganti-dengan-alamat-gambar-kamu"); 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. Ganti http://ganti-dengan-alamat-gambar-kamu dengan url gambar yang mau dijadikan Background.

3. Kode no-repeat, bisa anda ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog anda, apakah mau di taruh di tengah, di kanan atau di kiri. kode tersebut juga bisa dihapus bila anda menggunakan gambar yang kecil, sehingga perlu pengulangan agar gambarnya menjadi penuh.

4. Kalau sudah selesai, ayo sekarang cari lagi kode seperti ini. Supaya gampang nyarinya, anda tinggal menekan CTRL+F dan cari kode body {.


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus kode tersebut, lalu gantikan dengan kode hasil editan anda tadi.

6. Kalau udah brebes, tinggal di SAVE dech...

Nah ditahap ini hasilnya udah keliatan perubahannya, sekarang kita ikutin tahap selanjutnya yuukk...!!


Memasang Background Untuk Halaman Depan:

Halaman depan adalah halaman atau tampilan utama blog anda. Di halaman ini anda menempatkan berbagai widget yang wajib ada di halaman depan, diantaranya semisal tab menu, link, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

First Steps :

1. Copy kode dibawah ini.

<br /><style type="text/css"><br />body {background-image: url("http://anti-dengan-alamat-gambar-kamu"); 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"></div><br />

2. Ganti http://ganti-dengan-alamat-gambar-kamu dengan url gambar anda.

3. Ganti kode left dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.

4. Kode no-repeat, bisa anda ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog anda, apakah mau di taruh di tengah, di kanan atau di kiri. kode tersebut juga bisa dihapus bila anda menggunakan gambar yang kecil, sehingga perlu pengulangan agar gambarnya menjadi penuh.

Second Steps :

Seperti biasa lah...

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 anda 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 deechh...

Third Steps :

Sekarang, kita akan mengatur kode css yang tadi kita pasang dengan nama CSS1pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Okeyh... kita lanjutin...

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 :


<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>


Kode CSS1 merupakan nama widget yang tadi anda buat. Kalau anda memberi nama yang lain, anda juga harus mencari nama yang tadi anda buat. Usahakan cari nama yang sesuai dengan yang tadi anda buat, jangan mecari nama yang lain. Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page. Terkadang, tiap template memiliki kode yang berbeda, supaya tidak bingung, anda tinggal tambahkan <b:if cond="data:blog.url == data:blog.homepageUrl"> dibawah kode <b:includable id='main'>. Dan tambahkan kode </b:if> dibawah kode </div>.

7. Klik save, tinggal klik view blog untuk melihat hasilnya.


Memasang Background Untuk Halaman Selanjutnya:

Halaman selanjutnya adalah halaman yang akan tampil bila kita bergerak ke halaman selanjutnya. Misalnya, dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan. Kan tadi anda udah punya kode script yang dikasih nama CSS1. Nah sekarang kita buat lagi dengan nama CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya. Sekarang lita lanjutin lagi yach...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman depan pada bagian First Steps. Untuk kali ini, anda menggunakan url gambar yang berbeda, agar saat dibuka halaman selanjutnya, akan tampil gambar yang berbeda.

2. Setelah selesai di edit, pasang ke sidebar seperti Second Steps : dan beri nama widget ini dengan nama CSS2. Atau boleh nama yang lainnya terserah anda.

3. Sekarang ikuti Third Steps :, cari nama widget CSS2, atau nama widget yang tadi anda buat. Kemudian, perhatikan kode dibawah ini :



<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>


Tambahkan kode <b:if cond='data:blog.pageType == "item"'> dibawah kode <b:includable id='main'>, dan tambahkan juga kode </b:if> dibawah kode <b:include name='quickedit'/>

4. Save dan view blog untuk melihat hasilnya.

Sekarang anda sudah mempunyai blog dengan background yang berbeda-beda. Semoga tips ini bermanfaat, dan jangan lupa komentarnya...