Bermain-main dengan background ( 1 )

Begini deh jadinya kalo lagi jahil, seneng gonta-ganti background, dari utak-atik langsung ke kode-kode html di ruang edit HTML sampe berburu backgroud gratis dengan bantuan si google. Alkisah .... pada suatu hari, aku nongkrong di thecutestblogontheblock.com . Wuihhh ... seneng baget. Ada banyak pilihan Background yang bisa kita pakai. Tinggal pilih sesukamu. Nah, sekarang youk kita iseng-iseng sebentar.

Sebelumnya backup dulu tamplatemu, biar aman kalo terjadi hal-hal yang tak kita inginkan. Malah lebih baik buat blog baru aja. Pake template minima kalasik ya, biar efeknya terasa lebih nyata (ceaellah ...). Namanya juga iseng ... ok coy !!!

• Meluncurlah ke http://www.thecutestblogontheblock.com/

• Klik Backgrounds

• Cari gambar yg sobat sukai dengan memilih salah satu kategori yg disediakan
• 

• Pilih image atau gambar yg kamu sukai dgn mengklik gambar pilihanmu

• Copy barisan kode yang berada di bawah tulisan It's that easy!

Sekarang youk kita coba menerapkannya ke blog :

• Login ke Blogspot
• Klik Customize
• Klik Add a Gadget
• Klik HTML/JavaScript
• Paste-kan hasil copy-an tadi ke ruang Content
• Klik Save
• Klik juga Save di ruang edit Layouynya

Nah, lihat hasilnya. Kalo belum berhasil klik sekali lagi Customize, lalu klik View blog ....

Selamat mencoba sobat.


NB : (Nasi Bungkus)

Kode css-nya bisa kita utak atik lagi lho. Tapi ngga gwa anjurkan untuk diterapkan di blogmu, takut dituduh mengajak blogger untuk MELANGGAR HAK CIPTA. Berabe khan ......

Youk .... utak atik ...

Perhatikan barisan kode berikut :

<style type="text/css">
body {background-image: url("http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/RedHotByNaturecopy.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;">
<a href="http://www.thecutestblogontheblock.com" target="_blank">
<img src="http://www.thecutestblogontheblock.com/images/tag.jpg" border="0"/>
</a></div>

Kalo pengen mengganti imagenya dengan image lain, tinggal sobat ganti kode berikui ini dengan (di antara dua tand petik) alamat URL gambarmu :

body {background-image: url("http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/RedHotByNaturecopy.jpg");

Bannernya, bisa kamu ganti lho, hapir sama caranya. Perhatikoan kode berikut :

</style>
<div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;">
<a href="http://www.thecutestblogontheblock.com" target="_blank">
<img src="http://www.thecutestblogontheblock.com/images/tag.jpg" border="0"/>

alamat URL pertama, ganti dengan alamat URL Blogmu. Alamat URL yang ke-dua, ganti dengan alamat URL Bannermu.

Tapi jika sobat ingin menghapus bannernya, hapus saja kode di bawah ini :

</style>
<div id="tag" style="position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;">
<a href="http://www.thecutestblogontheblock.com" target="_blank">
<img src="http://www.thecutestblogontheblock.com/images/tag.jpg" border="0"/>

Ok .... selamat berexperiment Blogger ...