Membuat Background Blog Berbeda-beda

Saturday, 24 September 2011

Iya, seperti judul nya saja sudah dapat di tebak klo kita akan membuat background blog berbeda antara halaman depan(HOME)dengan halaman Posting (PAGE)., terkadang memang background sebuah blog bisa mempengaruhi betah tidaknya pengunjung untuk berlama-lama di blog kita., nah berikut ini adalah salah satu solusi agar pembaca kita tidak jenuh dengan tampilan blog kita yang itu-itu aja, baik di Halaman depan (HOME) atau di halaman Postingan (PAGE)., salah satunya adalah dengan mangganti backgroundnya..

Okelah kita langsung saja ke pokok pembahasan....

A. Memasang background utama

Biasanya background sudah terpasang dengan rapi oleh template kita..., Kodenya biasanya seperti ini Body { background : #000 url(URL image) ; dan seterusnya sampai ketemu dengan penutup secriptnya yaitu } (tutup kurung).

1. Temukan Kode Ini dulu atau klo enggak yang mirip dengan kode ini...

body {
background: url(http://img593.imageshack.us/img593/3010/desertbeach1508.jpg) no-repeat fixed center top #000000;
color: yellow;
font:12px arial;
margin: 0;
text-align: center;
}

Dimana yang berwarna merah adalah URL gambar dariblog anda..,

2. kita hanya perlu mengganti URL Gambar diatas dengan URL gambar yang anda inginkan.., dengan sedikit penambahan kode ?imgmax=100% biar gambar yang di tampilkan bisa memenuhi seluruh halaman blog (hanya untuk yang menggunakan kode no-repeat/ tanpa pengulangan, tidak berlaku untuk kode repeat dalam artian mengulang gambar).

nah hasil kodenya seperti ini :

body {
background: url(http://img593.imageshack.us/img593/3010/desertbeach1508.jpg?imgmax=100%) no-repeat fixed center top #000000;
color: yellow;
font:12px arial;
margin: 0;
text-align: center;
}

Liat yang berwarna merah itu adalah penambahan kodenya setelah URL gambar
klo sudah klik Save

Ok.. sampai disini pemasangan Bcakground utama sudah beres...,

B. Lanjut Ke pemasangan Backgrund Untuk Page (Halaman Posting)

Halaman posting adalah halaman yang akan tampil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Karena hanya membutuhkan beberapa langkah sebagai berikut :

1. Copy Script dibawah ini...

<style type="text/css">
body {
background: url(http://img856.imageshack.us/img856/3907/beachwallpaper.jpg?imgmax=100%) no-repeat fixed center top #010854;
color: yellow;
font:12px arial;
margin: 0;
text-align: center;
}
</style>

Jangan lupa untuk di edit terlebih dahulu, salah satunya adalah mengganti Url gambar diatas dengan Url gambar yang anda inginkan....

2. setelah selesai di edit, pasang ke sidebar seperti biasa (klik costomize, layout, add gadget, pilih HTML/Java script, beri nama widget kita ini dengan nana CSS1. Hal ini untuk mempermudah pencarian saat kita Edit templatenya nanti.., dan klik save).

Langkah B juga sudah beres..., minum kopi dulu ah, coz langkah selanjutnya agak sedikit memerlukan ketelitian..,

C. Langkah berikutnya adalah kita sedikit belajar mengenai logika hehehehe

logikanya adalah seperti ini, supaya Gadget yang kita beri nama CSS1 tadi tidak berjalan alias tidak muncul alias tidak nongol pada saat kita membuka halaman utama (HOME) dan akan berjalan alias muncul alias nongol pada saat kita membuka halaman posting (PAGE) entah itu klik Readmore atau Judul Postingan, terserah yang mana enaknya..,
Maka Harus kita lakukan pengeditan seperti ini...,

1. kita masuk ke Edit HTML, expand template widget dan cari script seperti ini atau klo gak ada cari yang mirip dengan kode ini, soalnya setiap template berbeda dan kita gak tau kan widget CSS1 yang kita buat tadi ID HTML nya berapa? Intinya ID widget yang Title nya adalah CSS1.

<b:widget id='HTML10' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

2. Untuk memudahkan pencarian gunakan saja Control + F trus ketik CSS1, pasti ketemu donk????? klo udah sisipikan kode berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'> dibawah <b:includable id='main'> dan </b:if> dibawah <b:include name='quickedit'/>

maka hasilnya seperti ini

<b:widget id='HTML10' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

nah yang warna merah itu adalah kode-kode yang disisipkan tadi...

Klo sudah klik Save dan anda lihat hasilnya....

Sekian dulu ya semoga bermanfaat, untuk melihat hasilnya, seperti yang ada di blog saya ini, coba anda ke halaman utama (HOME) pasti background nya berubah...oh ya bagi yang mau copas tolong sertakan Link saya sebagai sumbernya, klo enggak gwe sumpahin mandul seumuran....

Jazakumullah khairan Katsir

Labels: Blog trik

Thanks for reading Membuat Background Blog Berbeda-beda. Please share...!