شرح عمل الاضافه اللاصقه لمدونات بلوجر

شرح عمل الاضافه اللاصقه لمدونات بلوجر

الإضافات اللاصقة أو مايسمى بـ Sticky Widget هي تلك الإضافات التي تظل ظاهرة مع تمرير الشاشة طبعا رؤية مثال يكون أفضل اضغط على الرابط بالاسفل وشاهد اضافة حديث صحيح

معاينه الاضافه اللاصقه من هنا

لو لاحظت في مثال المعاينة إضافة حديث صحيح تظل ملتصقة مع تمرير الشاشة هذا هو المقصود

 أولا ما الهدف من هذه الخاصية

هناك بعض الإضافات يود المدون ان تكون ظاهرة ولافته لنظر الزوار وهذه الخاصية افضل طريقة لتأدية الغرض
هناك ايضاً من يكون لديه مساحات إعلانية يود ان تكون بهذا الشكل لكن ملحوظة لا تستخدمها مع الشركات الربحية كأدسنس فهذا مخالف لشروطها في استخدام الإعلانات

ثانياً كيفية التركيب

1- من  لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</body>

 وأضف فوقه الكود التالي

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

  ثم ابحث عن اسم الإضافة التي تريدها ان تكون لاصقه وانسخ المعرف الخاص بها واستبدله بـ th3maestro
مثال

اضافة حديث صحيح

 كما نرى اضافة حديث صحيح ظهر ان معرفها هو HTML1

الان استبدل كلمة 
th3maestro  فى الكود السابق بمعرف الاضافه كما فى المثال والذى هو HTML1

يمكنك ايضا تغيير عرض الاضافه بالبحث عن هذا الكود وتغييره لما يناسبك
width: 330px