Cara Membuat Iklan Baris Seperti Google Adsense

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0M98m9LZi_5OKQXfwJxfoynv5ohqcTwqzNgsDNGS0hz-xx7YC3H9hE4kF1U2wZaUvMbgnFVb-chM3GGIsC2utSAbcvBWDr6nfDxsn0C_QN79EyCDpLGUHg8dqRf95u6c6A9SZ0KZwo3k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0M98m9LZi_5OKQXfwJxfoynv5ohqcTwqzNgsDNGS0hz-xx7YC3H9hE4kF1U2wZaUvMbgnFVb-chM3GGIsC2utSAbcvBWDr6nfDxsn0C_QN79EyCDpLGUHg8dqRf95u6c6A9SZ0KZwo3k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0M98m9LZi_5OKQXfwJxfoynv5ohqcTwqzNgsDNGS0hz-xx7YC3H9hE4kF1U2wZaUvMbgnFVb-chM3GGIsC2utSAbcvBWDr6nfDxsn0C_QN79EyCDpLGUHg8dqRf95u6c6A9SZ0KZwo3k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0M98m9LZi_5OKQXfwJxfoynv5ohqcTwqzNgsDNGS0hz-xx7YC3H9hE4kF1U2wZaUvMbgnFVb-chM3GGIsC2utSAbcvBWDr6nfDxsn0C_QN79EyCDpLGUHg8dqRf95u6c6A9SZ0KZwo3k/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIbsAB-SWcWIWrrj9r_5-7HofDhR0OdD0ho7mRja59_KcQ0ctP_QJba2toMc8wrckvyh-cpzWuKz2NUq0YErGuCgPrTcRKg5nuRE1UF61fWmkZOSI7JLVfdIQlWkkKjJ0FZ3LUziDyJcI/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

40 komentar

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

    BalasHapus
    Balasan
    1. Anonim18:23

      kok ni b log mirip punya kang ismet

      Hapus
  2. Keren om.. next COmen www.itusih.com

    BalasHapus
  3. Mampir aja gan, balas undangan di facebook tadi.

    Visit back auliabalitour.blogspot.com

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

    BalasHapus
  5. wah bisa d pakai nih tehnik

    BalasHapus
  6. nice info bang tak coba e dulu

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. Artikel yang bermanfaat gan

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

    BalasHapus
  10. Anonim14:19

    Wah Keren Tutornya gan :D

    BalasHapus
  11. mirip google adsense ya..
    komen back ya!

    BalasHapus
  12. Izin Nyoba Gan :D !!!

    BalasHapus
  13. wiw, mantab om..
    like it...

    BalasHapus
  14. Anonim18:36

    Wah ntar lain kali aku coba ya.

    kombal ya.

    BalasHapus
  15. Wahh,, mantap bro,, patut di coba ni,, thanks infox yah

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

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

    BalasHapus
  18. 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

    BalasHapus
  19. sudah punya gan!.
    -Blogwalking-

    BalasHapus
  20. Coba .ah siapa tau dapet duit :D

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

    BalasHapus
  22. Nice Infonya gan..
    Bleh Coba nhe

    BalasHapus
  23. Anonim09:53

    sangat bermanfaat gan infonya :)

    BalasHapus
  24. kerenn iklanya.. mirip dengan adsene ^_^

    BalasHapus
  25. Anonim10:12

    wow mantap juga nih blog, salam kenal gan :D

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

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

    BalasHapus
  28. nice info gan,,,

    ditunggu kunjungan baliknya freezon88.blogspot.com

    BalasHapus
  29. keren nih widgetnya,, patut dicoba

    BalasHapus
  30. keren gan, tapi nambah loading blog gak nih???

    BalasHapus
  31. Wah Dicoba Nih Gan,Thanks Yah Infonya :)

    BalasHapus
  32. 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.. :)

    BalasHapus
  33. 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

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

    BalasHapus


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>