Rabu, 27 November 2013

Membuat Iklan Seperti Google Adsense ala Kang Ismet

Membuat Iklan Seperti Google Adsense ala Kang Ismet - Pernah berkunjung ke salah satu master blogger Indonesia +Kang Ismet belum? Kalau iya, melihat tampilan iklan yang ada di sidebar blongnya Kang Ismet? Seperti apa tampilan iklan disana? Yups! Google Adsense, ya tampilan iklan yang ada di sidebar blog Kang Ismet seperti iklan Google Adsense dan itu benar-benar sangat profesional banget, dan karena ketertarikan untuk mengetahui tampilan iklan tersebut, saya mencoba untuk mengintip kode CSS, kode script yang mirip iklan Google Adsense tersebut. Tidak percaya kemiripannya seperti apa? Silahkan lihat perbandingan gambar iklan berikut ini

Membuat Iklan Seperti Google Adsense ala Kang Ismet Membuat Iklan Seperti Google Adsense ala Kang Ismet

Bagaimana? Benar-benar profesional banget. Jika Anda memasang kode iklan seperti Google Adsense yang dibuat Kang Ismet tersebut kedalam blog Anda, dan apalagi blog Anda sudah memiliki iklan Adsense yang asli, sepertinya hal ini akan meningkatkan nilai klik terhadap iklan Adsense Anda karena kemungkinan pengunjung blog akan sedikit bingung, manakah iklan Adsense yang asli... eits! Jangan keburu seneng dulu, ingat TOS Adsense : Dilarang memasang iklan yang memiliki bentuk yang sama yang membuat pengunjung blog bingung. Kalau tidak salah bunyi seperti itu... :)

Nah, masih tertarik untuk memasang iklan seperti Google Adsense sedangkan di blog Anda sudah terpasang iklan yang sebenarnya? Jika iya silahkan ikuti petunjuk berikut ini

DEMO

Kode Script Iklan Seperti Google Adsense
Silahkan pilih salah satu kode berikut dan salin sebelum atau diatas </head>
Kode script di drive akun saya:
<script src='https://googledrive.com/host/0B-jHSSDExNykN21WNmxUdW5CQ2M' type='text/javascript'/>

Kode script di drive akun Kang Ismet:
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

Kode CSS Iklan Seperti Google Adsense
/* 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;
}

Kode HTML Iklan seperti Google Adsense
Letakkan kode berikut di bagian sidebar
<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://panduantemplateblog.com' target='_blank'>Blogger Tutorial</a>
<a href='http://panduantemplateblog.com' target='_blank'>Iklan Panduantemplateblog.com</a>
<span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
<a class='panah-besar' href='http://panduantemplateblog.com' 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://panduantemplateblog.com' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://panduantemplateblog.com' target='_blank'>Iklan Panduantemplateblog.com</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 25 ribu / bulan.
<a class='panah-besar' href='http://panduantemplateblog.com' 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://panduantemplateblog.com' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://panduantemplateblog.com' target='_blank'>Iklan Panduantemplateblog.com</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 25 ribu / bulan.
<a class='panah-besar' href='http://panduantemplateblog.com' 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://panduantemplateblog.com' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://panduantemplateblog.com' target='_blank'>Iklan Panduantemplateblog.com</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 25 ribu / bulan.
<a class='panah-besar' href='http://panduantemplateblog.com' 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 Panduan Template Blog</span>
<span class='info-icon'><a href='http://panduantemplateblog.com' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>
</div>

Bagaimana tertarik untuk memasang iklan seperti Google Adsense diatas? Silahkan buka tutorial lengkapnya di Blog Kang Ismet

Untuk penjelasannya, silahkan ganti link url yang terdapat pada Kode HTML iklan dengan url blog Anda. Tidak diganti pun juga tidak apa-apa hehee.. Terimakasih telah membaca artikel ini, Membuat Iklan Seperti Google Adsense ala Kang Ismet

Membuat Iklan Seperti Google Adsense ala Kang Ismet Rating: 4.5 Diposkan Oleh: ana sriwahyuni

20 komentar:

  1. Wah bagus banget mbak iklan nya. Bener-bener mirip dengan iklan adsense. Luar biasa ya kang ismet bisa membuat iklan seperti itu :)

    BalasHapus
    Balasan
    1. iya mbak Wahyu, bisa di coba tuch di blognya, kan di blognya mbak Wahyu ada Adsnya... :)

      Hapus
  2. Kang ismet itu emang jago mbak,, sempat2nya kepikiran buat iklan mirip kyk GA. Ini artikel bermanfaat,, patut di coba :)

    BalasHapus
    Balasan
    1. betul banget, selain hebat bin pinter, juga cakep xixiii

      Hapus
    2. diam2 ternyata naksir ni cie cie wkwkkwkwk :p

      Hapus
    3. hus, sekedar ngefans aja :)

      Hapus
  3. Memang ide yang luar biasa membuat iklan menyerupai tampilan google adsense, segera saya praktekkan di blog saya biar tambah keren.

    BalasHapus
  4. mantaff kang, ijin praktek

    BalasHapus
  5. kak, msh baru ne lum ngerti, kok di blog ku gx bsa ya kak, efek dropdown nya kok gx mw ya kak?

    BalasHapus
    Balasan
    1. jelas tidak mau keluar, mungkin takut dengan gambar-gambar yang ada di blognya :(

      Hapus
  6. Mantap infonya gan, mksh salam kunjung balik

    BalasHapus
    Balasan
    1. sama-sama mas Dzaky, makasih atas kunjungannya.. :)

      Hapus
  7. ternyata bisa juga ya membuat tampilan iklan mirip adsense. nice post mbak...
    salam persahabatan

    BalasHapus
    Balasan
    1. iya, malah hampir mirip dengan aslinya, pinter banget yg buat y..
      salam kenal mas..

      Hapus
  8. di blog androsoftware saya kenapa ndak bisa diterapkan ya mbak. msalahnya dimana ya mbak mohon bantuannya mbak...terimakasih

    BalasHapus
    Balasan
    1. saya sudah lihat hasilnya mas, dibagian bawah postingan itu kan, memang tidak bekerja sesuai aslinya
      coba ganti kode scriptnya mas dan tidak perlu menggunakan karakter, saya lihat kode scriptnya seperti ini:
      <!--<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>-->
      jadikan seperti ini saja dulu
      <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

      Hapus
    2. terimakasih mbak atas bantuannya akan saya coba dahulu...

      Hapus
    3. maaf mbak, sudah saya coba sesuai arahan mbak ana tapi kok masih belum bisa ya mbak? apa mungkin template saya yang tidak mendukung mbak? terimakasih

      Hapus
    4. kalau template tidak berpengaruh mas, tapi yang mempengaruhi adalah penggunaan kode, mungkin ada kode script yang bentrok penggunaannya dengan script iklan tersebut

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia