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

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

سعيد بلقائكم مجددا أحبابي في الله زوار مدونة فنون الويب 

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

إضافة جميلة ومهمة جدا وتعطي لمسة احترافية للمدونة بالاضافة الى سرعة التنقل 

 لمعاينة الاضافة إنزل أسفل المدونة

طريقة إضافة زر الصعود إلى أعلى لمدونات بلوجر

أولا - توجه الى لوحة التحكم فى بلوجر  من هنا 

ثم قالب >>  تحرير Html >>

2 - ثم ابحث عن

</head>

3 - ضع قبله (فوق) الكود التالي

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4 - ثم ابحث عن

]]></b:skin> 

5 - ضع قبله (فوق) الكود التالي

.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;
}

6 - وأخيرا إبحث عن

</body>

7 - ثم ضع قبله (فوق) الكود التالي

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

قم بحفظ القالب ومبروك عليك الإضافة

إلى هنا نكون قد وصلنا إلى ختام درس اليوم
نلقاكم في درس جديد بإذن الله

 أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها في التعليق