Membuat Iklan Teks ala Google Adsense

Unknown

Widget

19 Nov 2013

5 Komentar

Membuat Iklan Teks ala Google Adsense - Mengunjungi blognya Kang Ismet dan melihat iklan teksnya mirip banget sama Google Adsense (GA) saya jadi tergiur untuk menggunakan (dikala nanti kalau blog sudah memungkinkan) dan membagikannya ke teman-teman semua.

DEMO

Pastinya Anda tahu dan sering melihat iklan teks GA ini, contohnya pada screenshot diatas, terlihat lebih berkualitas dalam segi grafik dan penampilan. Fungsi utama yang ada pada iklan teks ala GA ini yaitu menggunakan fungsi slide (bila disentuh kursor akan membuka) dan fungsi read more dengan tombol panah yang menarik, dengan kedua fungsi ini tentu akan menarik perhatian pengunjung.

Langkah 1 : Simpan kode berikut diatas kode </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 berikut 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://hilbramkurnia3.blogspot.com' target='_blank'>Blogger Tutorial</a>
            <a href='http://hilbramkurnia3.blogspot.com' target='_blank'>hilbramkurnia3.blogspot.com</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://hilbramkurnia3.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/AVvXsEjsB7ZrMexcOi3vwT_9kccc-gDzWVtFho6PtfX90q6fL-gyqYwEtWelZCq1mZMu7mMMp8qeXEJ3KwWUfXCSnu3eS5AuxHp8L-uOXDgD8hNf45lLmV7WX87kpZyEBaHCBsmNNacEpXY81i4/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://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>hilbramkurnia3.blogspot.com</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://hilbramkurnia3.blogspot.com/2013/06/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/AVvXsEjsB7ZrMexcOi3vwT_9kccc-gDzWVtFho6PtfX90q6fL-gyqYwEtWelZCq1mZMu7mMMp8qeXEJ3KwWUfXCSnu3eS5AuxHp8L-uOXDgD8hNf45lLmV7WX87kpZyEBaHCBsmNNacEpXY81i4/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://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>hilbramkurnia3.blogspot.com</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://hilbramkurnia3.blogspot.com/2013/06/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/AVvXsEjsB7ZrMexcOi3vwT_9kccc-gDzWVtFho6PtfX90q6fL-gyqYwEtWelZCq1mZMu7mMMp8qeXEJ3KwWUfXCSnu3eS5AuxHp8L-uOXDgD8hNf45lLmV7WX87kpZyEBaHCBsmNNacEpXY81i4/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://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'>hilbramkurnia3.blogspot.com</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://hilbramkurnia3.blogspot.com/2013/06/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/AVvXsEjsB7ZrMexcOi3vwT_9kccc-gDzWVtFho6PtfX90q6fL-gyqYwEtWelZCq1mZMu7mMMp8qeXEJ3KwWUfXCSnu3eS5AuxHp8L-uOXDgD8hNf45lLmV7WX87kpZyEBaHCBsmNNacEpXY81i4/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Hilbram Kurnia Blog's Tutorial</span>
    <span class='info-icon'><a href='http://hilbramkurnia3.blogspot.com/2013/06/pasang-iklan.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhny8lBm_pWXF3UZz__BeTtgDV-yo3mCKXWmydJWO01Ovh9b5IJVR9BKQTOq3YevYmZkAQ1OjL0P1Uxrlo8CvQ3cBFSXYxXmT8EBMUb1IfK6rHD5xapz64kskDt8bMo2tAbfGIvmFuU-rY/s1600/info-iklan.png'/></a></span>   
</div>

Silahkan Anda edit kode diatas sesuai keinginan, khususnya pada judul dan link..
Semoga Bermanfaat...