Tips Ngeblog Untuk Pemula. Powered by Blogger.

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 belajar cara 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,
Upload gambar ke dalam blog, seperti hendak menyisipkan gambar dalam postingan. Lalu 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:

http://4.bp.blogspot.com/-8IWD_pf5_hY/UluQ7-4PqjI/AAAAAAAAAHw/pnbS1kOp9eI/s1600/moehardianku.jpg

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

<div style="text-align: center;"> <img alt="Moehardian" border="0" src="http://4.bp.blogspot.com/-8IWD_pf5_hY/UluQ7-4PqjI/AAAAAAAAAHw/pnbS1kOp9eI/s1600/moehardianku.jpg" /><br /> <textarea code="" cols="15" name="" rows="5"><center> <a href="http://arisetim.blogspot.com" target="_blank" title="Moehardian"><img src="http://4.bp.blogspot.com/-8IWD_pf5_hY/UluQ7-4PqjI/AAAAAAAAAHw/pnbS1kOp9eI/s1600/moehardianku.jpg" alt="Moehardian" /></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

moehardian


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. 



Tag : Belajar HTML
14 Komentar untuk "Cara Membuat Banner dengan Kode HTML"

Nice Artikel bro bermanfaat nanti aku coba di blog ku

oiya,jangan lupa follow balik blog saya ya

http://zachrunfuady.blogspot.com/

Blog walking bro :) kunbal ya.. Thanks

http://discoversumatra.blogspot.com/

blog sobat sudah tertancap di blog saya
di tunggu backlinknya

wah ini yang saya cari n tks gan infonya sangat bermanfaat

Mantap lah ...responsive ini codenya

Mantab ini yang gue cari'', template nya sama kaya gue lgi huaah...

Main'' tmpt gue broo

Orange: Cols (kolom) rows (baris), maksudnya bagaimana ya? apakah tidak perlu diganti pada kode banner saya?

itu kolom dan baris untuk mengatur besar kecilnya kotak yang ada kode html dibawah bannernya

mantap sekali info membutan banner nya, makasih ya

bang kok punnik aya text areanya kosong ya? gak ada kodenya?

Mari budayakan komentar yang positif

Back To Top