Cara Mengubah / Memasukkan Gambar Background / Header di Blog

Cara ini digunakan untuk mengubah/menambahkan gambar header secara keseluruhan sebagai background/latar. Jika hanya ingin mengganti/memasang gambar header pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambar anda melalui fitur upload yang telah disediakan.
click to enlarge

Namun untuk mengganti seluruh bagian backround/latar wrapper header di blog anda, gunakan cara berikut:

1. Masuk ke Edit HTML.

2. Cari  (Ctrl+F) #header-wrapper atau yang sejenisnya (masing-masing template tidak sama tergantung basic template tersebut). Declarator ini selalu di bagian pengaturan header dan posisinya paling atas.
Contoh:

#header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)

3. Tambahkan atribut ini sebelum background-color (atau anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar):
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat; 

contoh jadinya: 

#header-wrapper{ 
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat;
background-color: #00000;
width:975px;margin:0 auto 0;height:125px;)


Atau aturan shorthand untuk background juga dapat digunakan:
background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #000000;

contoh:

#header-wrapper{background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #00000;width:975px;margin:0 auto 0;height:125px;)
Ganti http://alamat-url-gambar/gambar.jpg dengan direct url dimana anda menguploadgambar  header blog. Sebelum mengupload & memasang gambar header, edit atau pastikan ukuran gambar sama dengan width dan height header blog.
4. Save template.

Jika ada pertanyaan, permasalahan, atau apa saja, silakan gunakan form comment.

4 Comments

    Saya coba terapkan gan, trims ya. Ditunggu kunjungannya…

    Nice Info, saya sangat terbantu. kalo boleh ijin Copas.
    Jawharie.blogspot.com

    wah, keren artikelnya gan.
    semoga sukses selalu. jangan lupa komen dan follow backnya di http://adeputra-pkp.blogspot.com

    Gan saya mau tanya, adakah cara lain selain harus masuk ada kode HTML nya soalnya di template bawaan bloger kode yang Agan sebutkan diatas saya cari gak ada Gan, tolong pencerahannya. salam dari newbe Gan

Leave a Reply

Your email address will not be published. Required fields are marked *