Iklan Teks ala Google AdSense - Setelah modifikasi template, saya mencoba membuat iklan teks yang menyerupai GA. Ternyata banyak sahabat yang nanya cara pembuatannya. Bahkan ada sebagian yang maling kode diam2 
Sebetulnya ini hanya manipulasi CSS dan sedikit bumbu jQuery saja. Daripada diintip source code diam2 mending saya bagiin deh tutorialnya. Penampakannya kurang lebih seperti gambar ini :
Langkah 1 : Simpan kode ini di atas </head>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>
Langkah 2 : Simpan kode CSS ini di atas ]]></b:skin> atau </style>
#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;
}
Langkah 3 : Simpan kode ini pada Widget HTML / JavaScript
<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/AVvXsEiXAlAScQadLIYWlHLXBX9F39ONukapXhFdNN7irplYjPBzCrfIRrvCm4gpuT07FUWm9qvLcn9LwDaUGttfGtqEtqfC71sdAAYYZ5QPJThmcxAQrFi5g_L5-6iWcqSEwpqgUbA6tm55TXA/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/AVvXsEiXAlAScQadLIYWlHLXBX9F39ONukapXhFdNN7irplYjPBzCrfIRrvCm4gpuT07FUWm9qvLcn9LwDaUGttfGtqEtqfC71sdAAYYZ5QPJThmcxAQrFi5g_L5-6iWcqSEwpqgUbA6tm55TXA/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/AVvXsEiXAlAScQadLIYWlHLXBX9F39ONukapXhFdNN7irplYjPBzCrfIRrvCm4gpuT07FUWm9qvLcn9LwDaUGttfGtqEtqfC71sdAAYYZ5QPJThmcxAQrFi5g_L5-6iWcqSEwpqgUbA6tm55TXA/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/AVvXsEiXAlAScQadLIYWlHLXBX9F39ONukapXhFdNN7irplYjPBzCrfIRrvCm4gpuT07FUWm9qvLcn9LwDaUGttfGtqEtqfC71sdAAYYZ5QPJThmcxAQrFi5g_L5-6iWcqSEwpqgUbA6tm55TXA/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/AVvXsEgy5sXZEk57R3hAuig_FbVp6bWufFSs3xULsvC9yYKu2xWOSAT7MQPO8y30lksT7YfdqDs5XucATnfmszqopKvIt6Ibm0Nh7BY3q0uqnzkjOR-wPDjpoSsQOU4eKoCyFPpm4Mrh5KK6eq0/s1600/info-iklan.png'/></a></span>
</div>
Silahkan edit judul dan link.
