Cara membuat gambar foto banner dengan link di blog

Berikut cara membuat gambar foto banner dengan link di blog entah itu blogger, wordpress, maupun custom website. gambar ini bisa berupa pengumuman, iklan banner, atau ornamen untuk memperindah blog yang dilengkapi dengan link ke alamat website tertentu, caranya cukup mudah, kita hanya perlu copy code dan merubah sebagian dengan alamat link tujuan, alamat  gambar, ukuran lebar dan tinggi , serta judul title gambar. berikut ini cara membuatnya.

Kode untuk membuat Gambar foto banner dengan link

membuat gambar dengan link

<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>

Ganti kata

• www.ahad1.com = dengan alamat link
• ahad1 = judul gambar
• https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png = alamat link gambar
• 100 = lebar gambar
• 21 = tinggi gambar

Kita bisa membuat beragam variasi untuk menempatkan kode gambar dengan link tersebut, seperti rata kiri, rata tengah, rata tengah, sejajar dengan tulisan rata kiri, atau sejajar dengan tulisan rata kanan, berikut variasi pilihan kode yang perlu ditaruh diatas dan dibawahnya.

Gambar foto dengan link rata kiri

 

<div style=”text-align:left”>
<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>
</div>

Gambar foto dengan link rata tengah

<div style=”text-align:center”>
<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>
</div>

Gambar foto dengan link rata kanan

<div style=”text-align:right”>
<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>
</div>

Gambar foto dengan link sejajar disebelah kiri tulisan

<div style=’clear: left; float: left; padding: 5px 5px 5px 5px;’>
<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>
</div>

Gambar foto dengan link sejajar disebelah kanan tulisan

<div style=’clear: left; float: right; padding: 5px 5px 5px 5px;’>
<a href=’http://www.ahad1.com‘ title=’ahad1‘ target=’_blank’><img src=’https://3.bp.blogspot.com/-z2KXcIYXDWY/Vs60LlmNn3I/AAAAAAAAACI/W2sIj9NO4Bg/s1600/ahad1.png‘ alt=’ahad1‘ title=‘ahad1‘ width=’100‘ height=’21‘ border=’no’ /></a>
</div>

Begitulah beberapa kode untuk menampilkan foto dengan link di blog atau website yang bisa dipilih sesuai pilihan 🙂