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

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

فوائد جعل بعض الأدوات معلقة

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

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

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

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

لاحظ أداة اطلب خدمتى على خمسات عند التمرير

والان جاء وقت شرح التركيب على مدونتك 

شرح التركيب 

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

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

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

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

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

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

ثم قم بالحفظ 

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

وبهذا يقود قد انتهى الموضوع دمتم فى رعاية الله متتبعينا الكرام