Make Google AdSense Text Ads As Yourself in Blog


My Backlink - After modification of the template, I tried to create text ads that resemble GA. Apparently a lot of friends who weave.


Actually, this is only the manipulation of CSS and jQuery just a little spice. Instead of viewing and source code di my tutorial.

Appearance more or less like this:


Blogger Tutorial mybacklink86.blogspot.com Blogger Tutorials & Free Templates. arrow

Advertise Here mybacklink86.blogspot.com Your ad here.
arrow

Advertise Here mybacklink86.blogspot.com Your ad here.
arrow

Advertise Here mybacklink86.blogspot.com Your ad here.
arrow
Ads by MB86 info


Step 1: Save this code above </head>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>


Step 2: Save this CSS code above ]]></b:skin>
/* Text Ads
----------------------------------------------- */
#ad-text {
width:304px;
height:259px;
background-color:white;
position:relative;
overflow:hidden;
margin:0 auto;
}
#ad-text h2.ad-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;
}
#ad-text h2.ad-header:first-child {
border-top:none;
}
#ad-text h2.active {
display: none;
}
#ad-text h2.ad-header:before{
content:"";
width:0;
height:0;
position:absolute;
top:20px;
right:15px;
border:5px solid transparent;
border-color:#b2b2b2 transparent transparent;
}
#ad-texts div {
height:100px;
padding:10px 70px 10px 10px;
font:normal 13px Verdana, Tahoma,Serif;
color:white;
border-top:1px solid #d8d8d8;
}
.title {
font:normal 20px Verdana, Tahoma,Serif;
color:blue;
margin:0 0 5px 0;
}
a.title{
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue !important;
text-decoration:none;
display:inline-block;
}
a:hover.title {
font:normal 20px Verdana, Tahoma,Serif !important;
color:blue;
text-decoration:underline;
}
.content-ads a{
font:normal 13px Verdana, Tahoma,Serif;
color:green;
text-decoration:none;
display:block;
margin-bottom:10px;
}
.content-ads a:hover{ color:green;
text-decoration:none;
}
.contents {
padding-top:15px;
color:#222;
text-align:left !important;
}
.arrow-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;
}
.arrow-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;
}
Step 3 : Save this code in the widget HTML / JavaScript, or where you like
<div id="iklan-teks">
<!-- ad to 1 -->
<div data-header="Blogger Tutorial" style="border-top:none">
<span class='the content-ads '><a class='title' href='http://mybacklink86.blogspot.com/' target='_blank'>Blogger Tutorial</a>
<a href='http://mybacklink86.blogspot.com/' target='_blank'>blog.kangismet.net</a> <span class='isi'>Blogger Tutorials & Free Templates.</span> <a class='arrow-large' href='http://mybacklink86.blogspot.com/' 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>
<!-- ad to 2 -->
<div data-header="Advertise Here">
<span class='the content-ads'><a class='title' href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>Advertise Here</a>
<a href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>mybacklink86.blogspot.com</a>
<span class='isi'>Your ad here.&lt;br/&gt;
<a class='arrow-large' href='http://mybacklink86.blogspot.com/p/advertise.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>
<!-- ad to 3 -->
<div data-header="Advertise Here">
<span class='the content-ads'><a class='title' href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>Advertise Here</a>
<a href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>mybacklink86.blogspot.com</a>
<span class='isi'>Your ad here.&lt;br/&gt;
<a class='arrow-large' href='http://mybacklink86.blogspot.com/p/advertise.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>
<!-- ad to 4 -->
<div data-header="Advertise Here">
<span class='the content-ads'><a class='title' href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>Advertise Here</a>
<a href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'>mybacklink86.blogspot.com</a>
<span class='isi'>Your ad here.&lt;br/&gt;
<a class='arrow-large' href='http://mybacklink86.blogspot.com/p/advertise.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-ad'>Ads By MB86</span>
<span class='info-icon'><a href='http://mybacklink86.blogspot.com/p/advertise.html' target='_blank'><img alt='info' src='http://3.bp.blogspot.com/-Am5G1oV1UBU/U9Oo7Gq6QWI/AAAAAAAAB-U/VIt0t1AWHeY/s1600/ad_choices_en.png'/></a></span>
</div>

Description: Please edit the title and link-edit the code to step 3