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?

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:

      <body>
      <div id="outer-wrapper">
      ...
      ...
      </div>
      </body>

      Lalu atur latar gambar pada dua elemen tersebut:

      body {
      background:#000 url('img/wood.jpg') repeat 0 0;
      }
      #outer-wrapper {
      background:transparent url('img/gradient.png') repeat-x 0 0;
      }
      • 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 :)

Komentar telah ditutup.