Saturday, 24 September 2011

Membuat Background Blog Berbeda-beda


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

Mungkin anda juga menyukai artikel di bawah ini

12 Komentar:

BROTHER_RICKY_XP said...

nice share,...oia bro di blog gw,pas halaman posting gw coba utak atik script diatas tetep tidak berjalan dengan apa yg gw harap...,maksud gw jadi di halaman posting itu polos hitam backgroundnya semua tanpa ada warna biru disampingnya...,mohon bantuannya bro supaya hitam semua di halaman posting ???
oia bro satu lagi terus di home blogs gw pas artikel posting kok gak menurun semua tuh artikel malah ada yang kesamping,..gw pengen tampilannya seperti di home blog lo ini tampilan artikel di homenya menurun, tidak seperti di blog gw acak acakan !!! mohon bantuannya bro maklum gw masih newbie dengan blogs...,thanks

Syaiful Anwar said...

oh warna biru di samping itu karena kode warna nya gak ente ganti ya? itu kan kode #010854 adalah warna biru, ganti dengan #000 untuk warna hitam, warna biru muncul karena background image anda tidak memenuhi seluruh halaman blog, jadi yang tidak ketutup akan berwarna biru,

Trus klo untuk halaman depan, ente menggunakan auto readmore yang 2 kolom, jadi saran saya sebelum terlambat,,,hehehehe, ganti template anda dengan template yang 2 kolom, trus pasang auto readmore yang versi 2.0..,

terima kasih pertanyaannya, semoga jawaban ane bisa membantu

savia collection/ani said...

terima kasih nih infonya,blognya bagus.

Kang Hilman said...

bagus sob tutorialnya
ane salut :D

kunjung balik ya sob :D
salam blogger sejati, sob :D

Syaiful Anwar said...

ok gan thank's ya

Suwardi Unggit said...

Tutorialnya menarik kawan, bisa di coba nich...

Syaiful Anwar said...

Silahkan di coba gan, klo ada masalah hubungi ane...capa tau bisa bantu

salam blogger

Admin said...

Sama Donk Sama Template Blog Sya..kunjung Bali Ya sob
http://bercara.blogspot.com/

90animax said...

di coba dlu

Syaiful Anwar said...

Silahkan gan, semoga berhasil

@dwindatanaya said...

wah saya gaptek ni. malah jadi putih semua :v

Syaiful Anwar said...

mingkin ada kesalahan di script nya gan, silahkan di coba ulang, jangan sampe ada yang ketinggalan mrngcopynya

Terima kasih telah berkunjung, Pembaca yang baik adalah yang bersedia meluangkan waktunya untuk meninggalkan komentar