Mengganti Warna Background


Mengganti Warna Background Pada Template Blog : Tampilan Background merupakan salah satu elemen blog yang akan memberikan “warna” tersendiri baik oleh pemiliknya maupun para pengunjungnya atau bahkan dapat menjadikan motivasi/inspirasi tertentu bagi yang melihatnya. Mengingat peran pentingnya background tersebut mungkin saatnya mulai sekarang kita perlu untuk lebih “memperhatikan” background ini. Bagi blogger (pemilik blog) yang mungkin merasa bosan atau sekedar ingin mencari “suasana” baru untuk blognya, silakan melakukan kustomasi background bersama Tips Trik Blog berikut ini.

Kustomasi yang akan kita lakukan sehubungan dengan background ini meliputi, mengganti warna background, mengganti dan menentukan posisi image background. Namun untuk postingan kali ini, saya akan membahas kustomasi warna background terlebih dahulu.


Pada kesempatan ini, untuk simulasi dan percobaan, kita akan menggunakan template default blogspot, Son of Moto. Sedangkan untuk template yang lain, tidak akan berbeda jauh untuk melakukan pengeditan kode css-nya.


MENGGANTI WARNA BACKGROUND

Untuk mengganti warna background, kita harus melakukan pengeditan pada kode css yang biasanya dengan format seperti di bawah ini.

body {
background-color:#kode_html_warna;
…………
…………
}

atau bisa seperti di bawah ini

body {
background-color:#kode_html_warna;
…………
…………
}

Catatan
  • Untuk mendapatkan background dengan warna yang kita inginkan, kita dapat mengganti kode kode_html_warna dengan kode html warna yang lain. Untuk mengetahui kode html warna, silakan lihat di sini.
  • Pada contoh kasus ini (template Son of Moto) kita akan menemukan kode css untuk background, seperti di bawah 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;
}

Nah, untuk mengganti warna background sesuai yang kita inginkan, misalkan warna hitam (#00000), kita dapat mengganti variable “background” di atas dengan kode “background:#00000” sehingga menjadi seperti di bawah ini.


body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #00000;
font-size: small;
}


MENGGANTI WARNA BACKGROUND PADA SIDEBAR

Jika menginginkan warna background yang berbeda pada sidebar, kita harus melakukan pengeditan pada kode css seperti di bawah ini.


#sidebar {
background-color:#kode_html_warna;
………...
………...
}

Catatan
  • Untuk mendapatkan warna background sidebar yang kita inginkan, kita dapat mengganti kode_html_warna tersebut dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #sidebar mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #sidebar-wrapper, #side-wrap, #side-wrap1, side-wrap2.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css-dengan format seperti ini.

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nah, untuk mengganti warna background sidebar sesuai yang kita inginkan, misalkan warna hijau muda (#81F781), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#81F781” sehingga menjadi seperti di bawah ini.


#sidebar {
background-color:#81F781;
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


MENGGANTI WARNA BACKGROUND PADA HALAMAN POSTING

Jika menginginkan warna background yang berbeda pada halaman posting, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#main {
background-color:#kode_html_warna;
………
………
}

Catatan
  • Untuk mendapatkan warna background pada halaman posting yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #main mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #main-wrapper.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css dengan format seperti ini.


#main {
width: 400px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Nah, untuk mengganti warna background halaman posting sesuai yang kita inginkan, misalkan warna kuning (#F2F5A9), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#F2F5A9” sehingga menjadi seperti di bawah ini.


#main {
background-color:#F2F5A9;
width: 400px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


MENGGANTI WARNA BACKGROUND PADA HEADER

Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#header-wrapper {
background-color:#kode_html_warna;
……….
……….
}

Catatan
  • Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}


#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top $startSide;
}

Nah, untuk mengganti warna background header sesuai yang kita inginkan, misalkan warna hijau lumut (#0B610B), kita harus mengganti variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#header-wrapper {
background-color:#0B610B;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}


#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-color:#0B610B;
background-repeat: repeat-x;
background-position: top $startSide;
}


MENGGANTI WARNA BACKGROUND PADA FOOTER

Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.


#footer {
background-color:#kode_html_warna;
…………
…………
}

Catatan
  • Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}


#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}

Nah, untuk mengganti warna background footer sesuai yang kita inginkan, misalkan warna hijau kekuningan (#BEF781), kita harus mengganti dan menambahkan variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#footer {
background-color:#0B610B
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}


#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: #0B610B;
}


Setelah selesai mengganti warna dengan kode html warna, kemudian simpan template dan pastikan tampilan warna background blog kita telah berubah menjadi seperti yang kita inginkan.

Berikut ini adalah screenshot blog dengan template Son Of Moto sebelum dilakukan pengeditan.


Dan berikut ini screenshot hasil dari otak-atik background di atas.


Selamat Mencoba!!
Label: