Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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:

Template Blogger
Template dasar

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:

Fitur Blogger: Template Designer
<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:

background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
  • #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:

Modifikasi background warna

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:

Modifikasi background image

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:

Selektor berbeda dan hasil yang berbeda

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?

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 16 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!