Cara Merubah gambar Header Blog


Untuk mempelajari ini, kita akan menggunakan template TicTac Blue bawaan blogger :
  1. Login ke Blogger (login to Blogger)
  2. Dasbor (Dasboard)
  3. Rancangan (Design)
  4. KLIK Edit HTML
  5. Amankan Template (Bacup Template) :
    Mengamankan template dimaksudkan untuk memudahkan mengembalikan template ke keadaan semula apabila perubahan yang dilakukan tidak sesuai dengan rencana atau harapan yang diinginkan. Cara 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.
Catatan/Keterangan :
- Panduan dan tutoroal ini diperuntukkan bagi yang menggunakan Template Tata Letak (Layout Template).
- Usahakan membuat gambar dengan beban minimal sehingga tidak terlalu membebani loading blog.

SUMBER:
blog-budiman.blogspot.com. Powered by Blogger.