Cara Membuat Slot Iklan Link Mirip Google AdSense

Arsipbiru.com - Selamat datang di Arsipbiru. Kali ini saya akan membagikan tutorial terkait bagaimana caranya membuat slot iklan link mirip iklan Google AdSense. Karena mirip dengan iklan Google AdSense, maka slot iklan link ini bisa dimanfaatkan untuk membuka jasa periklanan di blog Anda. Iklan jenis ini bisa diterapkan di mana saja, baik di bawah, di tengah maupun di atas postingan.

Dengan demikian, Anda bisa menyediakan slot iklan link secara mandiri lebih banyak dengan tampilan yang tidak mengganggu tentunya. Selain terlihat lebih menarik seperti tampilan iklan link AdSense, slot iklan tersebut tentunya juga responsive.

Cara Membuat Slot Iklan Link Mirip Google AdSense

1. Buka Blogger > pilih Tema > Edit HTML.

2. Kemudian copy dan paste kode CSS berikut ini di bawah kode ]]></b:skin> atau </style>.

/* 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}}

3. Simpan Tema.

Cara Memasang Slot Iklan Link di Blog

Setelah langkah di atas selesai, Anda tentukan penempatan kode HTML-nya. Misalnya, ingin ditempatkan di bawah postingan. Caranya, Anda cari kode <data:post.body/> lalu paste kode HTML di bawah kode tadi. (pilih kode yang terakhir jika ingin ditempatkan di bawah postingan).

Tapi, jika Anda ingin menempatkan di sidebar blog, Anda tinggal buka Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript. Selanjutnya, copy dan paste kode HTML berikut ini.

<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 Arsipbiru'>
<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 Arsipbiru
</div></a>
</div>

Berikut contoh hasilnya jika semua langkahnya dilakukan dengan cermat.

Demikian tutorial bagaimana cara membuat slot iklan link mirip Google AdSense. Semoga bermanfaat.