|
| Cara Membuat Slot Iklan Banner dan Iklan Teks seperti Google Adsense |
Melihat perkembangan blog atauapun website sekarang ini yang semakin hari semakin bertambah jumlahnya maka, persaingan di dunia blogger atau website menjadi semakin ketat.
Apalagi jika kita kaitkan dengan bonus yang menggiurkan dengan diterimanya sebagai pengiklan google adsense. Tentu blog tersebut sudah dapat menghasilkan tambahan income bagi si empunya.
Terlepas dari dua hal diatas, terutama bagi para blogger pemula seperti saya ini. Untuk dapat memenangkan persaingan dan sekaligus bonus penghasilan dari blog yang kita bangun, tentu tidak semudah membalikkan telapak tangan.
Maka diperlukan usaha lebih, bahkan ekstra keras dan kesabaran yang tentu tidak terbatas. Untuk mencapai dua hal diatas,Syarat utama adalah trafik blog yang tinggi.
Dan untuk hal tersebut salah satu langkah awalnya adalah blog kita dikenal terlebih dahulu, selain dengan membuat konten yang unik dan menarik juga bisa dengan menjalin persahabatan dengan blogger lain, saling berbagi link dan masih banyak usaha lainnya.
Nah pada posting sekarang ini akan saya coba untuk membuat alternative untuk menjalin hubungan antar sesama blogger dan bertukar link melalui pemasangan slot iklan yang dapat dipasang pada blog Anda sebagai slot iklan gratis bagi blogger lain atau sekaligus sebagai tempat iklan berbayar bagi yang sudah memiliki trafik blog yang tinggi. Baik yang berupa iklan banner maupun iklan teks.
Baik langsung saja , ikuti uraian selanjutnya sampai selesai :
1. Slot Iklan Banner
Slot iklan banner ini bisa anda pasang pada bagian header, sidebar blog atau bagian manapun yang menurut Anda sesuai.
a. Untuk single Banner.
Pasang kode HTML di bawah ini pada widget.
<div
class='kotak_iklan3'>
<a
href='#'
target='_blank'
title='ADS-DESCRIPTION'><img
alt='iklan banner'
height='90'
src='IMAGE-URL'
title='ADS-DESCRIPTION'
width='728'/></a>
</div>
Keterangan :
Kode warna merah URL target, Kode berwarna Biru merupakan URL dari gambar banner (upload gambar/animasi banner anda semisal di blog/google drive kemudian Copy URLnya).
Kode berwarna Hijau merupakan keterangan Alt dari gambar banner. (tidak terlalu penting, bisa anda samakan dengan yang berwarna Ungu)
Kode berwarna Kuning merupakan ukuran dari banner yang anda buat. ( height=tinggi, width=lebar). Sesuaikan dengan ukuran banner anda.
b. Untuk Multi Banner.
Pasang kode HTML di bawah ini pada widget.
<div
class="kotak_iklan">
<a
href="#"
title="judul iklan"><img
style="border: none;"
src="IMAGE-URL"
alt="text gambar"
width="125"
height="125"
/></a>
<a
href="#"
title="judul iklan"><img
style="border: none;"
src="IMAGE-URL"
alt="text gambar"
width="125"
height="125"
/></a>
<a
href="#"
title="judul iklan"><img
style="border: none;"
src="IMAGE-URL"
alt="text gambar"
width="125"
height="125"
/></a>
<a
href="#"
title="judul iklan"><img
style="border: none;"
src="IMAGE-URL"
alt="text gambar"
width="125"
height="125"
/></a>
2. Slot Iklan Teks
Slot iklan baris ini seperti yang ditampilkan oleh google adsense. Untuk memasang slot iklan baris/teks ini silahkan ikuti langkah berikut ini
a. Simpan kode CSS style di bawah ini diatas kode , caranya :
1. Masuk ke dashboard blogger > Template > edit HTML
2. Cari dan temukan kode dengan menekan CTR+F
3. Copy paste kode CSS di bawah ini diatas kode
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.link-btn{
width:100%;
position:relative;
padding-top:15px
}
.link-btn:after {
clear: both;
content: "";
display:block;
}
.label-link-btn{
font-size:12px;
color:#333;
position:absolute;
top:0;
left:0;
line-height:1;
}
.label-link-btn svg{
width:15px;
height:15px;
vertical-align:-3px;
}
.label-link-btn svg path{
fill:#00aecd;
}
.link-btn-left,.link-btn-right{
width:calc(50% - 10px);
float:left
}
.link-btn-left{
margin-right:10px
}
.link-btn-right{
margin-left:10px
}
.tombol-link {
width: 100%;
height: 41px;
display: block;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
text-align: center;
line-height: 41px;
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.35) inset, 0px 1px
1px rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
background-color: #333333;
border: 1px solid #ffffff;
border-radius: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: #ffffff;
font-weight: normal;
font-family: arial, sans-serif;
font-size: 16px;
margin: 5px auto;
}
.tombol-link:hover {
background-color: #fff;
color: #333;
}
@media screen and (max-width:640px){
.link-btn-left,.link-btn-right{
width:100%;
float:none;
margin:0 auto;
}
}
/*]]>*/
</style>
</b:if>
4. Setelah terpasang jangan lupa klik SAVE
b. Kemudian Copy kode HTML berikut di bawah postingan dengan cara :
1. Cari dan temukan kode
2. Karena yang tag kondisional sudah digunakan, cari kode yang di bawahnya
3. Setelah itu copy paste kode di bawah ini tepat dibawah kode
b:if cond='data:blog.pageType == "item"'>
<div class="link-btn">
<div class="link-btn-left">
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
</div>
<div class="link-btn-right">
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
</div>
<a href="#" target="_blank" title="Iklan oleh Belinik">
<div class="label-link-btn">
<svg x="0px">
<path
d="M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z"></path>
</svg>
Iklan oleh Belinik
</div></a>
</div>
</b:if>
4. Sekarang tinggal mengganti kode # dengan URL tujuan iklan jika ada yang memasang iklan link.
5. Kode # pada kode silahkan ganti dengan URL post penawaran iklan link blog Anda. Dan silahkan sesuaikan kode Iklan oleh Belinik dengan blog Anda.
6. Terakhir jangan lupa Save
Demikian semoga bermanfaat dan Selamat mencoba serta lakukan dengan teliti, kalau perlu di backup dahulu templatenya agar pemasangan kode unit iklan ini tidak mengalami kendala.
EmoticonEmoticon