√ Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense - AdityaTekno

Social Items

AdityaTekno.com - Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Karena mirip seperti 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.

Baca Juga: Cara Memasang 3 Slot Iklan di Tengah Postingan Artikel

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.
Cara Membuat Slot Iklan Link Mirip Iklan Link AdSense

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).

Baca Juga: Cara Memasang Iklan AdSense di Atas dan Bawah Postingan Blog

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 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>

Note: Tulisan yang bertanda merah, ganti sesuai yang anda inginkan. 

Demo Iklan Link Mirip Seperti AdSense

See the Pen Iklan Link Mirip Seperti AdSense by AdityaTekno (@adityatekno) on CodePen.


Baca Juga: Cara Memasang Iklan dan Related Post ditengah Postingan

Demikian tutorial Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense

AdityaTekno.com - Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Karena mirip seperti 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.

Baca Juga: Cara Memasang 3 Slot Iklan di Tengah Postingan Artikel

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.
Cara Membuat Slot Iklan Link Mirip Iklan Link AdSense

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).

Baca Juga: Cara Memasang Iklan AdSense di Atas dan Bawah Postingan Blog

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 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>

Note: Tulisan yang bertanda merah, ganti sesuai yang anda inginkan. 

Demo Iklan Link Mirip Seperti AdSense

See the Pen Iklan Link Mirip Seperti AdSense by AdityaTekno (@adityatekno) on CodePen.


Baca Juga: Cara Memasang Iklan dan Related Post ditengah Postingan

Demikian tutorial Cara Membuat Slot Iklan Link Mirip Seperti Iklan Link AdSense. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo