كيف تجعل أى اضافة معلقة عند التمرير لأسفل فى بلوجر
اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم درس بسيط جدا عن كيفية جعل أى اضافة فى مدونتك عند التمرير لأسفل فى المدوة وهى ما تسمى بـ (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
وبهذا يكون قد انتهى الموضوع دمتم فى رعاية الله متتبعينا الكرام
من فضلك اضغظ لايك لمشاهدة لينك التحميل
فكرة جيدة وشرح أكثر من رائع يابطل تحياتى لك
ردحذفشكرا لمرورك العطر
حذفصديقى العزيز هادى
فكرة جمسلة ورائع لاكن لم تنجح
ردحذفحاول ثانية مجربة اكتر من مرة يا طيب
حذف