Membuat Banner Iklan Di Blog

Diposkan oleh Hery Prasetyo Sunday, May 2, 2010
بسم الله الرحمن الرحيم

Mempunyai blog banyak fungsinya, dan ketika blog kita telah ramai pengunjung maka akan dapat menarik minat pemasang iklan untuk mengiklankan produk atau situsnya. memasang banner iklan di sidebar adalah salah satu pilihan tempat yang paling tepat.

Membuat Banner Iklan Di Blog
Membuat banner iklan terlihat rapi di sidebar yang berbentuk kotak-kotak kecil dengan sentuhan JQuery menjadikannya sangat indah dan lebih menarik. silahkan lihat demo berikut dan sorotkan mouse ke salah satu gambar :

Membuat Banner Iklan Di Blog

Cara membuat banner iklan seperti di demo adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.4.2, jika belum silahkan copy JQuery versi 1.4.2 dibawah ini dan letakkan dibawah <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

- Copy paste script berikut dibawah JQuery :

<script src='http://hapiajavascript.googlecode.com/files/banner-box.js' type='text/javascript'/>

- Copy paste code CSS berikut di atas ]]></b:skin> :

.bannerHolder{
/* The main banner unordered list */

height:270px;
width:270px;

float:left;
margin:20px 15px;
padding:10px;
background:#f7f7f7;
border:1px solid #eee;

/* CSS3 rounded corners */

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

.bannerHolder div{
/* Disabling the bullet of the div elements: */
list-style:none;
display:inline;
}

.banner{
/* The banner divs */
position:relative;
width:125px;
height:125px;
overflow:hidden;
float:left;
margin:5px;
}

.banner img{
/* The banner divs */
display:block;
border:none;
}

.banner div{
/* The dark animated divs */

position:absolute;
z-index:100;
background-color:#222;
width:60px;
height:60px;
cursor:pointer;

/* Setting a really big value for border-radius
will make the divs perfect circles */

-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}

/* Positioning the animated divs outside the
corners of the visible banner area: */

.banner .cornerTL{ left:-63px;top:-63px; }
.banner .cornerTR{ right:-63px;top:-63px; }
.banner .cornerBL{ left:-63px;bottom:-63px; }
.banner .cornerBR{ right:-63px;bottom:-63px; }

.banner p{
/* The "Visit Company" text */

display:none; /* hidden by default */

left:0;
top:37px;
width:100%;
z-index:200;
position:absolute;

font-family:Tahoma, Arial, Helvetica, sans-serif;
color:white;
font-size:11px;
text-align:center;
cursor:pointer;
}

- Simpan template.

- Kemudian pergi ke "Elemen Laman".
- Klik "Tambah Gadget" dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :

<div class="bannerHolder">
<div class="banner">
<a href="http://LINK-IKLAN-ANDA.com"><img width="125" height="125" alt="JUDUL GAMBAR" src="http://URL-BANNER-ANDA.gif" /></a>
<p style="display: none;">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</p>
<div class="cornerTL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerTR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerBL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerBR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
</div>
<div class="banner">
<a href="http://LINK-IKLAN-ANDA.com"><img width="125" height="125" alt="JUDUL GAMBAR" src="http://URL-BANNER-ANDA.gif" /></a>
<p style="display: none;">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</p>
<div class="cornerTL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerTR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerBL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
<div class="cornerBR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div>
</div>
<div class="banner">
<a href="http://LINK-IKLAN-ANDA.com"><img width="125" height="125" alt="JUDUL GAMBAR" src="http://URL-BANNER-ANDA.gif" /></a>
<p style="display: none;">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</p>
<div class="cornerTL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerTR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerBL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerBR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
</div>
<div class="banner">
<a href="http://LINK-IKLAN-ANDA.com"><img width="125" height="125" alt="JUDUL GAMBAR" src="http://URL-BANNER-ANDA.gif" /></a>
<p style="display: none;">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</p>
<div class="cornerTL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerTR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerBL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
<div class="cornerBR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div>
</div>
</div>

- Simpan.

Tutorial asli adalah untuk situs yang berbasis bahasa PHP. tapi HAPIA Mesir modifikasi sehingga bisa dipraktekkan di blog yang basis bahasanya HTML. untuk tutorial originalnya silahkan kunjungi Simple Banner Rotator With PHP, jQuery & MySQL.

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

35 Responses to Membuat Banner Iklan Di Blog

  1. aryadevi Says:
  2. ok sobat, ^_^ kami pun sudah ada pasang iklan tuh, cuma atu atunya hehehehe...

     
  3. Rock Says:
  4. sayang blogku masih sepi... wkwkwk...
    aku simpan kodenya dulu kawand...

     
  5. Aku belum ber-iklan niy sampai sekarang.. hehehe

     
  6. Pengen ngintip demonya ah... ^_^

     
  7. terima-kasih sahabat atas tutorialnya, ijin disimpan dulu. Salam

     
  8. akhatam Says:
  9. Wah keren sekali mas Hapia... Tx triknya!

     
  10. buwel Says:
  11. wah thankyu neh, keep share!

     
  12. achen Says:
  13. duh sayang belum punya iklan.. he

     
  14. sehat-mu Says:
  15. ok sobat..
    keren ini..
    patut di cuba serta diterapkan..

     
  16. oby Says:
  17. cucook nih buat aku yg mau bikin spot iklan...
    tp sayang... ku lagi ol di warnet komp. rumah gi rusak T_T
    males login ke blogger nih
    ijin simpen ke plash dulu yah mas.. hapiaa

     
  18. keren mas..
    nice trik..

     
  19. ok dach master,, sppp,, ijin tkp

     
  20. ryan-ss Says:
  21. bisa dicobaneeh,,makasih sharenya...nice share sobat...

     
  22. achen Says:
  23. jquery eamng hebad

     
  24. buwel Says:
  25. keren dah bannernya...

     
  26. Bunglon Blog Says:
  27. asalamualaikum...semakin menarik dengan polesan jquery ya sob
    mff baru sempet hadir koneksi super2 lemot huh...
    Sukses Slalu!

     
  28. yayah Says:
  29. wah jadi bagus ya...

     
  30. Beben Says:
  31. wew...great post...keep posting brooo

     
  32. Gema Says:
  33. ok juga, mungkin nati kalo blognya dah rame bisa ditambahin iklan juga

     
  34. sehat-mu Says:
  35. ternyata pas diterapkan hasilnya...
    keren abis sobat...
    terimaksih banyak sobat..

     
  36. Rizky2009 Says:
  37. keren nih master, kalau aq pasang d blog q kira2 ada g yah yang mau pasang iklan d blog q cz masalahnya blog q g seramai blog2 yang lain

     
  38. Nugraha Says:
  39. Waah.. iya ya, indah dan rapi kalau disusun seperti itu.

     
  40. berkunjung lagi sobat..

    gag tambah berat ya jadi loading blog kita?

     
  41. HAPIA Mesir Says:
  42. TUKANG COLONG@ silahkan dicek di demonya aja sob..gmn loadingnya..

     
  43. klo punyaku pada mau nggak ya pasang iklan hehe...

     
  44. lukman Says:
  45. salam blogger,
    sekedar info: ada kontes menarik berhadiah samsung corby dan ipod shuffle di gugling.com

     
  46. GADO GADO Says:
  47. thx ya udah share. Kapasitasnya besar ga? Memperlambat loading ga? Thx ya..

     
  48. zonda Says:
  49. thanks sobat keren postingan kali ini

    aq cobain entar deh...

     
  50. Assalamu'alaikum..
    Kiyai infonya baguuuuus.....

     
  51. HAPIA Mesir Says:
  52. LDK STAI Siliwangi Bandung@ waalaikum salam pak ust...semoga bermanfaat pak ust...

     
  53. Ega-Priatma Says:
  54. Wah... mantabs.. pas banget buat tempat iklan, jadi lebih elegan

     
  55. Tips-nya oke sobat boleh juga di praktekkan membuat banner dengan jquery-nya

     
  56. mas hapia...
    caranya supaya gak,, iklannya gak jejer 4, tp horizontal gimana yah??

    maksudnya.. gak ber empat gitu...
    tp berbentuk horizontal

     
  57. Mkasih atas informasinya.

     
  58. Bawang merah Says:
  59. Top markotop..................

     

Post a Comment