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

السلام عليكم ورحمة الله وبركاته زوار ومتابعي مدونة عدنان ويب اهلاً بكم في تدوينة جديدة

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

                                                                      والأن طريقة التركيب:

ندخل على لوحة التحكم >> قالب >>تحرير  html نضغط 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>

                                           انتهى الشرح انتظروا شروحات جديد من عدنان ويب

                                                              لاتنسى ترك تعليق يشجعنا

                                                             الرجاء عند النقل ذكر المصدر