Recent Posts

Rief, seorang yang bermimpi menjadi penulis, yang ingin merubah dunia dengan tulisan! Dari yang aku lihat, dengar, rasa dan pikir lahirlah halaman ini yang sebagian isinya merupakan pengalaman pribadi, Selamat Membaca

Selasa, 05 November 2013

Cara membuat Banner menggunakan efek OnMouseOver dengan tombol Copy Code (Tukaran Link)

Contoh Banner Menggunakan Efek OnMouseOver
        Hari nie gue libur tanggal merah horeeeeee, tapi bosan juga di rumah, cuma nonton ama dengerin music aja, tapi tau nggak sobat Bloger dalam rangka apa hari nie libur??? Nie hari Selasa, 05 November 2013 adalah bertepatan dengan tahun baru Islam atau Hijriah 1435 H (Orang Jawa bilang 1 Shuro), tapi di daerah gue Timika–Papua kagak ade bedanya seperti hari–hari biasa aja, mungkin pengarauh Islam cuma minoritas kali ya, padahal di daerah lain Indonesia rame ntu seperti yang gue liat di Tipi tadi, ada Grebek Suro, Jamasan pusaka dan Festifal–festifal Islami gitu, jadi kepeingin pulang kampong nie, sabar–sabar Rief, (wong sabar iku subor). 

          Terlalu banyak Curcol ya gue nie hehehe, sebenarnya hari nie gue kagak mbahas tentang tahun baru Islam atau Malam Satu Suro (dengerinnya horror ya sobat kayak film Susana jaman dulu) tapi yaaa, biar postingan-nya kagak keliatan sedikit–sedikit amat gitu lha sobat, olah-raga aja butuh pemanasan masak nulis nggak, Heemmm tibalah saatnya pada pembahasan yang lebih serius, ayo di simak ya sobat bloger :)))
 
             Sobat bloger pernah nggak kalian masuk di suatu blog dan mendapati ada banner yang bila kalian sentuh dengan kursor udah nge-link ke alamat blog mereka (pernah–pernah) na ntu tema pembahasan kita pada hari nie yaitu membuat Banner OnMouseOver dengan tombol Copy All, sebenarnya trik nie merupakan hasil modifikasi gue, setelah gue otak atik (Bertapa) seharian :))) e ternyata jadi juga, dan banner nie sangat cocok untuk  Link Exchange atau tukaran Link seperti di Postingan Gue yang nie “Link Exchange” dan ntuk para master Ngeblog maaf ya kalo nie terlihat basi, tapi tujuan gue cuma ingin berbagi aja, moga membantu! ayo di simak sobat bloger jangan sampe terlewatkan ya,,, Cikebrot :
  • Sebelum sobat membuat Kode HTML-nya yang perlu sobat siapkan adalah gambar tuk banner nya, gambar apa yang kalian gunakan :))) Edit dulu gambarnya, kalo gue biasanya mengunakan Adobe Photoshop atau PhotoScape untuk editnya.
  • Setelah uda jadi gambar bannernya sobat bloger harus meng Upload-nya ke penyimpanan foto Online yaitu bisa Photobucket atau yang lain banyak tu di Pak Dhe Google tinggal pilih, untuk mendaftar akun Photobucket bisa Disini.
  • Setelah masuk pada akun Photobucket tinggal kita Upload foto kita tuk jadi Banner lihat gambar di bawah nie.
  • Setelah Upload fotonya, kalian lihat di sebelah kanan gambar di situ ada DIRECT, ya ntu Link atau alamat foto yang kamu Upload tadi, tinggal kamu copy Link-nya yang sebentar di pake perlengkapan code HTML untuk Banner-nya lebih jelas nya lihat gambar.
  • Kalo proses diatas uda selesai tinggallah kita copy link gambar yang kita buat tadi dan kita taroh di kode HTML di baewah ini, liat dengan teliti ya sobat bloger agar tidak Eror nantinya. 
Kode HTML-Nya 
 ____________________________________
<div style="text-align: center;">
<img alt="Cinta Sejati" border="0" height="240" src="http://i1287.photobucket.com/albums/a622/rief151/CintaSejatiBlogs_zps7455328e.png" 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="http://ariefcinta.blogspot.com/" onmouseover="window.location=this.href" title="Tukeran link"><img border="0" height="240" src="http://i1287.photobucket.com/albums/a622/rief151/CintaSejatiBlogs_zps7455328e.png" width="320" /></a></center>
</textarea></div>
</form>
</div>
</div>
     ____________________________________
    • Keterangan : Tulisan yang Berwarna Hijau Sobat ganti dengan Nama Blog sobat, Tulisan warna merah Sobat ganti dengan Link atau alamat Foto yang kalian Upload di Photobucket tadi dan tulisan warna Biru sobat ganti dengan alamat Blog kalian masing - masing.
    • Selanjutnya kalo kalian sudah ganti semua yang di atas, tingal dah di taroh kode HTML-nya ke postingan Tukaran Link kita, seperti nie Contohnya.
    • Penting Untuk menaroh Code HTML Banner ke dalam postingan blog, pertama kalian masuk ke dasbor sobat tau to, liat gambar di bawah ini :) 
    • Setelah tu Sobat lanjut  masuk & klik di gambar pencil, di situ ada tulisan buat entri baru kamu klik aja, Liat Gambar.
    • Gimana sobat mengerti sampai sini, ya kalau sudah mengerti kita akan masuk pada postingan baru, di situ ada tombol COMPOSE & HTML Sobat pilih yang HTML lihat gambar.
    • kalo sudah sampai tahap ini tinggal paste aja deh di kolom yang HTML nya itu, & klik Seve ntuk Lihat hasilnya.
    Nie Contoh Hasil-nya
    Cinta Sejati
               
               Hemmmm Jujur arikel nie adalah artikel yang paling susah yang pernah gue buat, karena membutuhkan ketelitian yang sangat tinggi, ya nggak pa - pa lha, kan demi sobat bloger, tibalah di pengujung acara nulis, pada pagi sampai sore nie dan bila mana sobat bloger masih binggung dalam mempraktekannya, nggak ada salahnya  untuk bertanya di kolom komentar di bawah nie, pepatah bilang "Malu Bertanya Sesat di Kamar" hehe, makanya jangan malu - malu dalam bertanya agar berhasil, mungkin begitu aja ya sobat bloger dan Selamat Tahun Baru Islam, bagi yang merayakan Byyy...Byyy.



    Ditulis Oleh : Arif Rudiantoro

    Arif Rudiantoro Anda sedang membaca artikel tentang Cara membuat Banner menggunakan efek OnMouseOver dengan tombol Copy Code (Tukaran Link). Oleh: Arif Rudiantoro. Terimakasih atas kunjungan Anda, serta kesediaan Anda membaca artikel ini. Kritik dan saran serta Pertanyaan dapat anda sampaikan melalui kotak komentar. ↓↓↓ Backlink Please ↓↓↓

    ARTIKEL TERKAIT:

    6 komentar:

    1. OnMouseover itu kya apa mas? kode htmlnya doang yang ngerti

      BalasHapus
      Balasan
      1. Ntu Efek Ngelink sob, :waaa: bila orang baru nyentuh (belum ngeklik) uda ngelink ke alamat kita Gietu, :)

        Hapus

    "TERIMAKASIH TELAH BERKOMENTAR DI BLOG SEDERHANA INI"