Kalau berbicara masalah image/gambar, memang sangat seru dan
menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk
di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog
kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data
yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas
untuk berkunjung. Memang segala sesuatu kalau berlebihan
akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....
Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik
bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar
pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik
gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.
Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus
dilakukan, antara lain :
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di
inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop
ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa
atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel
terdahulu, silahkan klik
disini untuk membacanya kembali.
langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger
ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya
punya di www.Photobucket.com untuk masalah upload gambarpun
sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan
klik
di sini.
langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan
yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja
akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif
Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita
tambahkan kode :
<img src="URL image">
Sehingga kodenya akan jadi seperti ini :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">
dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image
tersebut adalah seperti ini :
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://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45"
hight="45" border="0">
sehingga image yang tadi akan berubah jadi seperti ini :
Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak
ke langkah selanjutnya.
langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke
dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini
:
Untuk yang memakai template klasik :
mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan
editting kode template
<$BlogItemTitle$>
cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit
yang berada bar menu browser lalu klik Find kemudian tuliskan kode
diatas tadi lalu klik tombol Find, maka secara otomatis kita akan
langsung di bawa ke tulisan kode tadi. Nah kode
<$BlogItemTitle$>
kode untuk menampilkan judul postingan, maka kita harus
menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau
sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum
kode judul posting maka image pun akan muncul sebelum judul posting, jika di
simpan sesudah kode judul posting sudah barang tentu image pun akan muncul
sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum
tulisan judul :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45"
hight="45" border="0"> <$BlogItemTitle$>
pemasangn kode adalah untuk memberi jarak spasi antara image
dengan tulisan judul, sebab jika tidak menambahkan kode maka image
dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis
ada jarak spasinya.
Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi
akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat
judul postingan ini.
Untuk yang memakai templat baru :
Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai
harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang
tadi kita pakai adalah :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45"
hight="45" border="0">
kode image tersebut tag nya harus ditutup dengan tag penutup :
</img>
Sehingga kode image jadi bertambah menjadi :
<img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45"
hight="45" border="0"></img>
Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan
ikuti langkah berikut :
terjadi kesalahan editting
Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak,
nanti tidak akan sesuai dengan langkah selanjutnya
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'> dan
kode <data:post.title/></a>
<b:else/>
Sehingga bila di satukan kodenya menjadi :
<a expr:href='data:post.url'> <img
src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45"
hight="45" border="0"></img> <data:post.title/></a>
<b:else/>
Admin
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo
Comments :
Posting Komentar
jangan lupa beri komentarnya sebagai tanda persahabatan
pilih url/name.jika tidak memiiki url boleh dikosongkan saja