ile kodlanmıştır.
Blogger'da, yan tarafa normal reklam resmi koymak yerine, değişik reklam ş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 blogunuzun gö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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 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.
Paylaşım için çok teşekkür ederim. Kendi bloğumda denedim ancak açılır sayfa sürekli sağ altta yer alıyordu. Çözümü position değerlerini fixed yaparak çözdüm. Aynı problemi yaşayan arkadaşlar da position: relative değerlerini position: fixed olarak değiştirirlerse sorun çözülür diye düşünüyorum. En azından bende çözüldü.
Emeğinize sağlık. Tekrardan teşekkürler.
Merhaba,
Yorumunuz için teşekkür ederiz. Yardımcı olabildiysek, ne mutlu bize.
İyi Çalışmalar
teşekkürler kullanmaya başladım :)