مدونة تقنية شاملة

✨ مقدمة

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

🧭 طريقة إضافة زر الصعود

1. الدخول إلى القالب

ندخل إلى لوحة تحكم بلوجر

نختار المظهر (Theme)

ثم تحرير HTML

2. إضافة مكتبة الأيقونات

نبحث عن:

</head>

ونضيف قبله:

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

3. إضافة تنسيق الزر (CSS)

نبحث عن:

]]></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;
}

4. إضافة الزر + السكربت

نبحث عن:

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

✔ بعد الحفظ

احفظ القالب

ادخل إلى مدونتك

انزل للأسفل قليلًا

ستظهر أيقونة الصعود ↑

⚠ ملاحظات مهمة:

يجب أن يكون jQuery موجود في القالب (غالبًا موجود افتراضيًا)

لا تكرر نفس الأكواد مرتين

لا تعدل أسماء الكلاسات.

🎯 النتيجة

✔ زر الصعود احترافي

✔ يعمل و متجاوب على جميع الأجهزة

✔ يظهر ويختفي تلقائيًا

✔ تصميم أنيق

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

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