السبت، 19 أبريل 2014

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


اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم درس بسيط جدا عن كيفية جعل أى اضافة فى مدونتك عند التمرير لأسفل فى المدوة وهى ما تسمى بـ (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

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

4 التعليقات:

  1. فكرة جيدة وشرح أكثر من رائع يابطل تحياتى لك

    ردحذف
    الردود
    1. شكرا لمرورك العطر
      صديقى العزيز هادى

      حذف
  2. فكرة جمسلة ورائع لاكن لم تنجح

    ردحذف
    الردود
    1. حاول ثانية مجربة اكتر من مرة يا طيب

      حذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار