Skip to HeaderSkip to PostSkip to Footer

Membuat Iklan Seperti Google Adsense

Table of Content
    Membuat Iklan Seperti Google Adsense - Kali ini Saya Akan Share Sebuah Tutorial yaitu cara membuat iklan seperti Google Adsense. Lihat dulu Penampakannya :)
     Sumber : Blog Kang Ismet



    Tidak Berlama Lama Lagi, Simak Tutorialnya  :)

    Tutorial

    1. Login ke Akun Blogger Anda. Lalu Masuk ke Dashboard >> Template >> Edit HTML
    2. Masukan Script Berikut diatas Code </head>
     <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>
    3. Lalu Masukan Code CSS Berikut Tepat diatas Code ]]></b:skin> atau </style>
    /* Iklan Teks
    ----------------------------------------------- */
    #iklan-teks {
      width:304px;
      height:259px;
      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;
    }

    3. Lalu Buatlah Sebuah Widget HTML/Javascript lalu isi dengan Code Berikut :

    <div id="iklan-teks">
        <!-- iklan ke 1 -->
        <div data-header="Blogger Tutorial" style="border-top:none">
            <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
                <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
                <a class='panah-besar' href='http://blog.kangismet.net' 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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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'>blog.kangismet.net</a>
                <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
                <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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'>blog.kangismet.net</a>
                <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
                <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
                <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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 Kang Ismet</span>
        <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.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>
    Lalu Edit Judul , Link Sesuai Keinginan Anda :)

    Nah, Sekian Dari Saya, Semoga Artikel ini Mudah Dipahami dan bermanfaat :)

    Comments

    Post a Comment

    This is a comment message for you.