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

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, Tinypic atau yang lain tinggal kalian searching saja di Google tinggal pilih, tapi saya merekomendasikan Tinyipic dari pada Photobucket karena Photobucket sekarang berbayar, tidak geratis lagi seperti dulu, untuk mendaftar akun Tinyipic bisa Disini.

Setelah masuk pada akun Tinyipic tinggal kalian upload foto yang telah kalian buat tadi, untuk di jadikan banner  / iklan, kalau binggung lihat gambar .

Membuat Banner Iklan di blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code

Setelah kalian upload fotonya, lihat di bawah di situ ada kolom DIRECT LINK, itu adalah link atau alamat foto yang kamu upload tadi, tinggal kalian copy link-nya yang sebentar di pakai untuk melengkapi kode HTML / Java script, lebih jelas nya lihat gambar di bawah ini.

Membuat Banner Iklan di blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code

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="http://i64.tinypic.com/n221ra.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="http://i64.tinypic.com/n221ra.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 Tinyipic 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.

Membuat Banner Iklan di blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code

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.

Membuat Banner Iklan di blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code

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. 

Catatan Mas Arif

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 …

Berlangganan update artikel terbaru via email:

4 Responses to "Cara Membuat Banner Iklan di Blog Menggunakan Efek OnMouseOver dengan Tombol Copy Code"

  1. Kalau model iklan seperti ini kasihan pengunjung. Dengan kesentuh mouse langsung deh menuju ke situs iklan tersebut.

    ReplyDelete
    Replies
    1. Hia, kan tujuanya ingin dpatkan banyak viewer kwkwk :)

      Tapi bisa di ilangin kok gan efek on mouse over, tinggal edit aja script nya :)

      Delete
    2. Saya sendiri juga pernah membuat artikelnya , entah tahun berapa kemungkinan tahun 2012, tapi jarang kode seperti ini yang menggunakannya.

      Delete
    3. Hia gan, kode nie biasanya cuma di gunakan tuk link exchange :)

      biar blognya rame :)

      Delete

Jika ada yang Ingin Anda Tanyakan Terkait Artikel di atas Silahkan Bertanya Melalui Kolom Komentar Berikut ini!, dengan Ketentuan :

1. Berkomentarlah dengan Sopan (No Spam, Sara dan Rasis).
2. Komentar di Moderasi, bila berkomentar tidak sesuai dengan kebijakan Blogger maka tidak di terbitkan!.
3. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
4. Happy Blogging 🙂.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel