Mengganti Gambar Header di Blog

Untuk mempelajari ini, kita akan menggunakan template TicTac Blue bawaan blogger obyeknya :

1. Login ke Blogger (login to Blogger)

2. Dasbor (Dasboard)

3. KLIK Tata Letak (Layout)

4. KLIK Edit HTML (Layout)

5. Amankan Template (Securing Templates) :Mengamankan template dimaksudkan untuk memudahkan mengembalikan template ke keadaan semula apabila perubahan yang dilakukan tidak sesuai dengan rencana atau harapan yang diinginkan. Car mengamankan template bisa sampeyan buka di sini.


6. Header : Cari KODE syntax #header
Gunakan Ctrl + F supaya lebih mudah saat mencari KODE. Kalau belum tahu bisa lihat caranya dengan KLIK di sini.
Bentuk KODE lengkap syntax #header adalah seperti di bawah ini:

#header-wrapper {

margin: 0;

padding: 0;

font: $pagetitlefont;

background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;

}

* URL gambar background header :

http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif

* Karena KODE css tersebut masih memanfaatkan fungsi Variable Definitions, ubahlah $startSide menjadi left, sehingga menjadi URL yang sebenarnya :

http://www.blogblog.com/tictac_blue/top_div_blue_left.gif

7. Properties : buka URL tersebut di address bar untuk melihat bentuk gambar background.
Lihat ukuran gambar background header dengan Letakkan cursor pada gambar yang telah dibuka, KLIK kanan mouse kemudian buka propertiesnya. Ukuran gambar akan kita ketahui : 847px (width) x 240px (height)
Gambar background header :

KLIK untuk memperbesar gambar!

8. Buat Gambar : Karena ukuran gambar sudah diketahui dengan jelas, maka untuk merubahnya sampeyan harus membuat gambar baru dengan ukuran seperti gambar background header di atas.
Cara buat gambar :
* Buat gambar sendiri menggunakan software.
* Buat gambar menggunakan layanan online gratis (Online Photo/Image Editor). Bila sampeyan ingin menggunakan cara ke-2 ini, silahkan kalian bisa berkunjung ke :

- http://www.pixlr.com/editor/,

- http://www.online-image-editor.com/ , atau

- http://www.imageeditor.net/.

9. Upload : Upload di file hosting apabila gambar sudah selesai dibuat. Copy paste URL-nya dan gunakan untuk mengganti URL yang ada di syntag #header.

10. Save : KLIK Simpan Template (Save Template).

11. Lihat Blog : Buka Blog dan lihat hasil perubahan yang sudah dilakukan.