طريقة طي الجانب العلوي للمدونة حتى تظهر رابط للاشتراك في خدمة rss




  1.  
  2. بسم الله الرحمان الرحيم 
  3. موضوع يهمك قبل البدء  
    4.  جدول اكواد الالون لكل مصممى المواقع
  1. اما اليوم درسنا سيكون كيفية اضافة طريقة طي الجانب العلوي للمدونة حتى تظهر  رابط للاشتراك في خدمة rss
  3.  
  4. لنبدأ على بركة الله :
  5. الخطوة الاولى:
  6. اولا نتجه الى هنا : Layout -> Edit HTML
  7. ثم نبحث عن :
  8. </head>
  9.  ونلصق قبلها الكود التالي :
  10. <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnV25hxwFSYF1kYBSc30zjE32Z8JJ_TELvs97VdcWDB4tZkKRbD4DUO6-JvDNHdyizX-fwjtC_2fwk2T1j3DWApcfE-XwBf6sUExolXWqZUVTbgZMJN8q4OeWHERW0fzU5PNaK3yA4AMtd/s1600/rss.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>
  11. الخطوة الثانية :
  12. هي البحث عن :
  13. <body>
  14.  ثم نضيف قبلها 
  16. <div id='pageflip'><a href='your rss'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a><div class='msg_block'></div></div>
  17.  ثم غير your rss برابط rss ألخاص بمدونتك 
  18. ثم اضغط حفظ القالب

هناك تعليق واحد:

الاشتراك في: تعليقات الرسالة (Atom)