Cara Membuat Banner Iklan di Blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code
![]() |
Contoh Banner atau Iklan |
Hai
sobat blogger bagaimana kabarnya? pasti baik-baik kan? Alhamdullilah kalau baik, kebetulan hari ini saya masih libur, dari pada nganggur tidak ada kerjaan, yaaa bikin tulisan dikit-dikit hehe, soalnya kalau sudah masuk sekolah, tidak ada
waktu lagi untuk tulis artikel atau pun sekedar buka blog (sok sibuk lo rief)
yo wis ben. Pembahasan kali ini bukan lagi masalah cinta-cintaan, cerpen atau puisi
tapiii, bahas apa yaaa? yup betul sekali, bahasan kali ini adalah tentang kode
meng-kode yaitu membuat kode serhana bahasa pemrograman (HTML, Java Script, PHP
dll) untuk website atau blog.
Sobat
blogger pernah tidak kalian masuk di suatu blog dan mendapati ada iklan atau banner
yang bila kalian sentuh dengan kursor sudah nge-link ke alamat blog mereka (pernah-pernah) nah itu tema pembahasan kita pada hari ini yaitu cara membuat banner atau iklan dengan efek OnMouseOver
dengan tombol Copy Code.
Sebenarnya
trik ini merupakan hasil modifikasi, setelah saya otak-atik kode HTML dan Java Script seharian:))) e tidak taunya jadi hehe, kode ini sangat cocok untuk
banner, iklan atau Link Exchange (tukaran link) untuk para master blogger maaf
ya kalau tutorial ini terlihat basi, tujuan saya hanya ingin berbagi saja kok,
semoga membantu untuk teman-teman yang baru masuk kedunia blogger, ayo di simak yaaa,
jangan sampe terlewatkan. Cikebrout:
Sebelum
sobat membuat Kode HTML yang perlu sobat siapkan adalah gambar untuk banner /
iklan, gambar apa saja terserah :))) edit dulu gambarnya, kalo saya biasanya
mengunakan aplikasi Adobe Photoshop atau PhotoScape.
Setelah jadi gambar banner / iklan-nya sobat blogger harus meng upload-nya ke
penyimpanan foto online kalian bisa menggunakan Photobucket atau yang
lain tinggal kalian searching saja di Google tinggal pilih, tapi saya merekomendasikan kalau kalian menggunakan hosting dari blogger, bisa upload gambar langsung dari blogger biar tidak repot, berikut caranya.
Kalian masuk ke akun blogger masing-masing setelah itu klik halaman baru, setelah terbuka jendela halaman baru tinggal upload gambar yang kalian gunakan sebagai banner, seperti biasa kalau binggung lihat gambar di bawah ini.
Setelah kalian upload fotonya, lihat di opsi panel tombol di situ ada Compose dan HTML kalian klik HTML, setelah itu kalian ambil alamat gambar saja di ambil setelah kode <a href= (https sampai kode jpg) kalau binggung lihat gambar yang sudah saya tandai di bawah ini.
Kalau
proses diatas sudah selesai tinggal kalian copy link gambar yang sudah di buat
tadi dan kalian paste di kode HTML di bawah ini, liat dengan teliti agar nantinya
hasil tidak menggalami Error.
<div style="text-align: center;">
<img alt="Catatan Mas Arif" border="0"height="240" src="https://1.bp.blogspot.com/-h0pU_vvLg1Y/XZAFIgcOnXI/AAAAAAAABVk/xr53rx9ATM401Pq-NgNkPrejHdtqjt6FACLcBGAsYHQ/s1600/Logo%2BBlog%2BArdintoro.jpg" width="320" /></div>
<div style="text-align: center;">
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="COPY CODE" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="110" style="height: 50px; margin: 0px; width: 200px;" wrap="VIRTUAL"> <center>
<a href="https://ardintoro.com/" onmouseover="window.location=this.href" title="Tukeran link"><img border="0" height="240" src="https://1.bp.blogspot.com/-h0pU_vvLg1Y/XZAFIgcOnXI/AAAAAAAABVk/xr53rx9ATM401Pq-NgNkPrejHdtqjt6FACLcBGAsYHQ/s1600/Logo%2BBlog%2BArdintoro.jpg" width="320" /></a></center>
</textarea></div>
</form>
</div>
</div>
Keterangan:
Tulisan yang berwarna Hijau kalian ganti dengan nama blog sobat, tulisan
warna Merah sobat ganti dengan link atau
alamat foto yang kalian upload di Blogger dan tulisan warna Biru sobat ganti dengan alamat blog kalian masing-masing.
Selanjutnya
kalau kalian sudah ganti semua sesuai petunjuk, tinggal taruh kode HTML-nya
ke postingan kalian, untuk menaruh kode HTML banner /
iklan ke dalam postingan, pertama kalian masuk ke dasbor blog sobat, setelah itu sobat lanjut masuk dan
klik tombol buat entri baru kalian klik aja,
kalau binggung liat gambar berukut.
Gimana sobat blogger mengerti sampai di sini, kalau
sudah mengerti kita akan masuk pada postingan baru, di situ ada tombol COMPOSE
dan HTML sobat pilih saja yang HTML lihat gambar.
Kalau sudah sampai di tahap ini, tinggal
paste saja di kolom yang HTML, dan kalian klik seve untuk lihat hasilnya, seperti
contoh di bawah ini.
Hasil dari kode di kotak "Copy Code", bila di tempel di postingan nanti hasilnya seperti gambar di bawah ini, metode ini bisa kalian terapkan dalam membuat iklan untuk mempromosikan praduk (tinggal di otak-atik saja kode HTML-nya dan di sesuaikan foto iklan-nya), coba kalian arahkan kursor ke gambar (jangan di klik), bagus to hasilnya hehe.


Hasil dari kode di kotak "Copy Code", bila di tempel di postingan nanti hasilnya seperti gambar di bawah ini, metode ini bisa kalian terapkan dalam membuat iklan untuk mempromosikan praduk (tinggal di otak-atik saja kode HTML-nya dan di sesuaikan foto iklan-nya), coba kalian arahkan kursor ke gambar (jangan di klik), bagus to hasilnya hehe.

Hemmm
jujur arikel ini adalah salah satu artikel tutorial yang lumayan susah yang pernah saya buat,
karena membutuhkan ketelitian tinggi, harus bolak-balik edit kode HTML Java Script-nya karena cari kecocokan, tapi yaaa nggak apa-apa lah, demi sobat
bloger semua hehe.
Tibalah
di pengujung acara nulis pada hari ini, bila mana sobat blogger masih binggung
dalam mempraktekannya, tidak ada salahnya untuk bertanya di kolom komentar. Pepatah bilang "Malu bertanya sesat di
kamar", hehe. Makanya jangan malu-malu dalam bertanya ya?, agar
berhasil, mungkin begitu saja by … by …
Kalau model iklan seperti ini kasihan pengunjung. Dengan kesentuh mouse langsung deh menuju ke situs iklan tersebut.
ReplyDeleteHia, kan tujuanya ingin dpatkan banyak viewer kwkwk :)
DeleteTapi bisa di ilangin kok gan efek on mouse over, tinggal edit aja script nya :)
Saya sendiri juga pernah membuat artikelnya , entah tahun berapa kemungkinan tahun 2012, tapi jarang kode seperti ini yang menggunakannya.
DeleteHia gan, kode nie biasanya cuma di gunakan tuk link exchange :)
Deletebiar blognya rame :)