Ads

Membuat Iklan Teks Mirip Google Adsense

Pak DZ Minggu, Mei 24, 2015
Iklan Teks Mirip Google Adsense - Penyedia iklan global Google Adsense memang sudah menjadi primadona dalam dunia blogger. Semua blogger berlomba-lomba menjadi publisher iklan dari perusahaan raksasa tersebut, namun tidak sedikit pula permohonan para blogger ini yang ditolak oleh Google.

Buat sobat2 yang belum berkesempatan menjadi publisher Google Adsense, jangan khawatir kamu juga bisa memodifikasi iklan2 kamu menjadi mirip iklan teks google adsense. Tapi ini sama sekali tidak ada hubungannya dengan akun Google Adsense, ini hanya modifikasi tampilan saja (menarik perhatian,, hehehe)
Screenshoot: Iklan teks mirip google adsense

Ok, langsung saja berikut langkah-langkahnya:

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

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

Langkah 2: Simpan kode CSS ini diatas ]]></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://dzulcyber.blogspot.com' target='_blank'>Blogger Tutorial</a>
            <a href='http://dzulcyber.blogspot.com' target='_blank'>berita.nanggroe.org</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://dzulcyber.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOViAvo9ln3e29ztBvEsWyaxlfnNmMh235h2XU6iTcq9R-SGiVOw0H3_B9CELLQs-hLcjWRAAHX4kSKkrBcevmLroS9wi6neOK2Km4BBPz6HylIoLHU70CagJsHkbrnAQ4FCWcaCbvVA/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://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>berita.nanggroe.org</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOViAvo9ln3e29ztBvEsWyaxlfnNmMh235h2XU6iTcq9R-SGiVOw0H3_B9CELLQs-hLcjWRAAHX4kSKkrBcevmLroS9wi6neOK2Km4BBPz6HylIoLHU70CagJsHkbrnAQ4FCWcaCbvVA/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://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>berita.nanggroe.org</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOViAvo9ln3e29ztBvEsWyaxlfnNmMh235h2XU6iTcq9R-SGiVOw0H3_B9CELLQs-hLcjWRAAHX4kSKkrBcevmLroS9wi6neOK2Km4BBPz6HylIoLHU70CagJsHkbrnAQ4FCWcaCbvVA/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://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'>berita.nanggroe.org</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQOViAvo9ln3e29ztBvEsWyaxlfnNmMh235h2XU6iTcq9R-SGiVOw0H3_B9CELLQs-hLcjWRAAHX4kSKkrBcevmLroS9wi6neOK2Km4BBPz6HylIoLHU70CagJsHkbrnAQ4FCWcaCbvVA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh dzulcyber</span>
    <span class='info-icon'><a href='http://www.berita.nanggroe.org/p/pasang-iklan.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtwQs_HCN-eQF-E2G6Rr3U5EwZM3V0rfA0C0kRGV7b-pICa6_ztezpVDpuifeUiXlxb73PVJSVaVZnoXsL7jUui4nBnxkvRX_xRiKg3jbBaTnxt5R1bXDbFlbWVbGfkTW-w3xGZflFtQ/s1600/info-iklan.png'/></a></span>     
</div>

Silahkan edit Judul, isi, dan link iklan anda. untuk tampilan dan modifikasi warna silahkan anda edit sendiri pada bagian kode CSS.
Tags:
Pak DZ

Posted by: Pak DZ

Guru Matematika SMA Negeri 5 Kejuruan Muda

Berikan Komentar Anda

0 Komentar