Ramlan tips : tips blog, mengganti warna bakground blog dengan gambar
A
lasan menggunakan gambar sebagai warna "latar belakang/background" blog biasanya untuk memunculkan warna dan corak yang tidak ada bila menggunakan kode warna . selain itu untuk menghasilkan efek yang anggun yang tidak bisa bila hanya menggunakan kode warna.
namun ada kalanya gambar2 yang digunakan merusak kinerja blog kita. bayangi aja berat blog kita dengan script dan widget nya aja sudah ratusan KB. gimana jadinya bila gambar "latar belakang/background" yg kita pilih itu ukuran nya 1000-an px? sudah pasti berat blog kita jadi berlipat ganda.
ada beberapa tips dalam penggunaan gambar sebagai "latar belakang/background"
namun ada kalanya gambar2 yang digunakan merusak kinerja blog kita. bayangi aja berat blog kita dengan script dan widget nya aja sudah ratusan KB. gimana jadinya bila gambar "latar belakang/background" yg kita pilih itu ukuran nya 1000-an px? sudah pasti berat blog kita jadi berlipat ganda.
ada beberapa tips dalam penggunaan gambar sebagai "latar belakang/background"
dengan ukuran gambar yg bisa di minimalisir namun efeknya memuaskan.
caranya menggunakan gambar yg seminim mungkin namun memaksimalkannya dengan tambahan CSS . contoh, lihat saja background blog yang satu INI . background gambar body yg dipilih hanya 1 PX ukurannya, namun efeknya sudah sangat bagus.
jadi intinya ukuran gambar di perkecil namun kerja CSS di maksimalkan..yakni menggunakan attribut pengulangan/repeat
contoh gambar untuk blog contoh tadi :
ukurannya sangat kecil bukan? namun lihat hasinya setelah di tambahkan beberapa kode CSS ,
body {
background:#000 ;
background-image: url(http://cdn-www.pornhub.com/images/bg.png);
background-repeat: repeat-x;
background-position: top center;
}
hasilnya gambar akan mengulang seperti ini (memenuhi ruang) :
catatan: repeat-x artinya mengulang kesamping
repeat-y mengulang kebawah.
gak perlu bingung memilih gambar yang mau diolah, gambar bisa di cari di google image, maupun situs yang gambar backgroundnya sesuai.
untuk lebih lengkapnya tentang pemuatan gambar sebagai background blog bisa view source code blog ini, caranya klik kanan pada mouse di blog ini (pc).
nanti semua kode blog ini bakal terlihat, lalu cari element2 berikut :
1.body
2.#sidebar.
3.#main.
4.#outter
5.post.
6.#top
masing2 element dari blog ini tadi menggunakan gambar sebagai background..namun ukurannya sangat kecil...hanya menambahkan pengulangan, bisa kamu pelajari disana.
buat yang tidak mengerti penjelasan dalam tulisan ini bisa contak aku, pasti di jawab
caranya menggunakan gambar yg seminim mungkin namun memaksimalkannya dengan tambahan CSS . contoh, lihat saja background blog yang satu INI . background gambar body yg dipilih hanya 1 PX ukurannya, namun efeknya sudah sangat bagus.
jadi intinya ukuran gambar di perkecil namun kerja CSS di maksimalkan..yakni menggunakan attribut pengulangan/repeat
contoh gambar untuk blog contoh tadi :
ukurannya sangat kecil bukan? namun lihat hasinya setelah di tambahkan beberapa kode CSS ,
body {
background:#000 ;
background-image: url(http://cdn-www.pornhub.com/images/bg.png);
background-repeat: repeat-x;
background-position: top center;
}
hasilnya gambar akan mengulang seperti ini (memenuhi ruang) :
catatan: repeat-x artinya mengulang kesamping
repeat-y mengulang kebawah.
gak perlu bingung memilih gambar yang mau diolah, gambar bisa di cari di google image, maupun situs yang gambar backgroundnya sesuai.
untuk lebih lengkapnya tentang pemuatan gambar sebagai background blog bisa view source code blog ini, caranya klik kanan pada mouse di blog ini (pc).
nanti semua kode blog ini bakal terlihat, lalu cari element2 berikut :
1.body
2.#sidebar.
3.#main.
4.#outter
5.post.
6.#top
masing2 element dari blog ini tadi menggunakan gambar sebagai background..namun ukurannya sangat kecil...hanya menambahkan pengulangan, bisa kamu pelajari disana.
buat yang tidak mengerti penjelasan dalam tulisan ini bisa contak aku, pasti di jawab
0 komentar:
Posting Komentar