كيف تضيف زر الصعود أعلى الصفحة بشكل سلس وجذاب لمدونة بلوجر

السسلام عليكم ورحمة الله وبركاته

اقدم لكم اليوم اضافة مميزة زر الصعود أعلى الصفحة لمدونات بلوجر بشكل سلس جدا 



كيفية الاضافة

ادخل الى لوحة التحكم في مدونتك > القالب > تحرير html ثم ابحث عن الرمز ]]></b:skin> 

اذا كنت لا تعلم كيف تبحث عن الرموز في المدونة انظر الى هذه الصورة

الان بعد ان وجدة الرمز  ]]></b:skin> اضف الكود التالي فوقه مباشر
#backtop {
  cursor:pointer;
  position:fixed !important;
  position:absolute;
  left:50%;
  bottom:-70px;
  z-index:999;
  background-color:#888;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;
  width:35px;
  height:50px;
  overflow:hidden;
  text-indent:-999px;
  -webkit-border-top-left-radius:10px;
  -webkit-border-top-right-radius:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.feed-links {
  display:none;
}

#backtop::after {
  content:&quot;
  &quot;
  ;
  position:absolute;
  top:7px;
  left:10px;
  width:0;
  height:0;
  border-width:10px 7px;
  border-style:solid;
  border-color:transparent transparent white transparent;
}



واخيرا ابحث عن الرمز </body> ثم اضف الكود التالي فوقه مباشر

ملاحظة هامة: إذا كانت مدونتك تحوي على الكود المشار إليه باللون الأحمر فلا حاجة لإضافته وإلا لن تعمل الإضافة تحقق منه عن طريق البحث عن كلمة ajax إن وجدتها تأكد أنك لست بحاجة لإضافته فقط أضف الكود الذي يليه
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<div id='backtop'>أعلى الصفحة</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"}
,{duration:800,queue:false}
)}
else{$("#backtop").stop().animate({bottom:"-50",right:"0"}
,{duration:1000,queue:false}
)}}
);$(function(){$("#backtop").click(function(){$("html,body").animate({scrollTop:0}
,"slow");return false}
)}
);//]]>
</script> 



الان اختر حفظ وشاهد النتائج

مشاركات أقدم المقال التالي
1 تعليق
  • غير معرف
    غير معرف 04‏/12‏/2014، 7:15:00 م

    شكراً
    http://omarfarhat.blogspot.fr/

أضف تعليق
عنوان التعليق