Senin, Januari 19, 2009

PASANG IMAGE PADA JUDUL BLOG

Berbicara masalah gambar/image,pasti anda tertarik ingin memasang suatu gambar tokoh kesayangan anda atau lainnya terpampang diblog anda,jadi saat anda melihatnya anda akan bangga dan tidak jenuh melihat blog yang isinya hanya tulisan saja.

maka dari itu bagi yang belum bisa mebuat gambarpada judul nih saya tuntun sampai bisa:
1.siapkan gambar yang akan ditampilkan pada judul blog
2.upload gambar tersebut di hosting kesayangan anda,seperti www.photobucket.com
3.ambil URL gambar yang telah diupload tadi contohnya:

http://i411.photobucket.com/albums/pp192/robbyanto/robbyanto.jpg

agar gambar yang muncul tidak terlalu besar maka URL gambar tadi tambahkan dengan:

<img src="URL image"></img>

dan hasil penggabungannya menjadi:


<img src="http://i411.photobucket.com/albums/pp192/robbyanto/robbyanto.jpg"></img>

tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :



<img src="http://i411.photobucket.com/albums/pp192/robbyanto/robbyanto.jpg" width="45" hight="45" border="0"></img>

4.masukkan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
1.Login diblogger dengan ID anda
2.Klik menu Layout
3.Klik menu Edit HTML
4.Klik tulisan Download Full Template
5.Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
6.Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
7.Tunggu beberapa saat sampai proses selesai
8.Cari kode berikut pada template sobat :

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

9.Sisipkan kode gambar yang kita miliki diantara kode :

<a expr:href='data:post.url'> dan code <data:post.title/></a>
<b:else/>


sehingga bila disatukan menjadi:


<a expr:href='data:post.url'><img src="http://i411.photobucket.com/albums/pp192/robbyanto/robbyanto.jpg" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>
<b:else/>



10.Klik tombol PREVIEW untuk melihat perubahan
11.bila sudah OK, klik tombol SAVE TEMPLATE
12.selesai








Tidak ada komentar:

Posting Komentar