كيف تجعل أى اضافة ثابتة عند التمرير لأسفل فى بلوجر

اليوم وفى موضوع جديد من مدونة عالم تقني أقدم لكم درس بسيط جدا عن كيفية جعل أي اضافة ثابتة فى مدونتك عند التمرير لأسفل وهى ما تسمى بـ (sticky widget) وهذه الطريقة بسيطة جدا

 ربما تحتاج للفت انتباه الزائر المستمر لاضافة معينة مثل اداة المتابعين فى بلوجر مثلا

ربما تكون فى حاجة اى تثبيت اعلانات عن التمرير لزيادة الأرباح مثل اعلانات ادسنس

لذلك فهذه الطريقة تلبى غرضك فيما تريده 

معاينة الإضافة

شرح التركيب 

اذهب للوحة التحكم >> القالب 

>> ابحث عن وسم الــ </body>

ضع قبلـــــــــــــــــه هذا الكود

<script>
//<![CDATA[
alamtiqni_makeSticky("WIDGET ID");
function alamtiqni_makeSticky(elem) {
    var alamtiqni_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    alamtiqni_sticky.parentNode.insertBefore(scrollee, alamtiqni_sticky);
    var width = alamtiqni_sticky.offsetWidth;
    var iniClass = alamtiqni_sticky.className + ' alamtiqni_sticky';
    window.addEventListener('scroll', alamtiqni_sticking, false);
    function alamtiqni_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            alamtiqni_sticky.className = iniClass + ' alamtiqni_sticking';
            alamtiqni_sticky.style.width = width + "px";
        } else {
            alamtiqni_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.alamtiqni_sticking {position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;}
.widget.alamtiqni_sticky {width:100%;}</style>

ثم استبدل WIDGET ID بأى دى الاضافة التى تريد التنفيذ عليها 

يومكنك الحصول عليه بعد الانتقال لقالب مدونتك كما بالصورة

ثم قم بالحفظ 

ملحوظة بخصوص الجزء المحدد باللون الأزرق فى الكود
هو خاص بالاضافة بعد التمرير وهو يعنى ان حجمها سيطل 100% ويمكنك اضافة العديد من الخواص لها على سبيل المثال بامكانه تحد يد مكانها من الصفحة باحد هاتين الخاصيتين margin أو padding

وأي استفسار اترك تعليق