Cara Membuat Iklan Baris Seperti Google Adsense

Assalammualaikum Sobat Blogger Admin Mau Bagi Tutorial Cara Membuat Iklan Baris Seperti Google Adsense Langsung Saja Kita KTP


  1. Login ke akun blogger Sobat.
  2. Kemudiat Edit Template
  3. Copy kode dibawah ini. Dan Letakan K CSS ini di atas ]]></b:skin> atau </style> 
 /* Iklan Google Adsense
----------------------------------------------- */


#Google-Adsense {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#Google-Adsense 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;
}
#Google-Adsense h2.iklan-header:first-child {
  border-top:none;
}
#Google-Adsense h2.active {
  display: none;
}
#Google-Adsense h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#Google-Adsense 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;
}

4. Simpan kode Di Bawah ini pada Widget HTML / JavaScript

  <div id="Google-Adsense">
    <!-- iklan ke 1-->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Hikamedition</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
            <a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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 2-->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Hikamedition</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
            <a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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 2-->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Hikamedition</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
            <a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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 2-->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Hikamedition</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
            <a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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 Hikam</span>
    <span class='info-icon'><a href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'><img alt='info' src='http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png'/></a></span>    
</div>

5. Silahkan Sobat Blogger Edit Judul Dan Lnk Sobat 
6. Jika Sobat Blogger ingin membuat Iklan Baris Seperti Google Adsense tersebut bisa melayang disisi kanan blog Sobat  maka gunakan kode dibawah ini:


  <style type="text/css">
#melayang{
position:fixed;
top:10px;
z-index:+1000;
}
html #melayang{position:relative;}
.melayangcontent{
float:right;
border:2px solid #52e052;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var melayang = document.getElementById("melayang");
var w = melayang.offsetWidth;
melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
melayang.opened = !melayang.opened;
}
function moveGB(x0, xf){
var melayang = document.getElementById("melayang");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
melayang.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="melayang">
<div class="melayangtab" onclick="showHideGB()"> </div>
<div class="melayangcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
PASTE KODE YANG TADI TARUH DISINI
<script type="text/javascript">
var melayang = document.getElementById("melayang");
melayang.style.center = (30-melayang.offsetWidth).toString() + "px";
</script></center></div></div>


Dan Langkah Terakhir 
7 Simpan kode Di Bawah ini di atas </head> 
<script src='https://googledrive.com/host/0B7Z2PdtIRXAaRjVuY1ktQjdmejg' type='text/javascript'/>


JANGAN CUMA MERAKTEKIN DOANG TAPI JANGAN LUPA TINGGALKAN KOMENTAR ANDA TUNJUKAN BAHWA ANDA BLOGGER YANG BIJAK TRIMAKSIH SALAM ADMIN
Pasang iklan anda Di ini

41 komentar

ini nih yang saya cari2 gan... sio nice post ,

Keren om.. next COmen www.itusih.com

Mampir aja gan, balas undangan di facebook tadi.

Visit back auliabalitour.blogspot.com

Wah perlu saya coba nih di blog ane.. maksih infonya. Visit balik ya dan komennya

wah bisa d pakai nih tehnik

nice info bang tak coba e dulu

Komentar ini telah dihapus oleh pengarang.

Artikel yang bermanfaat gan

mantap sob
visback sob http://wuhand.blogspot.com

mantapp gan artikelnya , jadi pengen buat iklan baris :)

Wah Keren Tutornya gan :D

mirip google adsense ya..
komen back ya!

Izin Nyoba Gan :D !!!

wiw, mantab om..
like it...

Wah ntar lain kali aku coba ya.

kombal ya.

Wahh,, mantap bro,, patut di coba ni,, thanks infox yah

wah artikel yang sangat bermanfaat gan....
di tunggu kunbalnya di http://dhiemazngz.blogspot.com
thanks :D

inpo yg bgus,ntar tak coba.. visit back gan

Wah, bisa sama gitu, ya? Btw, apa tidak digugat oleh Google Adsense karena mirip tampilannya? Namun, biar bagaimana pun kreatif juga pembuat kode skrip iklannya. Kunjungi blog saya: http://www.oke-reload.blogspot.com

sudah punya gan!.
-Blogwalking-

Coba .ah siapa tau dapet duit :D

Bagus nih infonya Sob, Ane izin nyoba dulu ya :D
http://bloggernoobindo.blogspot.com/

Nice Infonya gan..
Bleh Coba nhe

sangat bermanfaat gan infonya :)

kerenn iklanya.. mirip dengan adsene ^_^

wow mantap juga nih blog, salam kenal gan :D

keren juga ya..
nanti saya cobain ah kalau mau pasang banner iklan kaya gini..

bermanfaat sob,,,,saya tunggu kunjungan baliknya yaa.
http://miftakhulhuda-a16.blogspot.com/

nice info gan,,,

ditunggu kunjungan baliknya freezon88.blogspot.com

keren nih widgetnya,, patut dicoba

keren gan, tapi nambah loading blog gak nih???

Wah Dicoba Nih Gan,Thanks Yah Infonya :)

wahh ane kirain pake adsense iklan'a, ane bingung ko adsense ada iklan baris'a..
mantep nih gan, oya nanti kalo pembayaran'a masuk kemana gan.. :)

Wah,mantep nih kalau dicoba....tapi kalau mau jadi publisher adsense kok ya sulit ya gan......

yang butuh tempat iklan gratis kunjungi http://www.iklan.infoso.biz

kok ni b log mirip punya kang ismet

ini yg saya cari cari, :) visit juga ya sob http://berton-adiwidya.blogspot.com


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>


EmoticonEmoticon