Welcome to my blog, hope you enjoy reading :)
RSS

Monday, August 16, 2010

Cara 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.

10 comments:

  1. DEngan bhs sepatah patah :
    a, k k t i p s n y a b a g u s
    t t t h x t i ps n y a y a....
    --------------------------------------------------dalam bhs lancar :
    a kk tips nya bagus thx tips nya yah....
    --------------------------------------------------
    ingin jujur :
    kk tolong dunk masalah nya di sini mas !!!!!
    mas minta tutor cara buat gambar nya dunk.
    entah dari sotoshop,photobucket,picasa ato apalah, ane minta tutor nya please kk baik dech... saya janji kk kalo ada tutor nya ane langsung follow blog kk :)[ ane janji 10000%]

    ReplyDelete
  2. kalo ngebuat gambar headernya bagaimana?

    ReplyDelete
  3. thanks boss infonnya sangat berguna...

    ReplyDelete
  4. thanks pejuang infonya amat bermanfaat.
    saya selalu mengikuti.

    ReplyDelete
  5. yg bener syntax #header atau syntag #header ???
    tapi ko dicari dua duanya gak ada

    ReplyDelete
  6. saya sudah mencoba tapi waktu saya ketik syntax#header jwbn tidak diketemukan sehingga tidak bisa saya ganti....msh banyak hal yg belum saya fahami betul ttg blog ..baru 1hari belajar....

    ReplyDelete
  7. gni lho,,,,,ad template blog yg tidak ad headernya,,,,saat anda mencri syntax #header mka tidak akn ktmu,,mka saran saya cri template blog yg ad headernya......

    ReplyDelete
  8. masih ga ngerti nih..setelah diedit apanya yg diganti?

    ReplyDelete
  9. gan, numpang tanya
    kalau mau pasang gambar/logo dikiri kanan dan ditengah2nya ada tulisan bgmn caranya gan ???
    rencananya mau dipasang paling atas

    (seperti punya blog nya agan yg ada gambar orang naik kereta kencana tp punyanya agan kan hanya disebelah kanannya aja yg ada tulisan)
    terima kasih...
    balasnya ke email aja gan,
    jeks_sains@yahoo.com

    ReplyDelete
  10. mantap mas, tapi belum negerti gimana cara memperbesar kolom headernya..,

    ReplyDelete

Maaf Bukan Bermaksud apa,impian relugais12 hanya ingin memberi tahukan,setiap anda yang membaca artikel di atas tersebut,wajib mengisi post komentar anda di bawah ini,karna itu lbih memudahkan saya untuk mencoba apa yang kalian komentar,,,,
pliiiizzzzsssss NO SPAM,^_^,NO PORN

Add 'Q y Sobat Sxli'n

SmSan Yukxs

Make Widget

Link Keren

free web site traffic and promotion membuat blog terlihat berarti Free Link Exchange membuat blog terlihat berarti

Ayo Kita nonton TV live

Photobucket