Cara Membuat Kotak Iklan Footer

Tips & trik kali ini untuk mengoptimalkan pemasangan iklan (advertizing) dari sponsor anda dengan memasang Kotak Iklan di Footer yang user-freindly.

Memasang iklan yang berlebihan pada blog terkadang membuat waktu loading blog bertambah lama apalagi kalo iklan yang mengandung konten dewasa makin berat aja loadingnya. Nahh... supaya iklan yang dipasang tidak terlalu banyak dan juga iklan yang dipasang dapat dilihat secara optimal, anda dapat memasang Kotak Iklan di Footer atau menggunakan PopUp Ads Screen.

Pada trik kali ini yaitu Cara Membuat Kotak Iklan di Footer saya berikan menggunakan 2 cara yaitu yang pertama dengan kode css dan sedikit sentuhan kode HTML dan yang kedua menggunakan Javascript. Buat anda yang tertarik silakan disimak tutorialnya... Oke jangan lupa untuk memberikan support-nya ya...dengan mengklik iklan yang ada di blog ini...

Contoh :

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.

Untuk pemasangan kode di blog silakan anda pasang cara 1 atau cara 2.

Cara 1 : Menggunakan CSS

Catatan :

height:107px = bisa anda ganti sesuai tinggi dari gambar atau script iklan yang anda pasang. KODE SCRIPT IKLAN : Anda ganti dengan kode script iklan.

Cara 2 : Menggunakan Javascript

<style type='text/css'>
#btm_banner {
cursor:move;
position: fixed;
top: 50%;
left: 25%;
width:728px;
height:90px;
z-index: 9999;
opacity: 0.9;
}
#btm_banner img{
border:0;
cursor:pointer;
}
.info-icon2 {
width:15px;
height:15px;
position:absolute;
top:25px;
right:0;
cursor:pointer;
}
.info-iklan2 {
background:#d3d3d3;
width:auto;
height:15px;
border-bottom-left-radius:4px;
position:absolute;
top:25px;
right:0;
color:#000;
font:normal 11px Arial,Sans-Serif;
text-align:left;
overflow:hidden;
padding-right:19px;
padding-left:5px;
display:none;
}
#adsTitle{
height:25px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#619bb9,endColorstr=#2E4B5A,GradientType=0);
background-image:-ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background-image:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background-image:-o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC));
background-image:-webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background-image:linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
}
</style>
<div align='center' id='btm_banner' style='display:none;'>
<div align='left' id='adsTitle' style='pointer-events: none;border-radius:4px 4px 0 0;'>
<span style='color:#fff;font-family:Arial;font-size:16px;text-shadow:black 0.1em 0.1em 0.1em;margin-left:5px;'><img align='left' src='https://icons.iconarchive.com/icons/custom-icon-design/pretty-office-13/24/Signal-Tower-icon.png' style='pointer-events:none;width:24px;height:24px;padding-left:2px;'/> Sponsor</span>
</div>
<div style='margin-top:-22px;float:right;padding-right:2px'>
<img id='closed2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkOT3kfxYcuUvtFcqQUO2Fq4gGItme9mWmOENOcH84KTBdM-aCzoBbCdC35u3F8i_UGJMvjzgoT-mzuQEbty2vUu4FjXVu7nCl4deXiXR-X3Na9mwVv9NKlhBEOBAezXmwsv_SM_8_F6C/s800/close-button-blue.png' style='cursor:pointer;' title='Close'/>
</div>
<div align='center'>
TARUH KODE IKLAN ANDA DISINI
<span class='info-iklan2'>POWERED BY MONOZCORE</span>
<span class='info-icon2'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF3nB-4Kn4Hr4T9shokEUuQNHeai9Lim5dk2Ie08g6JEhapVDd8fZPZUV3AEOGSMKXNajuo2f1RRAt7DbUH5QAWBYiq2cbRcquPP_YRINSRmilirI13ehQLDYzOU_6LFT_0izOT0wfLyE/s1600/info-iklan.png'/></span>
</div>
</div>
<script type='text/javascript'>
$(function() {
$('.info-icon').hover(function(){$('.info-iklan').toggle()});
$("#adsTop").show("slow");
$( "#adsTop" ).draggable();
$("img#closed1").click(function(){$("#adsTop").hide( "explode" );});
$("#btm_banner").show("slow");
$( "#btm_banner" ).draggable();
$('.info-icon2').hover(function(){$('.info-iklan2').toggle()});
$("img#closed2").click(function(){$( "#btm_banner" ).hide( "explode" );});
});

var adsHeight1=($(window).innerHeight()/2)-170;
var adsWidth1=($(window).innerWidth()/2)-150;
var adsHeight2=($(window).innerHeight())-130;
var adsWidth2=($(window).innerWidth()/2)-400;
$("#adsTop").css({top: adsHeight1, left: adsWidth1});
$("#btm_banner").css({top: adsHeight2, left: adsWidth2});
$(window).resize(function() {
var adsHeight1=($(window).innerHeight()/2)-170;
var adsWidth1=($(window).innerWidth()/2)-150;
var adsHeight2=($(window).innerHeight())-130;
var adsWidth2=($(window).innerWidth()/2)-400;
$("#adsTop").css({top: adsHeight1, left: adsWidth1});
$("#btm_banner").css({bottom: "0", left: adsWidth2});
});
</script>

Catatan :

height: 110px : Anda ganti sesuai dengan tinggi iklan.
width: 735px. : Anda ganti sesuai dengan lebar iklan.
KODE IKLAN ANDA : Ganti dengan code script iklan.

Tidak semua layanan iklan PPC membolehkan cara memasang iklan seperti ini, jadi sebelum anda memasang trik ini pastikan tidak melanggar TOS (Terms of Service) layanan PPC yang anda ikuti.

.: Semoga Bermanfaat :.