Cara Membuat Widget Iklan Menarik Seperti Google Adsense

Cara Membuat Widget Iklan Menarik Seperti Google Adsense - Membuat tampilan iklan memang gak bisa asal-asalan ya sob, selain penempatan iklan yang tepat, penampilan iklan yang menarik juga menjadi faktor penentu agar pengunjung mau mengeklik iklan yang ada di blog atau web kita.

Iklan - iklan yang ada biasanya berbentuk banner dan juga iklan berbentuk text. Untuk iklan berbentuk banner, untuk membuat nya agar terlihat menarik sepertinya lebih mudah, kita tinggal membuat banner semenarik mungkin maka selesai deh iklan banner kita. Lalu bagaimana kalau kita mau menampilkan jenis iklan berbentuk text tapi bisa terlihat menarik, mungkin kita bisa mencontoh nih, iklan text milik nya Google Adsense, penampilanya terlihat menarik walaupun hanya berbentuk text. Lihat penampakanya dibawah ini :

Okey,,menarik kan ?? Lalu bagaimana cara membuatnya ?? Yuk kita bahas dibawah ini :

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">
    
    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtayEI-X_rfbaB7D0sPxlk0XsiceqCHkBtFA6IMdtxBUe6LMK6wi_Ba4Dw4KLHp5vco7pVi65yGrIiUvCxNXAwI6yHIbVLTp7tWsbkUWN7og-VyPJrWKicOCd7zEUe0st4AxomiT5GF3s/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    
    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtayEI-X_rfbaB7D0sPxlk0XsiceqCHkBtFA6IMdtxBUe6LMK6wi_Ba4Dw4KLHp5vco7pVi65yGrIiUvCxNXAwI6yHIbVLTp7tWsbkUWN7og-VyPJrWKicOCd7zEUe0st4AxomiT5GF3s/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtayEI-X_rfbaB7D0sPxlk0XsiceqCHkBtFA6IMdtxBUe6LMK6wi_Ba4Dw4KLHp5vco7pVi65yGrIiUvCxNXAwI6yHIbVLTp7tWsbkUWN7og-VyPJrWKicOCd7zEUe0st4AxomiT5GF3s/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtayEI-X_rfbaB7D0sPxlk0XsiceqCHkBtFA6IMdtxBUe6LMK6wi_Ba4Dw4KLHp5vco7pVi65yGrIiUvCxNXAwI6yHIbVLTp7tWsbkUWN7og-VyPJrWKicOCd7zEUe0st4AxomiT5GF3s/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWGxsWQXb2oitdRcWa0WkGoV5I69wgXVyhDmoD3KhLx-1-9t2gN9u0kXLniUYhfSn7lsUL5wUI40gCbdikliqun4eLkV5tRns2z7kHO32wZHWoBZV76tM6gqh3ZI2mK47tXn8PwN_zSHM/s1600/info-iklan.png'/></a></span>
</div>

4. Save dan Lihat Hasilnya.

Okey sob,,cukup sekian artikel Cara Membuat Widget Iklan Menarik Seperti Google Adsense. Semoga tips ini bermanfaat.

Bukan Sekedar Tutorial

Cara Membuat Widget Iklan Menarik Seperti Google Adsense

0 Response to "Cara Membuat Widget Iklan Menarik Seperti Google Adsense"

Post a Comment