Cara Membuat Banner Iklan di Blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code

Contoh Banner atau Iklan

Hai Sobat bagaimana kabarnya? pasti baik-baik kan? Alhamdullilah kalau baik, kebetulan hari ini saya masih libur, dari pada nganggur nggak ada kerjaan, yaaa bikin tulisan dikit-dikit hehe, soalnya kalau sudah masuk sekolah, nggak 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 pernah nggak 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 nggak 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 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 nggak 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 nggak 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 penyimpanan 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 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. 

<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>

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 semua hehe.

Tibalah di pengujung acara nulis pada hari ini, bila mana Sobat masih binggung dalam mempraktekannya, nggak 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 …

Baca Juga: Cara Mudah Membuat Header yang Bisa Ngelink Agar Blog Terlihat Cantik

Share this post