February 02, 2013

Bagaimana Cara Memasukkan Dua Background Dalam Satu Blog

JHE software: Bagaimana cara memasukkan dua background dalam satu blog. Kalian pasti bingung dengan judul yang saya buat, maksudnya dalam satu blog kita bisa memasukkan 2 gambar sebagai background. Contohnya seperti blog saya ini. Kalian bisa melihat background yang berbeda antara homepage dan halaman posting.

Untuk memulai tutorial ini, sebelumnya kita harus mengetahui kode pemanggil dalam HTML yang akan kita beri background. Dalam blog ini, saya memberikan background pada area "region-inner". Artinya, background hanya muncul pada area ini.

Kode HTML pada area region inner adalah:

<div class="region-inner main-inner">


Selanjutnya kita buat kode CSS untuk memanggil gambar sebagai background.

#jhebackground {
background-attachment: fixed;
background-image: url("image url";);
background-position: center center;
background-repeat: no-repeat;
background-color:transparant;}


Kode CSS diatas kita tempatkan diatas kode HTML. Sehingga menjadi:

<style type="text/css">
#jhebackground {
background-attachment: fixed;
background-image: url("image url";);
background-position: center center;
background-repeat: no-repeat;
background-color:transparant;}
</style>
<div class="region-inner main-inner">
...
</div>


Agar background tidak rusak, kita harus memberi batasan agar backgroun home page muncul pada homepage saja dan background yang lain muncul pada halaman selain homepage.

Background yang muncul pada halaman utama (homepage) berbeda dengan halaman posting.

<b:if cond="data:blog.url == data:blog.homepageUrl">
<style type="text/css">
#jhebackground {
background-attachment: fixed;
background-image: url("image url";);
background-position: center center;
background-repeat: no-repeat;
background-color:transparant;}
</style></b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#jhebackground {
background-attachment: fixed;
background-image: url("image url2";);
background-position: center center;
background-repeat: no-repeat;
background-color:transparant;}
</style></b:if>

<div id='jhebackground'>
<div class="region-inner main-inner">
...
</div>

</div>

Demikian tutorial kali ini. terimakasih.
By: Muhammad Zainudin