Cara Membuat Slot Iklan Link Mirip Iklan Link Adsense


WENXPLOIT - Slot iklan link yg dimaksud di sini adalah slot iklan link yg seperti jenis iklan display teks & link yg ada di adsense. Kalau di adsense, tentu kita sudah tau jenis iklan linknya seperti apa, yaitu jenis iklan yg terdiri dari kumpulan atau susunan tombol - tombol yg saat diklik, maka akan diarahkan ke URL pengiklan yg tentunya URL yg ada dibalik tombol - tombol tersebut sudah ditentukan oleh pihak adsense, bukan kita sendiri yg menentukan URL nya.

Bagi para blogger, yg sudah menjadi publishernya adsense, lalu ingin mencoba membuat jenis iklan link yg memang dari adsense, bisa dilihat di postingan yg sebelumnya tentang Cara Membuat Iklan Teks & Link (Penelusuran Bersponsor) di Blog

Tapi dipostingan kali ini saya bukan ingin membahas gimana cara membuat jenis iklan link bawaan dari adsense, melainkan saya ingin mempublikasikan postingan tentang tutorial Cara Membuat Slot Iklan Link Mirip Iklan Display Link Adsense, yg dimana nantinya kita menggunakan atau menggabungkan kode HTML, CSS, dan beberapa URL postingan dari blog yg ada di daftar saluran khusus adsense. (YANG PASTINYA BLOG ATAU SITUS WEB SUDAH AKTIF MENJADI PUBLISHER ADSENSE)

Membuat Slot Iklan Link

1. Siapkan link url dari postingan blog beserta judulnya , yg nantinya akan disematkan di tombol - tombol yg ada di slot iklan mirip iklan link adsense tersebut. (SLOT IKLAN LINK INI TERDIRI DARI 4 TOMBOL DI KIRI & 4 TOMBOL DI KANAN , MAKA DIBUTUHKAN "4 URL POSTINGAN BLOG BESERTA 4 JUDULNYA UNTUK TOMBOL KIRI" JUGA "4 URL POSTINGAN BLOG BESERTA 4 JUDULNYA UNTUK TOMBOL KANAN")

2. Login ke blogger.com

3. Di dashboard blogger, klik Tema >> Edit Tema , lalu cari kode ]]></b:skin> , lalu copy kode di bawah ini dan paste di atas kode ]]></b:skin> , jangan klik Simpan terlebih dahulu, biarkan dalam keadaan editor pengeditan tema

/* CSS Slot Iklan Link by wenxploit.com */
<style type='text/css'>
.link-tombol{width:100%;position:relative;padding-top:15px}
.link-tombol:after{clear:both;content:"";display:block}
.label-tombol-link{font-size:12px;color:#333;position:absolute;top:0;left:0;line-height:1}
.label-tombol-link svg{width:15px;height:15px;vertical-align:-3px}
.label-tombol-link svg path{fill:#2B2B2B}
.tombol-link-kiri,.tombol-link-kanan{width:calc(50% - 10px);float:left}
.tombol-link-kiri{margin-right:10px}
.tombol-link-kanan{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){.tombol-link-kiri,.tombol-link-kanan{width:100%;float:none;margin:0 auto}}
</style>

4. Selanjutnya, copy kode HTML di bawah ini, lalu paste ke Text Editor seperti "Notepad++" kalau di windows , "Quick TextEditor" kalau di Android

<div class="tombol-link-kiri">
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
</div>
<div class="tombol-link-kanan">
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
<a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>
</div>
<a href="#" target="_blank" title="Ads by wenxploit.com">
<div class="label-tombol-link">
<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>
Ads by wenxploit.com 
</div></a>

Ganti tanda # dengan url postingan, Ganti JUDUL POSTINGAN dengan masing-masing judul postingan.
CONTOH: tadinya <a class="tombol-link" href="#" target="_blank">JUDUL POSTINGAN</a>, tapi setelah tanda # dan JUDUL POSTINGAN nya diganti, maka jadinya seperti ini <a class="tombol-link" href="https://www.wenxploit.com/2019/12/update-script-anti-bom-klik-iklan.html" target="_blank">Script Anti Bom Adsense</a>

5. Kembali ke editor pengeditan tema tadi, cari kode <data:post.body/> , lalu copy kode HTML yg sudah disematkan dengan URL postingan beserta judul - judulnya , lalu terserah paste di atas <data:post.body/> atau di bawah <data:post.body/> (KALAU DI ATAS , ARTINYA DI ATAS ARTIKEL, KALAU DI BAWAH , ITU ARTINYA DI BAWAH ARTIKEL)

6. Terakhir, klik Simpan Tema

Gimana?
Mudah bukan?
Tutorial Cara Membuat Slot Iklan Link Mirip Iklan Link Adsense nya? Mudah-mudahan dengan menggunakan Slot seperti iklan link adsense ini bisa meningkatkan traffic blog. 

Kalau penasaran dengan hasilnya gimana, bisa lihat DEMO nya di bawah ini

See the Pen Slot Iklan Link by Wen (@wendev89) on CodePen.