Cara Membuat Iklan Melayang di Blog Anti Mainstream

Cara Membuat Iklan Melayang di Blog Anti Mainstream

Codepelajar - Jika kita berselancar ke beberapa situs, mau itu situs besar maupun hanya sebuah blog kita biasanya melihat banner iklan di beberapa tempat. Letak iklan tersebut ada yang di bawah judul, panel sisi, main konten sampai ada yang di dalam artikel. Selain dari beberapa tempat yang saya sebutkan tadi, ada juga beberapa situs yang menempatkan iklannya melayang atau kita kenal dengan instilah Floating Ads / iklan melayang. Jika saya perhatikan kebanyakan dari situs yang menerapkan iklan ini menerapkan langsung dengan memunculkan saat pertama kali ataupun berada di sebelah sisi dari konten situs.


Bagi sobat yang ingin membuat iklan yang seperti ini namun kendala dalam membuatnya karena tidak paham pemograman HTML, CSS dan Javascript, kali ini saya akan berbagi wadah untuk iklannya atau bisa saya sebut Frame untuk iklan melayang di situs sobat. Bagaimana cara membuatnya? tenang kali ini saya sudah menyiapkannya, jadi sobat tinggal ikuti saja intruksi dari tutorial kali ini.

Cara Memasang Frame Floating Ads/Iklan melayang

Pada tutorial kali ini saya ada 2 opsi bisa di jadikan di kanan atau kiri, yaitu frame slide kiri dan slide kanan. Sobat tinggal memilih yang mana saja yang ingin sobat pasang di situs sobat.

Harap di ingat karena google memiliki kebijakan iklan yang melarang iklan menutupi konten, maka saran saya untuk mengatur ukuran frame yang di pasang kali ini sesuai ketentuan dari pengiklan. Saya tidak bertanggung jawab apabila akun iklan sobat melanggar kebijakan akibat tutorial yang saya berikan kali ini.

Sebelum memulai saya sudah mempunyai demonstrasi frame yang akan sobat pasang kali ini. Coba untuk menekan tombol di bawah ini:


Berikut adalah kode untuk iklan melayangnya. Copas dan tempelkan sebelum tag </body>.

<!-- CODEPELAJAR.COM | HTML -->
<div id="side-float">
<span class="x-close" onclick='xClose()'></span>
<!-- KONTEN/IKLAN DISINI -->
</div>

<!-- CODEPELAJAR.COM | CSS -->
<style type="text/css">/*<![CDATA[*/
div#side-float {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    max-width: 300px; /*== atur max-width jangan sampai menutupi kontent ==*/
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    transition: .5s;
    transform: translate(-150%);
    z-index: 999;
    border: 1px solid #222;
}
div#side-float.active {
    transform: translate(0);
}
span.x-close {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 15px;
    width: 15px;
    background: red;
    border-radius: 30px;
    cursor: pointer;
    z-index: 99;
}
/*== GUNAKAN YANG INI JIKA INGIN YANG DIKANAN
div#side-float {
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    max-width: 300px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    overflow: hidden;
    transition: .5s;
    transform: translate(150%);
    z-index: 999;
    border: 1px solid #222;
}
div#side-float.active {
    transform: translate(0);
}
span.x-close {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 15px;
    width: 15px;
    background: red;
    border-radius: 30px;
    cursor: pointer;
    z-index: 99;
}
==*/

@media (max-width:640px){
 div#side-float {
  display:none;
 }
}
/*]]>*/
</style>

<!-- CODEPELAJAR.COM | JAVASCRIPT -->
<script type="text/javascript">/*<![CDATA[*/
function xClose() {
  document.getElementById('side-float').classList.remove('active')
}
setTimeout(function(){
document.getElementById('side-float').classList.add('active')
},1000)
/*]]>*/
</script>


Jangan lupa isikan kontennya di yang sudah tandai diatas. Jika menggunakan iklan adsense, alangkah baiknya mengatur ukurannya agar tidak menutupi konten dari blog sobat. Isi konten floating elemen juga bisa sobat ganti dengan banner lainny seperti iklan untuk produk yang sobat jual ataupun iklan sejenis adsense lainnya tergantun keinginan. Ataupun sobat bisa mengisinya dengan tools atau live chat chatango yang pernah saya buat sebelumnya pada artikel chatango melayang berikut ini.

Demikian tutorial yang bisa saya bagikan tentang bagaimana cara membuat floating ads/ iklan melayang. responsive yang bisa sobat terapkan di blog kesayangan sobat. jadi gimana penasaran mencoba untuk memasangnya? Jangan lupa tinggalkan komentar kalo ada kesulitan atau pertanyaan. request bisa dengan menekan icon whatsapp yang melayang itu. Nantikan tutorial anti mainstream lainnnya dari Codepelajar





Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel