#pageflip {
position: relative;
}
#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;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirr7dFJZmcI2UMlptkPBlff5rgj8U5_DzIoZrrO6f0ZsyQg_eIQDxBQtw9hvbCMatAGD70X5Vf9pLHuD6C-PZ9C0dJllu__YqB5LZ3spfgrgZ3BQPjwOUx4mO5ni-yA3Lu_VUlJ5bL8yQn/) no-repeat right top;
text-indent: -9999px;
}

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

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/blogspot/WyNa'>
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6F8Jm50q26POGTXrUr5La9_9iFComfQKdb04U7S1e-qHZwnVJFKBbAm3fNgMbbzGTy0U7FxoZzhpOjcNM_N6KWoquhiOw8WL6ESKqCSfenK4prvVHcpS7-erOVbUkkXT9RJU0WXpAWL8x/'/>
 <span class='msg_block'>Subscribe via RSS</span>
</a>
</div>

ملحوظه: قم برفع تلك الصوره 'page_flip.png' على موقع رفع تثق في استمراريه الخدمه فيه .

وقم بتغيير هذا الرابط 'http://feeds2.feedburner.com/blogspot/WyNa' الي رابط التغذيه الخاص بمدونتك.

وتستطيع مثلما قلت في بداية الموضوع ان تغير رابط الصوره ورابط التغذيه باي رابط صوره او رابط موقع اخر تود الاعلان عنه في مدونتك



الصوره الصغيره بالاعلى تبين شكل الاضافه في وضعها العادي..والصوره التي بالاسفل تبين شكل الاضافه عند وقوف الماس عليها.