Sudah berlangganan artikel blog ini via RSS Feed?

Pasang Image pada judul Artikel

logo judul artikelCara 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
Cari kode berikut  :
<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
Selamat mencoba..., jika ada pertanyaan mengenai Cara Pasang Image pada judul Artikel silahkan bertanya.
Terimakasih sudah mengunjungi blog ini... :D

Powered by  MyPagerank.Net

6 komentar:

jan mengatakan...

ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.

Rocks mengatakan...

mampir donk ke blog saya

jual karpet mengatakan...

nice posting

reduce lower body fat mengatakan...

Mampir ke sini donk reduce lower body fat

toko bunga mengatakan...

Apa tdak akan memperberat blog

Vimax Original Pembesar Mr.P Herbal mengatakan...

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar


 

My Friends Google

My Profile

cojogja Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )