12 December 2013

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='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

    -SUMBER-
    Rhinokage Rio
    Rhinokage Rio

    Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

    Add Your Comments

    • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
    • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
    • Untuk menulis huruf underline silahkan gunakan <u></u>.
    • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
    • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
    Konversi Code
    Out Of Topic