Cara Membuat Iklan Link Mirip Seperti Iklan Link AdSense

www.gurudzgn.com - Hi Web Developer! Kembali lagi bersama gurudzgn, kali ini gurudzgn akan berbagi tutorial Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Tampilannya sangat mirip dengan iklan link Google AdSense, maka slot iklan link ini bisa di manfaatkan untuk membuka jasa periklanan di blog anda, dan iklan link jenis ini bisa diterapkan dimana saja, entah dibawah postingan, ditengah postingan maupun diatas postingan.

Nah, dengan begitu anda bisa menyediakan slot iklan link mandiri lebih banyak dengan tampilan yang tidak menggangu tentunya, karena akan terlihat lebih menarik seperti tampilan iklan link AdSense dan tentunya juga responsive. tanpa basa basi lagi lanjut ke tutorialnya.

Cara Membuat Iklan Link Mirip Seperti Iklan Link AdSense

1. Buka Blogger >> Tema >> Edit HTML.

2. Kemudian copas kode CSS ini dibawah 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!important}
@media screen and (max-width:640px){.link-btn-left,.link-btn-right{width:100%;float:none;margin:0 auto}}

3. Simpan Tema.

4. Jika anda ingin menempatkan di sidebar blog, anda tinggal buka Tata Letak >> Tambahkan Gadget >> HTML/JavaScript

Berikut adalah kode HTML nya.

<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 gurudzgn.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 gurudzgn.com
</div></a>
</div>

Note: Tulisan yang di blok biru, ganti sesuai selera. 

Result

Demikian tutorial Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Semoga bermanfaat terimakasih.