Print Friendly Version of this page Print this Article Print Friendly Version of this page
» » » » » » Cara Membuat Iklan Teks ala AdSense

A+ A-

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOWxizdOYfAIePV-hW5bFoJE4CkLmrDq9MxIghySO8JbzT56GNCgl9gpbzu9OO1i4gEs6YsUf88xUXRWcDUSVGpQ-5SG2W3EQ0MikDFzOpUW33Vp0CZYxe2g2bfEYmD8-jzfpWCvy43k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOWxizdOYfAIePV-hW5bFoJE4CkLmrDq9MxIghySO8JbzT56GNCgl9gpbzu9OO1i4gEs6YsUf88xUXRWcDUSVGpQ-5SG2W3EQ0MikDFzOpUW33Vp0CZYxe2g2bfEYmD8-jzfpWCvy43k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOWxizdOYfAIePV-hW5bFoJE4CkLmrDq9MxIghySO8JbzT56GNCgl9gpbzu9OO1i4gEs6YsUf88xUXRWcDUSVGpQ-5SG2W3EQ0MikDFzOpUW33Vp0CZYxe2g2bfEYmD8-jzfpWCvy43k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOWxizdOYfAIePV-hW5bFoJE4CkLmrDq9MxIghySO8JbzT56GNCgl9gpbzu9OO1i4gEs6YsUf88xUXRWcDUSVGpQ-5SG2W3EQ0MikDFzOpUW33Vp0CZYxe2g2bfEYmD8-jzfpWCvy43k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHerdtsWWpcghb2c_leCtfuvS7u1DBH1uECS5BVYALPFLaGma3-eRl0WsdwRcG_Ep3hiGBGwNHjfCoAgel3FSo8EShDb1dQ5a0VZ5sD6EENO3AmahyuO7ztCvBy4Hv1iVguObU7ZDAOM/s1600/info-iklan.png'/></a></span>     
</div>

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


Script by:
Kang Ismet



Jika Anda menyukai Artikel di blog ini. Silahkan klik disini atau masukkan email anda pada kolom di bawah untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Mahogra Fauzan.

reader



Anda baru saja membaca artikel "Cara Membuat Iklan Teks ala AdSense". Bagi sobat yang mau copas harap Cantumkan http://mahografauzan.blogspot.com/2014/06/cara-membuat-iklan-teks-ala-adsense.html sebagai Sumbernya, karena sebagai blogger yang baik tentu anda mengerti tata aturannya!
Hak Cipta di lindungi oleh Google, Copyscape, dan DMCA. Bagi siapapun yang copy paste tanpa mencantumkan SUMBERnya, akan saya laporkan ke DMCA Takedown.

Sekian Cara Membuat Iklan Teks ala AdSense dari http://mahografauzan.blogspot.com
Semoga Bermanfaat bagi anda dan jangan lupa untuk meninggalkan jejak berupa komentar ✉.
Terima Kasih ^_^
12:58 AM
, , , ,

Post a Comment Blogger Disqus

Subscribe to: Post Comments (Atom)
 
Top