Cara Mengganti Warna Background Blog

Template Blogger asli yang warna dan tampilannya itu-itu aja memang membosankan bagi kita. Untuk mendesain template blog memang dibutuhkan pengetahuan dasar CSS dan XHTML.

Untuk desain template blog, seharusnya kita bisa mendesain sendiri karena hanya kita yang tau karakteristik dari blog kita. Walaupun bisa membuat artikel yang berkualitas, tapi desain blog kita acak-acakan atau kurang menarik pasti artikel tersebut kurang diminati.

Ada banyak sih template yang bagus di internet, tapi pasti template blog kita akan ada yang menyamai jika blog kita pake template gratisan dari internet. Kalau template blog kita masih default atau asli dari Blogger, apa salahnya kita mengganti warna background blog sesuai keinginan kita.

Ya udah, langsung aja ke pokok pembahasan. Ini cara mengganti warna background blog

1. Login dulu ke Blogger. Karena tutorial ini dibuat cuma untuk blog di Blogger.
2. Setelah login, buka menu Tata Letak>Edit HTML.
3. Sebelum mulai bermain dengan kode HTML, Backup dulu template dengan mengklik link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.
4. Nah sekarang kita mulai bermain dengan kode HTML. Cari kode seperti berikut

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

5. Ganti tulisan yang berwarna merah pada kode di atas dengan warna yang anda suka untuk mengganti warna template blog secara keseluruhan. Untuk daftar kode warna atau kode hexa warna bisa dicari di mbah Google. Cari kode berikut

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

6. Tambahkan kode background: white; setelah kode #outer-wrapper { lalu ganti tulisan yang berwarna merah pada kode di bawah dengan warna yang anda suka untuk mengganti warna background blog. Kodenya jadi seperti ini

#outer-wrapper {
background: white;
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

7. Cari kode berikut

#main-wrapper {
width: 500px;
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 */
}

8. Lakukan hal yang sama dengan langkah ke-6. Cara di bawah ini untuk mengganti warna background Postingan

#main-wrapper {
background: white;
width: 500px;
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 */
}

9. Cari kode berikut

#sidebar-wrapper {
width: 350px;
float: right;
padding-left:10px; /* */
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 */
}

10. Lakukan hal yang sama dengan langkah ke-6. Cara di bawah ini untuk mengganti warna background Sidebar dan kodenya jadi seperti ini

#sidebar-wrapper {
background: white;
width: 350px;
float: right;
padding-left:10px; /* */
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 */
}

11. Cari kode berikut

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

12. Untuk mengganti warna background Footer, jadikan kode di atas seperti yang di bawah ini dan lakukan langkah yang sama seperti langkah ke-6

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

13. Langkah yang terakhir adalah melihat hasil tampilan dengan mengklik tombol Pratinjau. Tadaaa...gimana? Jadi bagus atau hancurkah blognya? Kalo jadinya bagus klik tombol Simpan Template. Kalo jadi ancur, tetap berusaha okeeeehhhh…

Tweet