زر الصعود للأعلى الصفحة وكيفية إضافته في بلوجر

الرجوع إلى الأعلى

زر "الرجوع الى أعلى" هو رابط يتيح للمستخدمين الانتقال بسلاسة إلى الجزء العلوي من الصفحة. انها واحدة من الاضافات التي تعزز تجربة التنقل على المواقع مع الصفحات الطويلة.

إضافة جديدة لمدونات بلوجر سوف تنال إعجابك، أقدم لكم إضافة زر الصعود للأعلى BACK TO TOP بشكل جميل جدا. زر صعود للأعلى يساعد الزوار على الرجوع لأول الصفحة بسرعة خاصة إذا كانت التدوينة طويلة. إذا كنت تتوفر على زر العودة الى الأعلى قديم فيجب حذفه أولا ثم تركيب الإضافة الجديدة.

هذا الكود هو مناسب للمدونات التي بها محتوى طويل.عند النزول يظهر زر الرجوع إلى الأعلى في نقطة معينة من المحتوي، ويبقى ثابتا أثناء التمرير ثم يختفي عند الوصول إلـى أعلي الموقع.

طريقة تركيب "زر الصعود للأعلى" في بلوجر

أدخل لمدونتك في بلوجر
توجه إلي القالب >> تحرير
ابحث بإستعمال Ctrl+F عن <head/>
أضف الكود التالي قبله قبله اذا لم تجده في القالب

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

ثم ابحث عن ]]></b:skin
وأضف الكود التالي قبله

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;

الآن، ابحث عن وسمم <body/>
ثم إضافة هذا الكود قبله

<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
});
$('.smoothscroll-top').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

لقد إنتهي الدرس! مبروك عليك إضافة زر الصعود للأعلى المدونة، اترك تعليق إذا واجهت مشكلة في التركيب.

المصدر - الزعيم

Source مدونة الزعيم http://ift.tt/1NiZPKi

Posted in: عالم التقنية