Cara Membuat Iklan Mandiri Type Link Mirip Iklan Google AdSense

Ada banyak cara untuk meningkatkan Klik Kunjungan Postingan Blog dan juga meningkatkan Page View Blog itu sendiri serta membuat pengunjung berlama-lama menikmati konten yang disajikan sebuah blog, salah satunya adalah dengan membuat Link yang mengarah ke postingan lain dalam bentuk Iklan yang mirip sekali dengan Iklan Type Link milik Google AdSense.

Saya sendiri baru beberapa hari ini mencoba dan menerapkan Trik ini. Berawal dari kejenuhan menunggu pembahasan pembatasan penayangan iklan AdSense. Dimana Akun AdSense yang saya tautkan ke Blog Berbagi Tutorial beberapa minggu yang lalu tiba-tiba saja terkena masalah pembatasan penayangan Iklan.

Karena sudah terbiasa melihat Blog lebih tampak cantik dan menarik dengan adanya Iklan Google AdSense ketika Iklan AdSense tidak tayang karena terkena pembatasan, rasanya ada yang kurang. Beberapa hari saya sibuk mencoba iklan alternatif AdSense, namun tidak satupun yang bisa membuat saya merasa puas dan nyaman. Akhirnya karena sudah merasa jenuh dengan Alternatif AdSense yang tidak ada satupun yang cocok timbul ide untuk membuat iklan mandiri yang mirip dengan iklan AdSense type Link dan berikut inilah penampakannya:


Saya memanfaatkan Iklan Mandiri type Link yang mirip sekali dengan Iklan Link AdSense untuk meningkatkan traffik pembaca pada beberapa postingan yang memang sudah mendapatkan Ranking di Google, artinya artikel tersebut bermanfaat dan banyak dibutuhkan oleh publik internet.


Bagaimana Apakah teman-teman Blogger Juga Berminat dan Ingin Mencobanya?

Apabila teman-teman ingin mencoba menerapkan Iklan Mandiri Type Link yang mirip sekali dengan Iklan Type Link milik Google AdSense bisa mengikuti panduan berikut ini:

Langkah Pertama silahkan kalian salin kode CSS berikut ini, ada 2 jenis kode CSS dengan struktur yang berbeda, silahkan kalian coba mana yang sesuai dan bekerja di Blog kalian:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>


Kode CCS di atas lebih tepat dan cocok digunakan untuk Blog dengan Template Non-AMP diletakkan di atas kode </head>. Sedangkan untuk kalian yang menggunakan Template Blog AMP silahkan gunakan kode CSS berikut ini:

 

/*Iklan Link Mirip Adsense*/
.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:0 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:#119af5;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}}


Letakkan kode di atas kode </style>. Tentunya akan ada beberapa kode </style> dalam template kalian, silahkan kalian uji coba penempatannya, dan temukan posisi penempatan kode yang tepat dan pas, sehingga iklan dapat tampil sebagaimana mestinya.

Untuk Warna Background dan Teks bisa kalian sesuaikan sesuai selera masing-masing, letak kode pengaturan warna ada di kode CSS di atas.

Kemudian silahkan kalian salin kode Iklan Mandiri Type Link berikut ini, ada 2 versi yang berbeda, silahkan kalian coba mana yang sesuai dengan Template Blog kalian:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 KompiAjaib">
<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 KompiAjaib
</div></a>
</div>
</b:if>


Kode Iklan Link Mandiri di atas, lebih tepat dan cocok digunakan untuk Blog dengan Template Non-AMP dimana ada kode JavaScript. Sementara untuk Blog AMP penggunaan kode JavaScript tidak disarankan karena akan membuat halaman Blog menjadi Invalid AMP.

Jadi bagi kalian yang menggunakan template AMP silahkan coba kode berikut yang saya gunakan dan terapkan di Blog Berbagi Tutorial Online.

 

<div class='link-btn'>
<div class='link-btn-left'>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
</div>
<div class='link-btn-right'>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
</div>
<a href='#' target='_blank' title='Iklan oleh AdityaTekno.com'>
<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'/>
</svg>
Iklan oleh AdityaTekno.com
</div></a>
</div>


Letakkan Kode Iklan sesuai dengan keinginan kalian masing-masing. Sebagai catatan khusus kode iklan tersebut tidak cocok/tidak compitable apabila ditempatkan di Area Widget. Meskipun kalian sudah memilih Opsi JavaScript Teks hasilnya Iklan tidak akan tayang sebagaimana mestinya.

Kira-kira begitulah cara simple membuat dan memasang iklan mandiri type link blog AMP dan Non-AMP yang secara tampilan mirip sekali dengan Iklan type Link Google AdSense. Selamat mencoba dan semoga traffic Blog kalian bisa meningkat menggunakan metode ini.
want to subscribe to the Latest Post Update Notifications? Please Follow Blogger Knowledge On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online for those of you who like tutorials in the form of video recordings.