Cara Mengubah Background Blog Dengan Gambar

Siang sobat Ngampus, pada kesempatan ini saya akan share trik blog tentang Cara Mengubah Background Blog Dengan Gambar. Sebagian orang dan sebelumnya termasuk saya yang baru belajar ngblog pastinya ada masalah dengan template, pasti ada rasa bosan dengan template yang kita pasang tetapi yang paling menonjol dengan blog kita adalah background template kita, bener tidak sob? hehe. Baca juga sob postingan sebelumnya kategori trik blog tentang : Cara Membuat Glow Effect Pada Link Blog. Langsung saja simak berikut tentang :

Cara Mengganti Background Blog Dengan Gambar

Pertama silahkan cari kode-kode berikut untuk mengganti background blog dari setiap elemen blog yang akan diganti backgroundnya

Background Blog Keseluruhan

Cari kode body {
Letakkan kode background: url(pasang link gambar background disini) repeat-y center; diantara kode body yang telah ada
Hasilnya
body {
color: #000000;
background: url(pasang link gambar background disini) repeat-y center;
---
}

Background Judul

Cari kode #header-wrapper {
Letakkan kode background: url(pasang link gambar background disini) repeat-x scroll left bottom; diantara kode #header-wrapper yang telah ada
Hasilnya
#header-wrapper {
background: url(pasang link gambar background disini) repeat-x scroll left bottom;
height:90px;
width:100%;
}

Catatan: Beberapa template ada yang menggunakan #header-outer, #header-inner

Background Posting atau Artikel Blog

Cari kode #main-wrapper {
Letakkan kode background: url(pasang link gambar background disini)repeat-y; diantara kode #main-wrapper yang telah ada
Hasilnya
#main-wrapper {
background: url(pasang link gambar background disini)repeat-y;
float:left;
----
}

Catatan: Beberapa template ada yang menggunakan #content-wrapper

Background Diluar Area Posting

Cari kode #outer-wrapper {
Letakkan kode background: url(pasang link gambar background disini)none repeat scroll 0 0; diantara kode #outer-wrapper yang telah ada
Hasilnya
#outer-wrapper {
background: url(pasang link gambar background disini)none repeat scroll 0 0;
border:1px solid #000;
---
}

Catatan: Beberapa template ada yang menggunakan #inner-wrapper

Background Sidebar

Cari kode #sidebar h3{
Letakkan kode background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee; diantara kode #sidebar yang telah ada
Hasilnya
#sidebar h3{
background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee;
---
}

Catatan: Beberapa template ada yang menggunakan #sidebar h2, .sidebar h2, .sidebar h3

Background Footer

Cari kode #footer{
Letakkan kode background: url() repeat-x scroll bottom;font:normal 12px Arial; diantara kode #footerr yang telah ada
Hasilnya
#footer{
background: url() repeat-x scroll bottom;font:normal 12px Arial;
---
}

#Catatan: Beberapa template ada yang menggunakan #footer-wrapper, .footer

Jika semua kode yang sobat cari tidak ada didalam template blog sobat, silahkan sesuaikan dengan nama elemen yang sobat cari. Misalnya body, header, sidebar, main, content, dan footer.

Terimakasih, semoga artikel ini bermanfaat dan memudahkan kita dalam mengedit blog kita.

reference code : panduantemplateblog

Browse More Articles

Tweet

Written by Guru TIK

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.