Cara membuat penampilan halaman BLog menarik , sudah banyak sekali tips - tips yang udah kita bahas seperti membuat label berputar - putar, memasang translate bendera, cara memasang jam dan masih banyak lagi yang menarik lainya penasaran klik disini. Tapi kali ini kita akan memperaktekan yang lebih sederhana yaitu cara memasang image/gambar pada judul artikel. Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :
1. Anda sudah memiliki gambar atau images terlebih dahulu
2. Upload image atau logo tersebut, bisa di www.Photobucket.com
3. 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://i396.photobucket.com/albums/pp48/putro16/logo-1.png
lalu kita tambahkan kode agar muncul halaman web kita, seperti dibawah ini :
<img src="URL image"></img>
Sehingga kodenya akan jadi seperti ini :
<img src="http://i396.photobucket.com/albums/pp48/putro16/logo-1.png"></img>
Tampilan image yang sebenarnya seperti ini :
Pastinya dengan ukuran segitu membuat tampilan malah menjadi ngak karuan untuk dilihat. Nah untuk membuat gambar manjadi berukuran kecil kita akan menambahkan kode image tersebut, antara lain
width="..." untuk lebar
height="..." untuk tinggi
border="..." untuk garis tepi atau bingkai
Saya ambil contoh kode image dengan penambahan code tadi, jadi seperti di bawah ini :
<img src="http://i396.photobucket.com/albums/pp48/putro16/logo-1.png" width="45" hight="45" border="0"> </img>
Sehingga image yang tadi akan berubah jadi seperti ini :
Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.
4. langkah keempat yaitu memasukan kode gambar tadi ke dalam kode template blog milik kita.
Untuk memasukan kode gambar tadi, silahkan ikuti langkah berikut :
- Sign in
- Klik menu Layout / Tata Letak
- Klik menu Edit HTML
- back up terlebih dahulu data anda
- Beri tanda centang pada kotak disamping tulisan Expand Widget Templates
| <a expr:href='data:post.url'><data:post.title/></a><b:else/> |
Sisipkan kode gambar yang kita miliki diantara kode :
| <a expr:href='data:post.url'>kode yang akan dimasukan<data:post.title/></a> <b:else/> |
Sehingga bila disatukan kodenya menjadi :
| <a expr:href='data:post.url'><img src="http://i396.photobucket.com/albums/pp48/putro16/logo-1.png" width="45" hight="45" border="0"></img><data:post.title/></a><b:else/> |
- Klik tombol PREVIEW untuk melihat perubahan
- bila sudah OK, klik tombol SAVE TEMPLATE
- Selesai
