Artikel Terbaru :
Home » » Cara Mudah Membuat Gambar Header Blog

Cara Mudah Membuat Gambar Header Blog

Tuesday, November 20, 2012 | 18komentar

Cara Mudah Membuat Gambar Header Blog -  Salah satu cara untuk memperindah tampilan blog yang kita miliki adalah dengan menambahkannya gambar header. Format gambar yang bisa dipakai sebagai header antara lain gambar yang berformat GIF, JPG, atau PNG yang bisa anda buat sendiri, baik menggunakan Adobe Photoshop, CorelDraw, Adobe Ilustrator, atau dengan sofrware pengolah gambar lainnya.


Agar ukuran header yang kita pakai sama seperti ukuran halaman blog, temukan ukuran halaman blog anda dengan mencari kode “ #outer-wrapper{width:900px …. “ pada HTML blog anda. Jika ukuran halaman blog anda 900px maka buatlah gambar yang lebarnya 900px sedangkan high (tinnginya) bisa anda atur sendiri sesuai selera anda.

Setelah gambar anda sudah jadi dan menurut anda itu adalah gambar yang sesuai banget dengan blog anda lalu upload gambar tersebut kemana aja anda mau, atau bisa juga anda upload ke blogger.com atau ke Potobucket atau kunjungi cara" nya di Cara Mendaftar Meng-upload Gambar di Photobucket. Kemudian yang anda perlukan adalah link gambar tersebut. Misalnya saya punya link gambar header seperti ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrv5Iy84NxXHbVKHuYFP__8rkPz0jBu9ltdw6G9Aclv2GR33T85j8EUOP8C-G0BkRJfcchAfgKa44ncRmB5VcgtDumDdDcGFO3Qch6Nhh1SWPz7a-a45NYW4qovsIkqYxAf8_wOXG3UU/s1600/mywap.png    

Link gambar tersebuat yang kita masukkan ke HTML Blog kita.

Caranya adalah sebagai berikut :

1.  Login ke blog anda kemudian pilih Design( Rancangan) dan memilih Edit HTML. centang “Expand Widget Template
2.  Cari kode di bawah biar cepat ketemu tekan Ctrl+F dan masukan kode di bawah jika masih bingung lihat caranya di Cara Mudah Dan Cepat Mencari Kede HTML Di Blog :
#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:# 0000;}
3.   Letakkan link gambar anda dengan cara mengganti #000 dengan link diatas atau link sahabat. Maka jadinya seperti berikut.  
#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrv5Iy84NxXHbVKHuYFP__8rkPz0jBu9ltdw6G9Aclv2GR33T85j8EUOP8C-G0BkRJfcchAfgKa44ncRmB5VcgtDumDdDcGFO3Qch6Nhh1SWPz7a-a45NYW4qovsIkqYxAf8_wOXG3UU/s1600/mywap.png) center top repeat-x;}
4.  Setelah selesai, simpanlah template blog anda dan lihat hasilnya….
Selamat mencoba
Share this article :

ARTIKEL TERKAIT:

18 comments:

  1. ijin coment lagi mba,, sekalian mu ikutan tukar linknya.. silahkan cek linknya di tempat saya..

    ReplyDelete
    Replies
    1. trima kasih... link anda bisa di lihat di bagian gadget back link

      Delete
  2. kunjungi blog saya juga yaaaah.. trims

    ReplyDelete
  3. (Yang kedua) Itu di taro bagianmana, yang suruh di temukan itu kode apa?

    ReplyDelete
    Replies
    1. silahkan postingannya di lihat kembali saya sudah ameng-edit nya kembali

      Delete
  4. berhasil di blog dummy :)

    ReplyDelete
  5. Selamat sore eba Siti, mau tanya posisi #outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:# 0000;} letaknya dimana (maklum otodidak ni eba).

    Terima kasih

    ReplyDelete
    Replies
    1. sore juga..! ada di dalam CSS letaknya di bagian atas atau biar gampang tinggal cari aja dengan mengetikan #outer-wrapper
      jika belum tau cara mencari code di tampilan HTML baru baca artikel nya di Cara Mudah Mencari Kode Template di Menu Edit HTML Baru

      semoga membantu :)

      Delete
  6. Sudah lama tidak jalan-jalan semakin keren nih blognya +Ganti template ya maba sitti perasaan dulu bukan yang ini templatenya.

    ReplyDelete

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting