Jun 16, 2011

Membuat Footer untuk Space Iklan di Blog

Tips and Trick
Mungkin anda pernah melihat di sebuah situs-situs berita besar semacam detik.com, vivanews.com, liputan6.com dan yang lainnya, dibagian bawah terdapat iklan. Nah di postingan kali ini saya akan memberikan cara membuat space iklan di bagian bawah (footer) blog.
Script yang digunakan adalah untuk model 1 CSS (Cascading Style Sheets), sedangkan model 2 menggunakan JavaScript Berikut code nya.
Model 1 : iklan footer permanen

<style type="text/css">
.botnav{
width:100%;
height:107px;
position: fixed;
bottom:0px;
right: 0px;
background-repeat:repeat-x;
z-index:1;
color:#000000;
}
</style>
<div class="botnav">
<p align="center">
KODE SCRIPT IKLAN
</p>
</div>
Catatan :
height:107px = bisa diganti sesuai tinggi dari gambar atau script iklan anda.
KODE SCRIPT IKLAN : letakkan code script iklan anda dari penyedia.
Model 2 : dengan tombol close
<!-- AWAL FOOTER IKLAN -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br >
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 110px; z-index: 9999;'>
<div style='text-align: right; width: 735px; height: 3px;'>
<img id='closed' src='http://www.voa-islam.com/images/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
KODE IKLAN ANDA
</center></p>
</p>
</div>
<!-- AKHIR FOOTER IKLAN -->
Catatan :
[+] Angka yang dicetak tebal disesuaikan dengan panjang dan lebar iklan anda.
[+] KODE IKLAN ANDA : di isikan code script iklan dari penydia iklan.
Untuk yang menggunakan BLOGDETIK, bisa diletakkan di widgets Any HTML atau di SETTINGS - WP-Highslide, sedang untuk pengguna BLOGGER, bisa dipasang dimanapun terserah heheheheh :)
Untuk contoh tampilan seperti yang ada di blog saya ini…
Selamat mencoba…

AKTUAL NEWS ONLINE

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Komen yang bijak sangat di nantikan...! Terimakasih..