Download MP3

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:
    May 2, 2010 at 6:27 PM

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

     
  3. Rock Says:
    May 2, 2010 at 10:10 PM

  4. sayang blogku masih sepi... wkwkwk...
    aku simpan kodenya dulu kawand...

     
  5. catatan kecilku Says:
    May 3, 2010 at 9:40 AM

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

     
  7. the others... Says:
    May 3, 2010 at 9:46 AM

  8. Pengen ngintip demonya ah... ^_^

     
  9. BRI Jakarta Veteran Says:
    May 3, 2010 at 10:17 AM

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

     
  11. akhatam Says:
    May 3, 2010 at 10:50 AM

  12. Wah keren sekali mas Hapia... Tx triknya!

     
  13. buwel Says:
    May 3, 2010 at 11:02 AM

  14. wah thankyu neh, keep share!

     
  15. achen Says:
    May 3, 2010 at 11:02 AM

  16. duh sayang belum punya iklan.. he

     
  17. sehat-mu Says:
    May 3, 2010 at 12:24 PM

  18. ok sobat..
    keren ini..
    patut di cuba serta diterapkan..

     
  19. oby Says:
    May 3, 2010 at 12:47 PM

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

     
  21. Komputer Tips- soul Says:
    May 3, 2010 at 6:24 PM

  22. keren mas..
    nice trik..

     
  23. icantulang.com Says:
    May 3, 2010 at 6:26 PM

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

     
  25. ryan-ss Says:
    May 3, 2010 at 6:38 PM

  26. bisa dicobaneeh,,makasih sharenya...nice share sobat...

     
  27. achen Says:
    May 3, 2010 at 7:39 PM

  28. jquery eamng hebad

     
  29. buwel Says:
    May 3, 2010 at 7:40 PM

  30. keren dah bannernya...

     
  31. Blogger Says:
    May 3, 2010 at 8:52 PM

  32. asalamualaikum...semakin menarik dengan polesan jquery ya sob
    mff baru sempet hadir koneksi super2 lemot huh...
    Sukses Slalu!

     
  33. yayah Says:
    May 4, 2010 at 4:35 AM

  34. wah jadi bagus ya...

     
  35. Beben Koben Says:
    May 4, 2010 at 5:10 AM

  36. wew...great post...keep posting brooo

     
  37. Gema Says:
    May 4, 2010 at 6:20 AM

  38. ok juga, mungkin nati kalo blognya dah rame bisa ditambahin iklan juga

     
  39. sehat-mu Says:
    May 4, 2010 at 8:27 AM

  40. ternyata pas diterapkan hasilnya...
    keren abis sobat...
    terimaksih banyak sobat..

     
  41. Rizkyzone Says:
    May 4, 2010 at 8:30 AM

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

     
  43. Nugraha Says:
    May 4, 2010 at 12:33 PM

  44. Waah.. iya ya, indah dan rapi kalau disusun seperti itu.

     
  45. TUKANG COLONG Says:
    May 4, 2010 at 11:27 PM

  46. berkunjung lagi sobat..

    gag tambah berat ya jadi loading blog kita?

     
  47. Hery Prasetyo Says:
    May 5, 2010 at 11:35 AM

  48. TUKANG COLONG@ silahkan dicek di demonya aja sob..gmn loadingnya..

     
  49. Blogger Terpanas Says:
    May 5, 2010 at 6:54 PM

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

     
  51. lukman Says:
    May 7, 2010 at 3:40 AM

  52. salam blogger,
    sekedar info: ada kontes menarik berhadiah samsung corby dan ipod shuffle di gugling.com

     
  53. GADO GADO Says:
    May 7, 2010 at 1:37 PM

  54. thx ya udah share. Kapasitasnya besar ga? Memperlambat loading ga? Thx ya..

     
  55. zonda Says:
    May 8, 2010 at 12:32 PM

  56. thanks sobat keren postingan kali ini

    aq cobain entar deh...

     
  57. LDK STAI Siliwangi Bandung Says:
    May 9, 2010 at 4:13 PM

  58. Assalamu'alaikum..
    Kiyai infonya baguuuuus.....

     
  59. Hery Prasetyo Says:
    May 9, 2010 at 7:39 PM

  60. LDK STAI Siliwangi Bandung@ waalaikum salam pak ust...semoga bermanfaat pak ust...

     
  61. Ega Priatma Says:
    May 10, 2010 at 9:34 AM

  62. Wah... mantabs.. pas banget buat tempat iklan, jadi lebih elegan

     
  63. Bisnis Fantastis Says:
    May 10, 2010 at 9:57 AM

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

     
  65. Oby Syam Says:
    May 11, 2010 at 9:36 AM

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

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

     
  67. telur asin brebes Says:
    January 19, 2011 at 3:43 PM

  68. Mkasih atas informasinya.

     
  69. Bawang merah Says:
    January 19, 2011 at 3:46 PM

  70. Top markotop..................

     

Post a Comment