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

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

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

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

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 

2 - ثم قالب (المظهر) >>  تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F

</head>

4 - أضف قبله الكود التالي (فوق)

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

5 - ثم ابحث عن الوسم التالي

 ]]></b:skin>

6 - أضف قبله الكود التالي (فوق)

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

إضغط على حفظ المظهر

الآن توجه الى مدونتك وشاهد النيجة


تم بحمد الله ...

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

باب التعليقات مفتوح للجميع