Cara Memasang Gambar Pada Header Blog

Duh, akhirnya ada juga pengunjung yang mau liat blogku happy. Sebenarnya sih belum mau mempublikasikan blog ini, cos artikelnya belum buanyak. Tapi gapapa juga ding.
Seorang teman saya bertanya, gimana caranya memasang gambar pada header blog ???? confused.
Oke, gini caranya..............
First, u must have a picture then u have to upload that picture to website which can save your image. Like....I usually use www.4shared.com to upload my picture.
And then, maybe u remember this sintax like this from my posting before :

Klik mouse pada image untuk melihat gambar dengan lebih jelas.
Gambar diatas merupakan bagian bawah di Edit HTML pada blog. Udah nemu belum ? Cari aja disekitar tulisan <body>, mungkin setiap template blog berbeda-beda, saya memakai template rounder.
Key-nya adalah cari kata-kata body dan header. Pada bagian panah yang ditunjuk pada gambar, setelah tulisan <div id='outer-wrapper'>, tambahkan sintax image seperti ini :
<img border='0' height='100' src='http://dc47.4shared.com/img/74513866/6142eb99/bgjudulblog.JPG?sizeM=3'
width='600'/>
Gantilah nilai-nilai properties dari yang telah saya tuliskan :
  • border = '0', jika anda tidak ingin menampilkan garis tepi pada gambar. Sedangkan jika anda ingin menampilkan garis tepi pada gambar, isilah dengan nilai 1 atau lebih besar dari 1 tergantung besarnya ukuran tebalnya garis yang anda inginkan.
  • height dan width, merupakan ukuran tinggi dan lebar gambar. Jika anda ingin menampilkan gambar sesuai ukurannya, hilangkan aja properties height dan width. Jika anda ingin menuliskan sesuai perbandingan gambar seperti 75% atau 200%, anda dapat menuliskan seperti ini width='75%'.
  • src, adalah tempat file gambar anda berada.
Oke deh, simpan template anda dan lihat hasilnya winking.
Tulisan judul blog anda akan tetap tampil, jika anda tidak ingin menampilkan judul blog anda, anda dapat menghapus sintax yang seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Cara Membuat Blog dan Website (Header)' type='Header'>
</b:widget>
</b:section>
</div>

Ingat : hapus tulisan dari pembuka <div> sampai penutupnya </div> , jangan sampe tertinggal seperti yang telah saya jelaskan di postingku sebelumnya tentang dasar HTML. Klik disini. Sehingga hasilnya akan seperti ini :
<body>
<div id='outer-wrapper'>
<img border='0' height='100' src='http://dc47.4shared.com/img/74513866/6142eb99/bgjudulblog.JPG?sizeM=3'
width='600'/>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Simpan template anda, tapi akan ada peringatan kalau anda akan menghapus widget judul blog, klik OK saja. Lihat deh hasil utak-atikmu, berhasil seperti yang anda inginkan ga? I hope so love struck.
Kalau anda mau menampilkan gambar didalam kotak berwarna seperti di blog saya, anda bisa mmenaruh gambar anda di dalam sebuah tabel dengan menggunakan sintax untuk tabel. Tapi ntar deh kujelasin tentang tabel.
Dah cape nih....besok lagi ya wave

3 komentar:

jr mengatakan...

hai..nice blog...
you want visit my blog'''
find new trik in blog http://tiar-trisandy.blogspot.com/

Dewi Tantri mengatakan...

kok saya kagak bisa ya..udah di hapus.....tolong dung...

Mainusa mengatakan...

waoooo waooowww...

tengkyu abanggg ... ini tips oke berat, susah banget dapet metode pasang image sbagai header selain cara2 normal (asal upload) ...

tengs >> Muachhhhh

kunjungan balik yah ke >> Kumpulan Catatan ala Brang Biasa

1x l > tengkyu :d