Dikarenakan saya banyak ngotak-ngatik di bagian CSS nya terutama di
bagian backgroundnya maka terpikirkan oleh saya untuk share sedikit ilmu
mengenai bagaimana cara mengganti background blog. Background yang
dimaksudkan disini bisa berupa gambar ataupun latar bertajuk warna.
Tutorial untuk mengganti background ini saya khususkan untuk pengguna
blogspot atau blogger. Untuk pengguna wordpress pun juga bisa, tapi
tidak semua template. Itu karena ada beberapa template yang memiliki
penamaan berbeda pada bagian style.css nya. Oke kita kembali ke topik
pembahasan, sekarang bagaimana caranya ? perhatikan langkah-langkah di
bawah ini :
- Seperti biasa, anda harus menuju dasboard blogger anda.
- Saya sarankan untuk melakukan backup terhadap template anda, takutnya nanti dalam proses terjadi kesalahan yang tidak diinginkan.
- Setelah itu silahkan ke menu TEMPLATE, pilih EDIT HTML, dan jangan lupa centang tulisan EXPAND TEMPLATE WIDGET.
- Cari kode .body atau kadang-kadang ada template yang menggunakan #body atau jika masih tidak ketemu juga cari kata body tanpa titik dan tanpa tanda pagar.
- Nantinya akan muncul kode seperti ini :
body{background:#333333;
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
}
- Anda lihat pada kode di atas, ada kode background:#333333; itu artinya background blog saya saat ini berwarna abu-abu gelap. karena #3333333 adalah kode warna untuk warna abu-abu.
- Kode tersebut bisa anda ganti sesuai keinginan anda. Untuk kumpulan kode warna anda bisa lihat di Kode HTMLWarna
Lalu bagaimana jika ingin mengganti background blog dengan gambar ?
caranya masih sama. Hanya saja diberikan beberapa tambahan. Contohnya
seperti di bawah :
body{background:url (link gambar);
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
}
- Bagian di dalam kurung yang bertuliskan LINK GAMBAR itu isikan dengan link dari gambar yang ingin dijadikan background. Anda juga dapat menmbahkan kode repeat-x top left fixed; setelah tanda tutup kurung. Gunanya adalah untuk membuat gambar anda menjadi tetap dan tidak tergeser ketika anda melakukan scroll pada mouse. Contohnya seperti ini :
body{background:url (link gambar)repeat-x top left fixed;
margin:0 auto 10px auto; font:normal 12px "Verdana", sans-serif; color:#555555; }
Selain itu anda juga bisa menggunakan keduanya. Bisa memasukan warna
pada background dan juga gambar. Dalam hal ini tetap background gambar
yang akan muncul, tapi gunanya menyertakan warna juga disitu adalah
untuk mencegah apabila link gambar yang anda sertakan suatu saat tidak
bisa dibuka. Jadi warna tersebut yang akan muncul menjadi background
anda. Kode nya seperti ini :
body{background: #333333 url (link gambar);
margin:0 auto 10px auto;
font:normal 12px "Verdana", sans-serif;
color:#555555;
}
- Setelah anda melakukan modifikasi terhadap kode-kode di atas. SIMPAN template anda dan lihat tampilan blog anda sekarang.
Keren,,,
ReplyDelete