Sample Text

Subscribe to Blogger Templates Gallery to get daily updates on Free Blogger Templates in your email for free.

rss feed blog template 4u Web Informer Button
2 Ekim 2011 Pazar

Blogger için köşeden açılan ‘reklam sayfası’ oluşturmak!


Blogger’da, yan tarafa normal reklam resmi koymak yerine, değişikreklam şekilleri oluşturabilirsiniz.  İşte o yollardan birini anlatmak istiyorum. Bir çok blogda görmüşsünüzdür; Yan tarafta üzerine gidince açılan reklam sayfasını. İşte bizler de bunu blogger için kullanacağız. Fakat isterseniz, elbette reklam sayfasınıRSS linkinizi koyarakta kullanabilirsiniz. Gerçekten çok kullanışlı ve blogunuzungörselleşmesi açısından güzel bir eklenti olduğunu düşünüyorum.
Öncelikle aşağıdaki kodu buluyoruz;
]]></b:skin>
Yukarıdaki koddan önce, aşağıdaki kodları ekliyoruz;
#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(http://reklamresmininlinki) no-repeat right top;
}
Sonra ise, aşağıdaki kodu bulalım;
</head>
Yukarıdaki koddan sonra, aşağıdaki kodları ekliyoruz;
<script src='http://code.jquery.com/jquery-latest.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>
Son olarak aşağıdaki kodu buluyoruz;
<body>
Ve yukarıdaki koddan sonra aşağıdaki kodları ekliyoruz;
<div id='pageflip'>
<a href='http://reklamlinki'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Not: Yukarıda yer alan kırmızı alanları, kendi blogunuza göre düzenlemeyi unutmayınız.
Örnek Görüntü;
Eklenti karşımıza ilk olarak aşağıdaki gibi çıkıyor;
Yukarıdaki sayfaya gelince ise, sayfa aralanıyor;
Sayfa aralandıktan sonra çıkan beyaz kısımda da, reklam resmi yer alacak.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 yorum:

Yorum Gönder