27 Mayıs 2010 Perşembe

3
Blogun Sağ Üstüne Kıvrılan Reklam

Her sitenin reklama ihtiyacı var , sesini farklı kitlelere duyurabilmek için.Bunlar için çeşitli teknikler var.İşte reklam firmalarına sitenizi ekliyorsunuz, yayınlatıyorsunız mesela en iyisi Adsense'dir.

Bir de sizin kendi kendinize oluşturabileceğiniz reklamlar vardır, şimdi anlatacağım gibi.Bu anlatacağım kodları sitemize yerleştirince, sitemizin sağ üst köşesinde üzerine gelince reklam açılan bir sayfacık oluşuyor.Son derece dikkat çekici olan bu reklama zevk için bile tıklayanlar olabilir.Görünümü oldukça estetik ve sade.

İlk olarak Yerleşim / HTML'yi Düzenle'ye giriyoruz ve Widget Şablonlarını Genişlet'e tıklıyoruz.


Daha sonra aşağıdaki kodu buluyoruz:
</head>


hemen üstüne bu kodu ekliyoruz:
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(REKLAMI YAPILACAK SİTEYE AİT RESİM) no-repeat right top;
}
</style>

<script src='http://sites.google.com/site/bilquer/bilquerkivrilanreklam.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>



Tekrar şu kodu buluyoruz:
<body>


ve altına bu kodu ekliyoruz.
<div id='pageflip'>
<a href='BURAYA ISE REKLAMI YAPILAN SITENIN ADRESI'><img alt='' src='http://i47.tinypic.com/eiwgg0.png'/></a>
<div class='msg_block'></div>
</div>


Kırmızı ile belirttiğim yerleri kendinize göre değiştiriniz ;)
Benim oluşturduğum örnek sayfa için şu siteye göz atmanızı tavsiye ederim:
http://bilquer-kivrilanreklam.blogspot.com/


3 yorum:

Admin dedi ki...

body kodu şablonda bulamıyorum yok standart şablonlardan birini kullanıyorum

site: http://izmirmtsk.blogspot.com/

Editör dedi ki...

bilquer beim sitede uyguladım olmadı. Js dosyasını benim ayrı bir hosta yükledim yine çalışmadı.Acaba web sitesi şablonundan kaynaklanıyor olabilir mi? adres http://www.pedagojikformasyon.net

Admin dedi ki...

@efekentli ,

1. koddaki kırmızı alanı değiştirdim, bir yanlışlık yapmışım ('' REKLAMI YAPILACAK SİTEYE AİT RESİM '').Tekrar uygulamaya çalış, eğer sorun çıkarsa sorabilirsin tekrardan ;)

Yorum Gönder

Anlayamadığınız yerleri lütfen yorum olarak belirtiniz. ''Buraya yorum yazsam ne zaman cevap verir ki? ... '' diye düşünmeyin zaten her dakika blogdayım ;) Sorularınıza elimden geldiği kadarıyla cevap vermeye çalışacağım.