إضافة زر الصعود إلى الاعلى لمدونات بلوجر، هذه الاضافة مهمة لمدونات بلوجر

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

طريقة إضافة زر الصعود سهلة و وسلسة :
1. ندخل الى لوحة التحكم فى بلوجر.
2. ثم نحتار القالب، ونختار تحرير Html.
3. نبحث عن </head> ونضيف قبله الكود التالي.

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

4. ثم نبحث عن ]]></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;
}

5. ثم نبحث عن </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>

وقم بحفظ القالب ومبروك عليك الإضافة والشكل الرائع الجديد لمدونتك ، لا تتردد فى طرح اى مشكلة تواجهك فى التركيب

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

بقلم عبد ربه تحتح

عبد ربه تحتح، مغربي الجنسية، متعلم، متقف، متخصص في علوم المعلوميات، أحب القراءة والتعلم، محب لعالم المعلوميات و البرامج والتدوين الاكتروني و التصميم الجرافيكي، مدون منذ ما يقارب 12 سنة، ناشط على الفيسبوك وتويتر و البلوجر، مهتم بجديد عالم التقنية، ومؤمن بأن التغيير نحو غد أفضل ممكن إن تواجدت الإرادة والعزيمة، حاصل عل دبلوم تقني متخصص في التنمية المعلوماتية، بالإضافة إلى دبلوم تقني في التدبير و التسيير، و خبرة لمدة سنوات في العديد من الميادين التقنية على سبيل المثال البرمجة - التصميم - تطوير - التسويق الالكتروني، و اعمل كمصمم ومسوق الكتروني وايضا مطور و مبرمج في العديد من المواقع