Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link

Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link


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.

Pasti anda tertarik kan? Dan penasaran pengen coba diterapkan diblog anda?

Berikut adalah tutorialnya cara membuat slot iklan link mirip adsense.

Cara Membuat Slot 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}
@media screen and (max-width:640px){.link-btn-left,.link-btn-right{width:100%;float:none;margin:0 auto}}

3. Simpan Tema.

4. Setelah itu anda tentukan penempatan kode HTML nya. Misalnya ingin ditempatkan dibawah postingan, cara nya anda cari kode <data:post.body/> lalu paste kode HTML dibawah kode tadi.(pilih kode yang terakhir jika ingin ditempatkan dibawah postingan).

Tapi jika anda ingin menempatan 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 AnonSecTeam'>
<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 AnonSecTeam
</div></a>
</div>

Demikian tutorial Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya.
Previous Post
Next Post

post written by:

XnuxerAchill