Print Friendly Version of this page Print this Article Print Friendly Version of this page


Halo Sobat, kali ini saya akan membagikan tutorial "Cara Membuat Iklan Teks ala Google AdSense". (Lihat juga : "Cara Membuat Iklan Gambar ala AdSense")
Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Tanpa basa basi lagi, mari kita simak tutorialnya di bawah ini...

1. Masuk ke Blogger.
2. Pilih Template -> Edit HTML.
3. Simpan kode di bawah ini diatas </head>.
<script src='https://sites.google.com/site/mahografauzan/Iklan%20Teks%20Adsense.js' type='text/javascript'/>

4. Simpan kode CSS di bawah ini di atas ]]></b:skin> atau simpan di dalam tag <style> </style>.
#iklan-teks {
width:300px;
height:255px;
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;
}

5. Simpan kode di bawah ini pada widget HTML/JavaScript.
  <!-- Iklan Teks -->
<div id="iklan-teks">
<!-- iklan ke 1 -->
<div data-header="Pasang Iklan di Sini" style="border-top:none">
<span class='isi-iklan'><a class='judul' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Mahogra Fauzan</a>
<span class='isi'>Pasang iklan Anda di sini, hanya Rp 25.000/bulan.</span>
<a class='panah-besar' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.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>
</div>
<!-- iklan ke 2 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Mahogra Fauzan</a>
<span class='isi'>Pasang iklan Anda di sini, hanya Rp 25.000/bulan.
<a class='panah-besar' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.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://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Mahogra Fauzan</a>
<span class='isi'>Pasang iklan Anda di sini, hanya Rp 25.000/bulan.
<a class='panah-besar' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.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://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.html' target='_blank'>Mahogra Fauzan</a>
<span class='isi'>Pasang iklan Anda di sini, hanya Rp 25.000/bulan.
<a class='panah-besar' href='http://mahografauzan.blogspot.com/2013/11/pasang-iklan.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 Mahogra Fauzan</span>
<span class='info-icon'><a href='http://linkgw.tk/teks' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>
</div>

6. Silahkan edit judul iklan dan link nya ^_^.


Script by:


Download Cara Membuat Iklan Teks ala AdSense

Post a Comment Disqus Blogger

 
Top