How to Create Ad Widget Attracts Like Google Adsense - Making display ads indeed can not carelessly ya bro, other than the right ad placement, ad looks interesting also be a deciding factor to make users want to click on the ads on our blog or website.
Advertising - advertising that is usually in the form of banner and text ads. For advertising in the form of banners, to make it to make it look more attractive it seems easy, we just make it interesting banner then finished deh our banner ads. So what if we want to display the type of text ads but can look attractive, perhaps we can imitate ya, ad text belongs to its Google Adsense, her appearance looks interesting, although only in the form of text. See appearance below:
Okey,, interesting right ?? Then how do I make it ?? Let us consider the following:
1. Log in to your Blogger account. Then Go to Dashboard >> Template >> Edit HTML
2. Enter the following script code above </ head>
<script src = 'https: //googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type = 'text / javascript' />
3. Then Put CSS Code Here Right above code]]> </ b: skin> or </ style>
* Text Ads
----------------------------------------------- * /
# {text-ads
width: 304px;
height: 259px;
background-color: white;
position: relative;
overflow: hidden;
margin: 0 auto;
}
# ad-text-header {h2.iklan
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;
}
# ad-text h2.iklan-header: first-child {
border-top: none;
}
# ad-text h2.active {
display: none;
}
# ad-text h2.iklan-header: before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 20px;
right: 15px;
border: 5px solid transparent;
border-color: # b2b2b2 transparent transparent;
}
# div {text-ads
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-ad a {
font: normal 13px Verdana, Tahoma, Serif;
color: green;
text-decoration: none;
display: block;
margin-bottom: 10px;
}
.isi-ad a: hover {
color: green;
text-decoration: none;
}
.isi {
padding-top: 15px;
color: # 222;
text-align: left! important;
}
.panah-large {
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-Large: hover {
background: # 4472bd;
}
.info-icon {
width: 15px;
height: 15px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.info-ad {
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. Then Make A Widget HTML / Javascript and then fill with the Code Here:
<div id = "ad-text">
<! - Ad 1 ->
<div data header = "Blogger Tutorials" style = "border-top: none">
<span class = 'content-ads'> <a class='judul' href='http://blog.kangismet.net' target='_blank'> </a> Blogger Tutorial
<a href='http://blog.kangismet.net' target='_blank'> blog.kangismet.net </a>
<span class = 'content'> 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/AVvXsEgUrd6JYHS_3zRRQoMp7aEllpFVosDzAGgxhq9M9JwwMXI2fq5hxTh61oDPwkGy99_Sv-1-baECS8URdaFZwgxL5u-P97wEurZ8fYko56ChyCnnL9bhghyphenhyphenEtgnqumEc4hjWRo_TJMcoKa0/s1600/icon_chevron_white.png'/></a>
</ span>
</ div>
<! - Ad to 2 ->
<div data header = "Advertise Here">
<span class = 'content-ads'> <a class = 'title' href = 'http: //blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target = '_ blank'> Advertise Here </a>
<a href='http://blog.kangismet.net/2012/12/pasang-ads-in-blog-kang-ismet.html' target='_blank'> blog.kangismet.net </a>
<span class = 'content'> Put your ad here, only 35 thousand / month.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-ads-in-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/AVvXsEgUrd6JYHS_3zRRQoMp7aEllpFVosDzAGgxhq9M9JwwMXI2fq5hxTh61oDPwkGy99_Sv-1-baECS8URdaFZwgxL5u-P97wEurZ8fYko56ChyCnnL9bhghyphenhyphenEtgnqumEc4hjWRo_TJMcoKa0/s1600/icon_chevron_white.png'/></a></span>
</ span>
</ div>
<! - Ad to 3 ->
<div data header = "Advertise Here">
<span class = 'content-ads'> <a class = 'title' href = 'http: //blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target = '_ blank'> Advertise Here </a>
<a href='http://blog.kangismet.net/2012/12/pasang-ads-in-blog-kang-ismet.html' target='_blank'> blog.kangismet.net </a>
<span class = 'content'> Put your ad here, only 35 thousand / month.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-ads-in-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/AVvXsEgUrd6JYHS_3zRRQoMp7aEllpFVosDzAGgxhq9M9JwwMXI2fq5hxTh61oDPwkGy99_Sv-1-baECS8URdaFZwgxL5u-P97wEurZ8fYko56ChyCnnL9bhghyphenhyphenEtgnqumEc4hjWRo_TJMcoKa0/s1600/icon_chevron_white.png'/></a></span>
</ span>
</ div>
<! - 4th ad ->
<div data header = "Advertise Here">
<span class = 'content-ads'> <a class = 'title' href = 'http: //blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target = '_ blank'> Advertise Here </a>
<a href='http://blog.kangismet.net/2012/12/pasang-ads-in-blog-kang-ismet.html' target='_blank'> blog.kangismet.net </a>
<span class = 'content'> Put your ad here, only 35 thousand / month.
<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-ads-in-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/AVvXsEgUrd6JYHS_3zRRQoMp7aEllpFVosDzAGgxhq9M9JwwMXI2fq5hxTh61oDPwkGy99_Sv-1-baECS8URdaFZwgxL5u-P97wEurZ8fYko56ChyCnnL9bhghyphenhyphenEtgnqumEc4hjWRo_TJMcoKa0/s1600/icon_chevron_white.png'/></a></span>
</ span>
</ div>
<! - Info ->
<span class = "info-ad"> Ads by Kang Ismet </ span>
<span class = "info-icon '> <a href='http://blog.kangismet.net/2012/12/pasang-ads-in-blog-kang-ismet.html' target='_blank'> <img alt = 'info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKfaUns6drybqPqpoexceiwNJMUZ-11eeE1kpw2-LuG6-TRDVhmCqdyPi2si3Y-nrtwoJcz1NnPgp2Ez3evw828M4a-URhqv_oZ6MeOaGP_VcS6HLOdqP4llUoXL_2UVC7qvit1n-ytX0/s1600/info-iklan.png'/></a></span>
</ div>
4. Save and View result.
Okey bro,, enough of the article How to Create Ad Widget Attracts Like Google Adsense. Hopefully these tips useful.
0 Komentar untuk "How to Create Ad Widget Attracts Like Google Adsense"