هذه الإضافة كنا نجدها كثيرا في المنتديات في أعوام سابقة, وهي ثني وسحب جزء من الصفحة  لمشاهدة إعلان أو شعار لمناسبة ما عادة. نادرًا ما تجدها حاليًا في المواقع والمدونات, ولا أرى لها فائدة عملية تُذكر سوى أنها للفت أنظار الزوار كإضافة جمالية لمدونتك. على أية حال إن رغبت بإضافتها فالطريقة سهلة جدََّا وبخطوتين فقط. تستطيع وضع فيها إعلانََا, أو ملاحظة, أو كما ترى في الأعلى إشتراك الخلاصة.

التركيب:


1 ابحث عن : </head> , وضع فوقها:


<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(http://1.bp.blogspot.com/-gIoMKZYoYXw/TpGThk8VjEI/AAAAAAAAD3U/q9EUNpp7uZI/s1600/subscribe.png) no-repeat right top;
}
</style>

<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>


2 ابحث عن : <body> , وضع تحتها:

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/anshuldudeja'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiLsgmm-XP3NtGWMYzaAwESM1Gu_sSi2i9wdGGx4Vxc7WcksAVBedxBC5TS256k8OOtTH5njaEgkfBxiYOl9fHcAqmdYffwJsmR1sTDlW1-qzSCDBacrnKRLXOrjjVt5W1YjGOtPCrwGX6/s1600/page_flip1.png'/></a>
<div class='msg_block'>
</div>
</div>



استبدل رابط الصورة في الكود الأول بالصورة المراد إظهارها.
وغير الرابط باللون الأزرق , وهو رابط الإنتقال عند الضغط على الصورة.