Langsung saja ke topik bahasan.
Langkah-langkah Bagaimana Cara Membuat Widget Iklan Teks Seperti Iklan Google Adsense
1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Copy-Paste kode dibawah ini kode ini di atas </head>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>
4. Copy-Paste kode CSS ini di atas ]]></b:skin> atau </style>
/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
width:325px;
height:259px;
background-color:#FFFAFA;
position:relative;
overflow:hidden;
margin:0 auto;
}
#iklan-teks h2.iklan-header {
cursor:pointer;
background-color:rgb(255, 253, 253);
background-image:none;
font:normal 20px Verdana, Tahoma,Serif;
color:#db001e;
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:#db001e;
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:110px;
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;
}
5. Selanjutnya Klik Simpan Template
6. Kemudian pilih Tata Letak >> Tambahkan Gadget>>HTML/JavaScript
7. Copy-Paste Kode dibawah ini ke Widget HTML/JavaScript
<div id="iklan-teks">
<!-- iklan ke 1 -->
<div data-header="Sharing Blog Parta" style="border-top:none">
<span class='isi-iklan'><a class='judul' href='www.blogparta.com' target='_blank'>Sharing Blog Parta</a>
<a href='http://www.blogparta.com' target='_blank'>blogparta.com</a>
<span class='isi'>Sharing Blog Parta.</span>
<a class='panah-besar' href='www.blogparta.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlbRhZPGXhPGaNShOLlfTg17qyv6n8z7PQnqNFnI5PEjYbcDIOJtjBUoTv98QA-8BlXJ159smtaIh8J9JrmYmMbr9bX8ZryrVsuW0xeBmt6RMk0dd0G55gjnvL2veXXj30L3tui6-HjE/s1600/icon_chevron_white.png'/></a>
</span>
</div>
<!-- iklan ke 2 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='www.blogparta.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://blogparta.com/2013/03/pasang-iklan-disini.html' target='_blank'>blogparta.com</a>
<span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
<a class='panah-besar' href='http://www.blogparta.com/2013/03/pasang-iklan-disini.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/AVvXsEiRlbRhZPGXhPGaNShOLlfTg17qyv6n8z7PQnqNFnI5PEjYbcDIOJtjBUoTv98QA-8BlXJ159smtaIh8J9JrmYmMbr9bX8ZryrVsuW0xeBmt6RMk0dd0G55gjnvL2veXXj30L3tui6-HjE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 3 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='www.blogparta.com.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='www.blogparta.com.com' target='_blank'>www.blogparta.com.com</a>
<span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
<a class='panah-besar' href='http://www.blogparta.com/2013/03/pasang-iklan-disini.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/AVvXsEiRlbRhZPGXhPGaNShOLlfTg17qyv6n8z7PQnqNFnI5PEjYbcDIOJtjBUoTv98QA-8BlXJ159smtaIh8J9JrmYmMbr9bX8ZryrVsuW0xeBmt6RMk0dd0G55gjnvL2veXXj30L3tui6-HjE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 4 -->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://www.blogparta.com/2013/03/pasang-iklan-disini.html' target='_blank'>Pasang Iklan di Sini</a>
<a href='http://www.blogparta.com/2013/03/pasang-iklan-disini.html' target='_blank'>blogparta.com</a>
<span class='isi'>Pasang iklan Anda di sini, Murah & Berkualitas.
<a class='panah-besar' href='http:www.blogparta.com/2013/03/pasang-iklan-disini.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/AVvXsEiRlbRhZPGXhPGaNShOLlfTg17qyv6n8z7PQnqNFnI5PEjYbcDIOJtjBUoTv98QA-8BlXJ159smtaIh8J9JrmYmMbr9bX8ZryrVsuW0xeBmt6RMk0dd0G55gjnvL2veXXj30L3tui6-HjE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- info -->
<span class='info-iklan'>Ads By Sharing Blog Parta</span>
<span class='info-icon'><a href='http://www.blogparta.com/2013/03/pasang-iklan-disini.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-68gNvmnUcJVvNk3uv9u7bA9RbrdQadMEkRj8yfVrWvTWgyNAZvTJzYffK5Y_WwW-X3E1D2gAPTgpSc7LTTFHAhCEfmyvGskQSJ0ekZhmnwuldrrKoSNtAwkc_GwUKQRCV3rAw1J4rBQ/s1600/info-iklan.png'/></a></span>
</div>