CSS Background, Cara Memodifikasi Latar Belakang Blog
Ini adalah penerapan CSS dasar untuk properti background
. Saya harap kalian bisa cepat mengerti. Sebagai bahan praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin seperti ini:
Dalam tampilan tersebut tampak sebuah blog dengan latar belakang hijau. Untuk mengganti warna latar belakang, terkadang sebuah template sudah dilengkapi dengan variabel-variabel yang nantinya akan ditampilkan dalam halaman Perancang Template. Dari tempat itu kamu bisa dengan mudah menentukan warna latar belakang hanya dengan sekali klik:
<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">
Tapi bagaimana jika templatemu ternyata tidak memiliki variabel tersebut? Satu-satunya jalan hanyalah dengan mengubah background secara manual, yaitu melalui halaman Edit HTML.
Untuk mengganti warna latar belakang melalui halaman Edit HTML, carilah sebuah grup kode yang tampak kurang lebih seperti ini:
body {
margin:0;
padding:0;
border:0;
text-align:center;
color:$mainTextColor;
background:#692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size:small;
}
Tidak usah pedulikan kode apa saja yang ada di dalamnya, cukup fokus pada selektor body {}
dan properti background
.
Coba perhatikan kode ini:
#692
adalah warna background (aslinya#669922
tapi kode warnanya diringkas menjadi tiga digit angka).url(http://www.blogblog.com/moto_son/outerwrap.gif)
adalah background image berupa potongan gambar yang jika ditampilkan akan terlihat seperti ini (klik!)
Untuk menampilkan sebuah background image, caranya cukup dengan mengakses URL gambar tersebut.top center
adalah posisi background. Dalam posisi horizontal (sumbu-X), background image tersebut ditempatkan rata atas atau top, sementara dalam posisi vertikal (sumbu-Y), background image tersebut ditempatkan rata tengah.repeat-y
menunjukkan bahwa background tersebut akan diduplikasi secara vertikal mengikuti sumbu-Y. Cara ini digunakan untuk mengurangi besar gambar yang umumnya diterapkan dalam background image berupa gradient atau pattern.
Oke, sekarang kita mulai prakteknya. Kita tahu bahwa kode #692
merupakan warna hijau dalam blog kita. Jika kita ganti kode warna tersebut dengan #882222
misalnya, maka hasilnya akan menjadi seperti ini:
Sekarang kita coba untuk mengganti background imagenya. Ganti URL gambarnya dengan URL ini: http://2.bp.blogspot.com/-l0z0zMqI2_E/TgvtSDKcsoI/AAAAAAAAAVQ/YzrI83Qjcio/s1600/arsip.jpg lalu ganti kode repeat-y
dengan repeat
saja, sehingga background image akan diduplikasikan ke sumbu-X dan sumbu-Y seperti ini:
Itu adalah sedikit cara untuk mengganti background image secara manual. Dan ingat, background image tersebut secara langsung diterapkan dalam latar belakang blog karena yang tadi kita utak-atik adalah format-format model yang berada di dalam selektor body {}
. Jika kalian menerapkan praktek ini dalam selektor #outer-wrapper {}
misalnya, maka kamu akan mendapatkan hasil seperti ini:
Saya mulai menulis tutorial CSS ini karena hari ini Saya mendapati seorang pembaca yang mengira bahwa template Saya ini adalah template hasil unduhan atau membeli dari sebuah situs. Padahal Saya mendesain template ini dengan memanfaatkan kerangka dari template Rounders bawaan dari Blogger.
Jika dilihat-lihat, memang masih tampak mirip kan?
16 Komentar
Unknown
Mantab mas, kreatif banget. Sampai2 pengunjung mengira templatenya hasil download. Ilmu baru ni..
Angga Judistia Pradana
Mantap kawan
Sang Blogger
Wah ternyata template tukangpos ini template punya nya si MBAH, udah aja berniat minta sedot tadi... Ane salut ama TukangPos, bener2 kreatif.. keep doing your best bro... I like your blog sooooooooooooooooooooooooooooooo much...
Unknown
keren sob :-o
Anonim
good gan
suwandi
Pengen ikutan.....
suwandi
ok sebelumnya terimakasi mas atas Artikelnya... sedikit demi sedikit mulai paham struktur coding dari blogger... ok langsung ke TKP : saat sudah di temukan di coding css body kenapa value backgroud sama dengan $(body.background) ya?
Mohon penjelasanya.... variable definition?
Taufik Nurrohman
Itu template versi ke tiga. Belum sempat mempelajari. Tapi kurang lebihnya sama.
suwandi
versi ke tiga ya.....
ya nih bingung banget untuk mencari mana yang bisa di ubah (variable)dan mana yang sudah menjadi coding standart(kerangka blogger)
Arif Masada
Komentar ini telah dihapus oleh pengarang.
azewBz
mas`klau background double gimna?
mksudnya satu JPG petten trus petten transfaran..!!
kaya punya urang-kurai.blogspot.com kan itu background yg tranfaran bullet tambahan..!!
Taufik Nurrohman
Biasanya ada dua layer. Misal:
Lalu atur latar gambar pada dua elemen tersebut:
budkalon
kalau pake style="z-index bisa gak?
Unknown
I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
http://www.arabie3lan.com الشيخ الروحاني
I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.
Giri Diwa Adam
Wahh Keren Nih Agan Tambah Kreatif aja, Kalau Begitu Izin Praktek Gan ,, Sebelumnya Makasih atas penjelasan Pertanyaan saya yang dulu .. Makih Tambah Ilmu aja dah di blog ini :)
Giri Diwa Adam
Makasih Gan Sekali lagi, Main-main gan ke blog saya
https://kumpulyrics.blogspot.co.id/
Dan Nilai template Kembangan + Modifan saya :)