Cara Membuat Banner dengan Kode HTML

Mari kita kembali belajar HTML lagi. Sebelumnya kita sudah belajar cara memasang kode html dipostingan. Kali ini saya akan menyampaikan tentang cara membuat banner dengan kode HTML.

Beberapa hari yang lalu ada seorang yang bertanya kepada saya tentang bagaimana cara membuat banner. Saya pernah menulisnya di blog ini, tapi file backupnya hilang setelah ganti tema blog, hiks. Baiklah langsung pada pembahasan, mari kita belajarcara membuat banner dengan kode html:

Pertama,

Login ke blog anda ~> Entry

Kedua,

Persiapkan gambar yang akan dibuat sebagai banner. Sebenarnya banner bisa dibuat secara online melalui beberapa website khusus pembuat banner, tapi saya lebih suka edit gambar menggunakan photoshop.

Ini contoh gambar yang akan saya jadikan banner

Setelah gambar siap, upload gambar tersebut ke dalam postingan. Cara uploadnya seperti saat anda akan melampirkan gambar dalam postingan, melalui "Insert Image" yang ada di bawah judul postingan, di atas. Gambar diupload sebelum menulis sesuatu dalam post area, hanya gambar saja.

Ketiga,

Ambil kode html gambar yang sudah diupload dengan cara, ganti mode penulisan blog dari compose ke html. Lalu cari kode html yang berakhiran: .jpg / .png / .gif / atau tergantung file ekstensi dari gambar yang anda simpan. Copy kode tersebut, yang seperti ini ~>  http://*************.jpg

Kode html dari gambar contoh saya jadinya seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfiRfPchzKio4uM4VIKTIVa_kCphnY6UBtcwvCZdc6M_CwqAqkAI20bnhyphenhyphen-Khfbiqc4MIvRN1S68-TNJDUuBG68eenM5M5zIX4Qa0L2s5Qo3DCxQ9RrQ6JvX2h3outCOOb2pxXjQrP4av/s1600/image.jpg

Keempat,
Kita simpan kode html yang barusan diambil. Lalu copy kode html di bawah ini:

<div style="text-align: center;"> <img alt="Heru" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfiRfPchzKio4uM4VIKTIVa_kCphnY6UBtcwvCZdc6M_CwqAqkAI20bnhyphenhyphen-Khfbiqc4MIvRN1S68-TNJDUuBG68eenM5M5zIX4Qa0L2s5Qo3DCxQ9RrQ6JvX2h3outCOOb2pxXjQrP4av/s1600/image.jpg" /><br /> <textarea code="" cols="15" name="" rows="5"><center> <a href="http://herutegal.blogspot.com" target="_blank" title="Heru"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfiRfPchzKio4uM4VIKTIVa_kCphnY6UBtcwvCZdc6M_CwqAqkAI20bnhyphenhyphen-Khfbiqc4MIvRN1S68-TNJDUuBG68eenM5M5zIX4Qa0L2s5Qo3DCxQ9RrQ6JvX2h3outCOOb2pxXjQrP4av/s1600/image.jpg" alt="Heru" /></a></center> </textarea></div>

Keterangan:

Hijau: Nama yang muncul ketika kursor berada di atas banner / gambar

Merah: Ganti dengan URL blog anda sendiri, banner yang diklik akan menuju ke blog tersebut

Biru: Kode html gambar kita

Ungu: Kode html untuk menambah garis, jika dihilangkan maka text area html akan berada di samping banner
Orange: Cols (kolom) rows (baris)

Ganti kode html yang saya warnai sesuka hati berdasarkan keterangan warna di atas. Kira-kira hasil banner kita akan tampak seperti di bawah ini

Demikian dan terima kasih. Cara membuat banner dengan kode html tidaklah sesulit yang kita bayangkan, hanya butuh sedikit kesabaran dan ketelitian dalam membuatnya. Jika belum berhasil silakan ditanyakan via kolom komentar di bawah, atau bisa mention ke @ari_tunsa. 

~SELAMAT MENCOBA~