Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
AdSense

Membuat Iklan Teks ala Google AdSense

Membuat iklan teks sendiri seperti Google AdSense.
Iklan Teks ala Google AdSense - Setelah modifikasi template, saya mencoba membuat iklan teks yang menyerupai GA. Ternyata banyak sahabat yang nanya cara pembuatannya. Bahkan ada sebagian yang maling kode diam2 :P adsense

Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam2 mending saya bagiin deh tutorialnya.

Penampakannya kurang lebih seperti gambar ini :

adsense


Langkah 1 : Simpan kode ini di atas </head>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

Langkah 2 : Simpan kode CSS ini di atas ]]></b:skin> atau </style>

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

Langkah 3 : Simpan kode ini pada Widget HTML / JavaScript

<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
            <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>     
</div>

Silahkan edit judul dan link.
#AdSense

195 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Ambil pertamax dulu ahh
    1. Sekarang baru komen hehehehe... :D
      Keren kang...bakalan banyak yang ketipu tuh wkwkwkwk
    2. kalau begitu kedua aja deh :)
  2. Hehehe.. keren banget kang, kalo mau buat Iklan Gambar nya gimana :D
    1. kalau gambar sih pake flash
  3. Akhirnya request iklan ala google adsense ini dibuat juga Kang Ismet...terima kasih atas bagi-bagi ilmunya ini Kang
    1. heheh.. sama2 pak ferry
  4. weisss keren kang..!!
  5. Kang aku Ijin Share ya :)
    1. jawaban kang ismet pasti gini (silahkan, asal sumber disertakan) heheheh :-bd
  6. Wah Jualan Iklan juga ni....kirain dulu iklan dari mbah Google rupanya bukan wakakaka
    gak Ngeh kemarin2nya ni wkwkwkw....baru nyadar
    1. banyak yang ketipuuuu :)
  7. Bisa di coba nih gan xD
    buat di pasang di blog saya xD
    Oya gan cara buat notif bisa di share gan??
    Thanks sebelemnya
    1. Iya, setuju... kapan share notif nya kang??? hehehehe
  8. ijin comot scriptnya mas, mau saya simpen dulu sebelum habis :)
  9. nah akhirnya diposting juga, hehe
    emang hebat Kang Ismet
  10. gk bisa ke 1 ke 11 pun jadi.

    keren mas :D
  11. wah keren nih makasih ya bang udah sharing
    1. Ayoo Sobat @Dindin sama-sama berkreasi
      dengan scriptnya Kang Ismet. mumpung belum
      Di tutup hhhh salam humor...
  12. Karak mah arek di intip, geus dijieun tutorialna, thanks kang :D
  13. Saya simpan dl skripnya, terima kasih sudah berbagi.
  14. Wah, kok di halaman home iklan nya ga berjalan baik kang ("undefined")? padahal di single post nongol bagus lho iklannya...
    mohon di cek dimana salahnya http://id.wispop.com
    1. coba isinya di edit dulu
  15. bagus, akhirnya di share tutorialnya
  16. Templatenya kereeennn. Pingin. *eh... maaf OOT.
  17. Yac..begitulah resikonya jadi panutan, kalo ilmunya nggak segera di bagi ya terpaksa di gondol...he he... kang minta khalalnya, terlanjur ketahuan...
  18. Sip :-d jadinya lebih keren dari biasanya :D
  19. kang maaf OOT blognya di buka di laptop saya sidebarnya melorot.

    SS : http://prntscr.com/229mbg
    1. makasih infonya... screen resulution nya berapa ya? biar saya benerin
  20. Sok marangga anu sok noong .. ayeuna di bagikeun haha
    1. Nyobian yeuh Kang Imet, markotop lah
      Kang Ruly tos nyobian script ieu acan?
  21. makasih kang -> http://free-btemplate.blogspot.com/
    1. Cuma numpang lewat ya kak ?
  22. Ijin nyotoh templatenya gimana kang, mirip ga??
  23. ada kemungkinan yang pd komen disini sebagian besar para mastah jg (ane gak termasuk lho...) hehe......
    1. wkwkw.. secara tidak langsung... mastah dong :D
  24. keren euy, langsung capcust... !
  25. wah keren kang, saya izin nyoba dulu ^_^
    makasih udah share!
    - salam damai
    [ tread komennya mirip ama dora the explorder @@,
    1. ga apa2 lah... saya the explorer :P
  26. langsung saya pake kang.

    kunbal ya kang.
  27. bagus nih kang ijin share ulang boleh kang?
  28. mudah aja kalau mau diapprove sama google adsense..
    taruh aja trik ini ke dalam blog... wkwkwkwk
    1. wkwkkwkw... manipulasi :D
  29. Membuat iklan nih Kang, nyoba simak
    barangkali suatu saat ada perlunya. tinggal
    terapin di blog saya. terima kasih Kang Ismet
  30. Maaf OOT | Kang blognya udh sya follow, follow back ya.. hilbramkurnia3.blogspot.com
    #berharapdiapprove :)
  31. aduh kang blog nya tambah keren,
    pengen dong kang

    hihih
  32. kok gak buka tutup ya kaya punya kang ismet :/
    1. jangan lupa untuk menambahkan jQuery
  33. hadew euy, mantap kang pokonamah,
  34. Mantap kang, saya coba dulu :D
  35. $.fn.iklanaccordion = function(settings) {
    settings = jQuery.extend({
    active: 1,
    sUpSpeed: 40,
    sDownSpeed: 40,
    sUpEasing: null,
    sDownEasing: null
    }, settings);

    saya menemukan kejanggalan pada jera waktu yang begitu cepat setelah cursor poin disentuh. mungkinkah terjadi disini sUpSpeed: 40 dan sDownSpeed: 40
    1. coba aja ganti menjadi 200
  36. kereeen..
    bikin periklanan sendiri wae kang.. :v
  37. om... jawab dong pertanyaan q di http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html
    1. udah sob.. sorry kelewat
  38. oke kang ismet, mantap
  39. Bagus banget model iklan teksnya, kang ismet. Minta izin bookmark dulu deh. Kalau sudah ramai blog saya baru pakai ini. Terima kasih banyak sharingnya :)
  40. Banyak juga ya codenya, kira-kira di blog jadi berat gak ya ?
    1. berat sih ngga, tapi kalau penambahan JS, CSS dan HTML ya ada pengaruh dikit :)
  41. ijin re-post kang :)
    1. silahkan sob
  42. Kasih dong triknya buat icon notif seperti di menu kang :D
    1. kalau cuma iconnya sih pake font awesome :D
  43. maaf OOT, blog saya waktu mau masang alxa tafick link, kok ranks dan link ing -nya no data?? =(
    1. kalau saya, suka kembali ke alexa dan buat widget ulang.. biasanya berhasil
  44. Maaf OOT lagi, ada gk tutor membuat notifikasi ??
    1. Iya Kak, hi aku punya pertanyaan tambahan tuk hal ini, jika ada visitor baru atau cockie browser baru di reset kok begini ya tampilannya :
      http://3.bp.blogspot.com/-RWZdH43c-Qo/Unsp1kmTk5I/AAAAAAAAJN0/kBc245dGpmg/s1600/Kang+Ismet.jpg

      Ini juga terjadi pada NOTIFIKASI blog aku kak, mohon pencerahannya ?
  45. Pre yg akang gak ngebungkus rapi tuh kang
    1. ga ngebungkus rapi kumaha kang?
  46. gimana sih cara membuat menu disamping seperti kang ismet?, mohon tutorialnya!
    1. kalau ada waktu, saya share
  47. Keren kang, sayamah kabita ku templatena, mnu dipinggir di tambah notifikasinya yang mirip google, di share yah kang.
  48. Benar benar ketipu.......saya kira memang GA...oh..ya kang notifikasi Comment nya izin nyomot.habis nunggu keluar tutorialnya kelamaan bingung juga sich jika ada yang nanya cara pembuatan nya sumbernya aja belum ke luar..hehe he he
    1. banyak yang ketepuuuuuu
    2. baru nyadar,, :D mirip banget,, :D

      izin ikut ah, izin nyomot juga ya kang notifikasi commentnya... ehehee
      bingung cari2 tutor nya gak nemu juga.. :'(
  49. Bagus Prehantoro
    Komentar ini telah dihapus oleh pengarang.
  50. oalah tak kira itu iklan dari GA, ternyata iklan dari Kang Ismet tho. Wah siip kang
    Maaf oot, kang gimana mengatur style dari gambar posting agar "clear: both;" menjadi "clear: left;" secara otomatis, soalnya harus edit satu persatu
    1. paling simple sih menggunakan jquery :

      $('.post-body img').css('clear', 'left');
  51. wah keren kang ismet, postingannya keren!
    - salam damai!
  52. Mantap kang ismet :-d :-d
  53. hehehehe trik keren...
    oh ya kang, monggo di cek gmail nya ya..
  54. Saya malah baru tahu ini mas, tadi pas blogwalking nemu ginian, taudah sikat aja wes hehehe
  55. jempol deh, Artikel nya bagus.
    sangat berguna sekali.
  56. Wiiiihhhh,, kangismet makin sukses aja nih,, blognya makin keren.. dapet inspirasi dari mana nih kang??
    1. dari flat UI design :)
  57. selalu update.... bkin sneng kita semua
  58. wah keren kang!
    - salam damai!
    - Rio Us
  59. udah lama gk main blog ternyata sudah banyak yang berubah. Para mastah pada redesign :-d

    Keren kang manipulasina, abdi ge katipu manawi teh GA :).
    1. hehe kamana wae atuh?
  60. Kang loadingna beda dari biasana asa rada ngaregeh / repot
    1. aya JS nu dibongkar teuacan dikompres kang :)
  61. kalau iklan google adsense buatan sendiri seperti ini biaya perkliknya berapa ya kang? :-) trs bisa dibanned gak? hihihi :D
    1. wkwkkwk.. perkliknya gratis
  62. Ijin mencoba ya bro , baru di di dunia blogging , http://wajahnusantaraku.blogspot.com
  63. izin copas kang
  64. makasih kang,, udah coba cuma tidak gerak.. :D
  65. Kang saya sudah coba pasang di blog saya.
    Sudah saya test di google chrome sama di IE hasilnya bagus, cuman di firefox ko gak jalan.
    Apa memang gak support firefox?
    1. punya saya di FF bisa jalan ko kang.. kan scriptnya sama
  66. wihh keren ya (y) mirip kayak iklan GA gan :)
  67. Postingan ini kan udah seminggu. boleh di posting ulang gak Kang di bolog saya :)
    1. begitu saya posting, diposting ulang juga ga masalah :D
  68. I will try it guys
    By http://templasa.blogspot.com/
  69. mas bro, aku coba di jobdescindo[dot].blogspot[dot]com kok ndak bisa ya. tolong dicekin ya mas bro yang salah kira2 dimana
  70. mas bro, aku coba di jobdescindo[dot].blogspot[dot]com kok ndak bisa ya. tolong dicekin ya mas bro yang salah kira2 dimana
  71. Keren kang, kirain iklan adsense beneran tadi
  72. izin make kang....ketipu saya kang hehe...
  73. Efeknya gimana, apakah banyak yang ngeklik?
    1. ga ada urusannya sama jumlah klik, soalnya ini untuk iklan mandiri
  74. Salam kenal kang Ismet,izin comot ya scrip iklan teks ala google adsensenya.Sangat menarik jika dipasangkan di blog saya,thanks...
    1. Kang,terjadi bentrok di Template saya jadinya ngak bisa tampil maksimal. Apa ada solusi mengatasinya tanpa merubah widget yg lain?
  75. mantab amat mas iklannya...
  76. Benar-benar mantaap. Tapi Kang, apakah ini tidak khawatir menjiplak Google Adsense karena itu jenis labelnya mirip banget atau sama ya?

    Maaf nih masih takut :)
    1. takutnya sih begitu mas .. saya juga agak takut
  77. gan punya saya kok gk bisa bergerak ya, padahal Jquerynya dah dipasang...
  78. kang punya ku malah ke potong + ga gerak pula ..
    coba periksain dong kang ..

    padahal saya udah ikuti langkah2nya dengan benar ..
  79. izin praktek kang, buat mencari pemasang iklan baris
    thanks kang
  80. kang, kog ane coba.. sampe iklan ke dua aja yg mncul.. iklan ke 3 dst kepotong..
    ga ngerti code" an.. :)
  81. Efek hidden-nya nggak jalan di blog saya, kang. Apanya yang salah, ya? Saya udah coba utak-atik tapi tak berhasil. Kalau boleh, tolong dicek ya kang di blog saya (tongkonanku.com).

    Terima kasih sebelumnya. :)
    1. pastikan blog anda sudah terpasang jquery
  82. Kang cara ngatur biar icon Adsense nya pas di pojokan kanan atas gimana? yang saya kok ada spacenya http://eskrimsandwich.blogspot.com
    Mohon bantuannya kang :)
  83. hihi.. mantep.. kang. cobian ah.. hihi :P
    tapi kalau pake gambar gimana kang? udah dicoba pake gambar, tapi gambar keluar nya sepotong..
    mungkin ukuran nya ditambahin deui meren nya kang ismet? hihi dicoba ah..
  84. numpang visit: my blog kang?!!! www.faktacountry.blogspot.com
  85. Kang ismet, sya udh copas tp kok iklannya gx mw naik dan turun kyk di google ads ya kang?
  86. keren Kang Ismet/....
  87. ga bisa mas
  88. keren banget. sempet ketipu ama iklan GA buatan kang ismet
  89. nuwun kang :D
  90. Di coba dulu
  91. Mantap kang,
    Udah tak cobak di blog saya, :-)
    Moga aja blogku bisa keren kayak punya e kang ismet :-D
    Aamin

    Komentari balik blogku kang : on3tutorial
  92. maaf ni sebelumnya kang ismet, kenapa kok nggak pake adsense langsung aja?


    http://masrud.blogspot.com/
    1. link aktif forbid bang -_-
  93. Buat Wp keren juga nih
  94. Mantap kang
  95. Budi Sanjaya
    Komentar ini telah dihapus oleh pengarang.
  96. maaf kang di blog androsoftware kok ndak bisa seperti itu ya kang penyebapnya dimana ya kang? terimakasih
  97. Kang kok punya saya info iklannya gak muncul ya :(
    1. trus gak rapi seperti demo di atas
  98. kang kok di blog saya iklannya unidefined ya kang ,padahal udah saya ikutin dengan benar caranya ,tolong diperiksa ya kang http://blogku4u.blogspot.com
  99. www.fakhrie-share.blogspot.com
  100. www.fakhrie-share.blogspot.com
  101. atuh sami nya si Mbah Google ge di Cloning, :ngakak:

    |o|
  102. wah keren mas . . . ijin nyoba ya . . salam kenal dari blogger Blitar
  103. kang ismet ane mau tanya perihal iklan di side bar kanan, yusuf mansyur, ko bisa tampil terus kan padahal udah ane aktipin ABP Plus, caranya gimana bisa begitu... terimakasih atas responya
  104. bagus kang makasih .. tapi ada yang saya ganti tuh
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.