Menukar Warna Latar Blog

Tutorial ini agak menarik kerana ia akan membuat blog anda nampak lebih dinamik atau warna-warni. Blog yang terdiri dari hanya satu warna latar akan membuat ia nampak kusam dan pelawat mudah boring untuk melihat nya. Namun, memasang warna latar adalah lebih diminati oleh pereka blog yang mahu lebih penampilan dan tidak berapa disukai oleh mereka yang mementingkan isi-isi atau mereka yang 'simple'.

Anda boleh menentukan warna pada beberapa bahagian blog, iaitu bahagian keseluruhan blog, 'Header', 'Posting', 'side bar' dan 'footer'. Anda boleh melilih warna yang berlainan untuk setiap bahagian ini.

Kod yang anda perlukan untuk meletakkan warna adalah seperti berikut:

background-color:#123456;

Untuk menukar keseluruhan warna blog, anda boleh membuatnya dari bahagian 'Layout' - 'Font & Colors' - 'Page Background Color' atau anda juga boleh mengubahnya pada bahagian 'Edit Html'. Untuk berbuat demikian, cari kod seperti berikut di bahagian 'Edit Html':

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

dan tukarkan kod background:$bgcolor; dengan kod warna yang di kehendaki seperti berikut:

/* Outer-Wrapper
------------------------------------------------ */
#outer-wrapper {
  background-color:#123456;
  width: 930px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

Untuk bahagian lain, anda hanya perlu meletakkan kod tadi pada bahagian-bahagiannya iaitu:

Header

#header-wrapper {

  background:#123456;
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Posting @ Main

#main-wrapper {

  background:#123456;
  width: 410px;
  float: $startSide;
  word-wrap: break-word; 
  overflow: hidden;    
  }

Side Bar

#sidebar-wrapper {
  background:#123456;
  width: 220px;
  float: $endSide;
  word-wrap: break-word; 
  overflow: hidden;     
}

Footer

/* Footer
----------------------------------------------- */
#footer {
  background:#123456;
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Ada yang akan fikir pengubahsuaian kod-kod ini susah atau akan merumitkan otak. Namun, tiada orang yang akan pandai jika tidak belajar. Kalau anda masih baru, mungkin anda akan pening kepala, tapi lama-kelamaan anda akan rasa semua ni senang sahaja. Kepada yang masih baru, saya nasihatkan untuk cuba ubah kod-kod ni pada satu blog eksperimen dan bukan blog sebenar anda.

Untuk kod-kod warna, anda boleh rujuk bahagian 'Layout' - 'Font & Colors'.

Semoga berhasil..