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

Mohamed Fesal
يناير 14, 2017

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

زر لاصعود لأعلي من الاضافات التي لا يستغني عنها اي موقع لانها تعطي للموقع شكل جمالي كما توفر علي زائر موقعك او مدونتك عناء الصعود لاعلي المدونة خصوصا اذا كان حجم الموضوع طويل .

" الاضافة مثل الموجودة بمدونتنا "

طريقة تثبيت الاضافة :

اذهب الي قالب المدونة ثم ابحث عن <head/> 

قم بوضع هذا الكود فوقها

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

بعد ذلك م بالبحث عن <style/>

قم بوضع هذا الكود فوقة

.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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

قم بحفظ القالب