Sabit Reklam Alanı Yapma

 bcakir
 9 Eylül 2011

Merhaba arkadaşlar bu yazımda sitelerin sağ köşesine konulan ve sayfa hareket etse bile kaymayan reklam alanının nasıl yapıldığını anlatacağım. Bu tarz reklamlar artık çok moda. Birçok tanınmış sitede sürekli olarak karşılaşıyoruz. Bundan dolayı da, nasıl yapıldığını sizlere anlatayım dedim. Yapacağımız bu uygulama ile artık siteleriniz içerisinde bu tarz reklamlara kolaylıkla yer verebileceksiniz. Örneğin; 1000px genişliğinde bir siteniz olduğunu düşünelim ve bunun sağ tarafına 200px genişliğinde, 400px yüksekliğinde kaymayan bir reklam koyalım. Ayrıca, reklama tıklanınca da reklamın sahibinin sayfasına gitsin.

<!DOCTYPE html>
<html>
<head>
<title>Css ile Kaymayan Reklam</title>
<style>
#reklam_alani{
position: absolute;
top: 0px;
left: 1000px;
position: fixed;
text-indent: -1000px;
width: 200px;
height: 400px;
overflow: hidden;
cursor: pointer;
background: url('reklam.jpg') no-repeat 0 0;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#reklam_alani').click(function(){
        window.open("http://bcakir.com/");
    });
});
</script>
</head>
</head>
<body>
<div id="reklam_alani"></div>
</body>
</html>

Bu uygulamamızda da JQuery kütüphanesinden yararlandık ve tıklama işlemini kolayca hallettik. Yukarıda bulunan kodu sitenize uyarlayarak bu reklam alanına kolayca sahip olabilirsiniz. Bu yazımızın da sonuna gelmiş olduk. Gelecek yazılarda buluşmak dileğiyle.

 1.949 Okunma

Bu yazıya 3 yorum yapılmış.

  1. Bunda küçük bir sorun var.. sadece reklam alanında değil tüm sayfada var bağlantı, sayfa içine başka bir bağlantı verseniz bile, ikinci sayfa olarak reklam alanındaki bağlantıya gidiyor
    : ))

    • Haklısın uyarın için teşekkürler. Kodu farklı şekilde yazmıştım örneği hazırlarken. Sonra optimize edeyim derken gözümden kaçmış. $(‘#reklam_alani’) olması gereken yeri $(this) şeklinde unutmuşum. Şimdi uygulamayı düzelttim.

  2. Ya ben hani başkalarının sitesinde olmasını istiyorum o nasıl?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Css, JQuery
Kapat