Cara Menciptakan Widget Iklan Menarik Menyerupai Google Adsense

Cara Membuat Widget Iklan Menarik Seperti Google Adsense - Membuat tampilan iklan memang gak dapat asal-asalan ya sob, selain penempatan iklan yang tepat, penampilan iklan yang menarik juga menjadi faktor penentu semoga 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 menciptakan nya semoga terlihat menarik tampaknya lebih mudah, kita tinggal menciptakan banner semenarik mungkin maka simpulan deh iklan banner kita. Lalu bagaimana jikalau kita mau menampilkan jenis iklan berbentuk text tapi dapat terlihat menarik, mungkin kita dapat 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 kemudian 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='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>Pasang Iklan di Sini</a>
            <a href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>Pasang Iklan di Sini</a>
            <a href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>Pasang Iklan di Sini</a>
            <a href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://mas-basir.blogspot.co.id//search?q=cara-memiliki-akun-google-adsense' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghk1-EhbKTuSRLsE-riiJvzkDOPecNfWbY5mKhAtsBOVtVR-U82YPqRiv4FXm_5Gr_B_x2Ql5A6YBwl2W9Me4DWa1qDMfsiqpRHIR4GyKU7fLQua4vyOj6ur0sM0LYk6WYwQjVK8S3iUA/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.