كيف تجعل اى اضافة لاصقة في بلوجر

الإضافات اللاصقة أو مايسمى بـ Sticky Widget هي تلك الإضافات التي تظل ظاهرة مع تمرير الشاشة طبعا رؤية مثال يكون أفضل
لو لاحظت في مثال المعاينة إضافة المشاركات الشائعة تظل ملتصقة مع تمرير الشاشة هذا هو المقصود
أولا ما الهدف من هذه الخاصية
هناك بعض الإضافات يود المدون ان تكون ظاهرة ولافته لنظر الزوار وهذه الخاصية افضل طريقة لتأدية الغرضهناك ايضاً من يكون لديه مساحات إعلانية يود ان تكون بهذا الشكل لكن ملحوظة لا تستخدمها مع الشركات الربحية كأدسنس فهذا مخالف لشروطها في استخدام الإعلانات
ثانياً كيفية التركيب
ابحث عن الوسموأضف فوقه الكود التالي
<script>
//<![CDATA[
cnmu_makeSticky("ID");
function cnmu_makeSticky(elem) {
var cnmu_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
cnmu_sticky.parentNode.insertBefore(scrollee, cnmu_sticky);
var width = cnmu_sticky.offsetWidth;
var iniClass = cnmu_sticky.className + ' cnmu_sticky';
window.addEventListener('scroll', cnmu_sticking, false);
function cnmu_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
cnmu_sticky.className = iniClass + ' cnmu_sticking';
cnmu_sticky.style.width = width + "px";
} else {
cnmu_sticky.className = iniClass;
}
}
}
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
//]]>
</script>
<style>
.cnmu_sticking {position:fixed !important; top:0; z-index:9999; margin-top: 0; position:relative\9 !important;}
.widget.cnmu_sticky {width: 245px !important;}
</style>
ثم ابحث عن اسم الإضافة التي تريدها ان تكون لاصقه وانسخ المعرف الخاص بها واستبدله بـ ID
مثال

كما نرى اضافة المشاركات الشائعة ظهر ان معرفها هو Popularposts1
أيضاً نجد معرف آخر وهو HTML2 أنا فقط علمته لكي انوه ان إضافات HTML/JavaScript
معرفها لا يكون اسم ولكن يكون HTML ثم رقم طبعا تحدد الإضافة التي تريد بالبحث عن اسمها
أيضاً استبدل الرقم 245 بعرض الآداة التي اخترتها حتى لا يكون هناك فارق بين العرض الأساسي والعرض عند التمرير
وبهذا يكون انتهى الموضوع وبالتوفيق
اضافة مميزة جدا احسنت فأبدعت
ردحذفأشكرك أخي الكريم أحمد واحسن الله اليك =r
حذفاضافة جميلة جداً .. شكرا لك :)
ردحذفسررت بمرورك أخي الفاضل محمود تحياتي لك
حذفإضافة جميلة وكنت اتوقع انك ستطرحها لانك تستعملها لديك في الموقع (شارك الموضوع) ولكنها لا تركب على جميع القوالب اي لا تتلائم مثل موقعي ^_^ اتمنى التوفيق لك اخ عمرو
ردحذفحياك الله أخي الغالي مصعب الإضافة يمكن ان تعمل على موقعك يا طيب على أى آداة تريد لكن طبعا المظهر سيكون مخالف لمظهر مدونتي لان القالب مختلف
حذفوشاكر لمرورك الكريم يا طيب
اضافة جميلة جداً اخي العزيز كنت استخدمها سابقاً والاّن اعطيتني فكرة جميل لاعاود استخدامها =s هل يوجد فرق بين الطريقة الخاصة بك وطريقتي التي تكون عبر الـcss عبر وسم الـposition ؟ اعلم ان طريقتي ستكون صعبة في عملها خاصة مع الاضافات في التخطيط , فهي تملك وسم غير مستعمل في اكواد الـcss مثلاً الوسم الخاص بالمشاركات الشائعة على سبيل المثال هو : Html5 بعد ان يبحث الشخص عن هذا الوسم في الـcss لن يجده وسيحتاج الى اضافته بنفسه وكثير من الاشخاص لا يعرف الفرق بين الـID والــclass وهذا سيجعل الشخص يتلخبط =x بالنسبة للمبتدئين الطريقة الخاصة بك ستكون اسهل ولكن بالنسبة لمن يريد سرعة في عمله سيستخدم طريقتي ولكنها تحتاج خبرة قليلة , الموضوع جميل جداً ومفيد بكلماته القليلة والمفيد ( خير الكلام ما قل ودل =q )
ردحذفبالنسبة لمن يريد ان يعرف الفرق بين id و class من القراء فليتفضل بتكملة التعليق:
id : يمكن تطبيقها على كود واحد في html وهي تكتب في اكواد الـcss هكذا مثلا : #example , (يعني يوضع هذا الرمز # قبل المعرف ) وتكتب في الـhtml هكذا مثلاً : <div id='example'> الاّن بعد استعمال المعرف في الـhtml مرة واحدة لا يمكن استعماله مرة اخرى في القالب وستظهر رسالة خطأ في حال جربت ذلك .
بالنسبة لـclass : يمكن تطبيقها على عدة اكواد في الـhtml وهي تكتب في css هكذا مثلاً : .example (يعني تبدأ بهذا الرمز . قبل المعرف) وتكتب في الـhtml هكذا مثلاً : <div class='example'> ويمكن استخدام المعرف لعدد لا نهائي في القالب .
والسلام عليكم ورحمة الله وبركاته.
اعتذر نسيت ان اكتب الرمز الذي احبه في الرسالة : ^_^ =g
حبيبي محمد ^_^ =f
حذفهناك فرق بين الطريقتين فالوسم position واستخدام fixed مثلا معه يجعل الإضافة لاصقة ولكن بشكل دائم اى انك لو في اعلى الصفحة والإضافة في اسفلها ستظهر لك اعلى الصفحة أما sticky تظل الإضافة في مكانها ولا تنزل إلا بعد التمرير وهذا طبعا أفضل وهذا فرق شاسع طبعا الاولى اخف من استخدام اكواد الجافا لكن الثانية أكثر تميزاً ولكن لكل اضافة طبع خاص ويمكن استخدام الطريقتين مع ادوات مختلفة وشكراً لمشاركتك مع الأعضاء تمييز الـ ID وأسهل طريقة لتمييزه انه يكون مكتوب بجواره ID تحياتي لك حبيبي دمت بكل ود
شكراً لك فهمت قصدك انا لم اكن الحض هذا لأن الاضافة كانت في اعلى المدونة ولم تشكل فرق ^_^
حذفحياك الله اخي الغالي , والسلام عليكم ورحمة الله وبركاته
وعليكم السلام ورحمة الله وبركاته
حذفنعم الإضافات في الأعلى تستخدم مع أى طريقة لن تفرق وطبعا الأفضل استخدام position كونه أخف
أما لو الإضافة تخطط سقف المدة ففيجب حينها ان نستخدم الإضافة الموجوده في هذا الموضوع ستكون الخيار الأمثل
وتحياتي لك اخي محمد
السلام عليكم ورحمة الله وبركاته
ردحذفممتاز اضافة مميزة وحصرية لكن لدي سؤال هل يمكن التحكم في مكان ظهورها
ماشاء الله طرحت فأبدعت اشكرك أخي العزيز عمرو على هذا الطرح الرائع
جزاك الله كل خير ووفقك لما يحبه ويرضاه دمت في رعاية الله وحفظه
وعليكم السلام ورحمة الله وبركاته
حذفاشتقت لك اخي بدر فينك يا طيب الفترة الماضية
الحمد لله أنك بخير ويسرني مرورك الكريم
بارك الله فيك اخي العزيز وانا ايضا اشتقت لك ولإبداعاتك s=
حذفوأعتذر عن الغياب بسبب ظروف منعتني من التدوين
ومتابعة المدونين في الفترة الماضية و الحمد لله على كل حال
أشكرك جزيل الشكر حبيبي الغالي على اهتمامك وجزاك الله كل خير d =r=
المهم أنك بخير أخي الحبيب
حذفوعوداً حميداً تحياتي لك =r
جميل اخي عمرو اضافة مميزة و ممتازة احب استعمالها مع اشهارات ادسنس لانها غير ضارة بالحساب و لمردودها المميز =s
ردحذفحياك الله أخي سعيد شكراً لمرورك يا غالي ولكن توضيح هي تخالف شروط ادسنس فأدسنس تمنع اى نوع من جعل الإعلان لاصق اياً كانت الطريقة وهذا ما قرأته في احد المناقشات في منتدى الدعم الفني الخاص بأدسنس وكان السؤال حول تلك الإضافات هي لا يسمح بها سوى للحسابات الخاصة التي يحصل عليها كبار المواقع التي يتجاوز زوارها 30 مليون شهرياً يعني تقريباً من ترتيبهم في اليكسا اقل من 3 آلاف غير ذلك قد يحظر الحساب فإحذر يا طيب وتحياتي لك =r
حذفشكرا ئلك اخي بصراحة مدونتك اكثر من رائعة و جميلة و انت مبدع بمعنى الكلمة و انا كتير استفدت من شروحاتك
ردحذفانا منير من سوريا عمري 18 سنة و ان شاء الله من متابعين مدونتك
حياك الله أخي منير وحيا الله سوريا الأبية واهلها واتشرف بمتابعتك اخي الكريم
حذفسؤال اخي كيف استطيع عمل كلمات دلالية للمدونة تظهر على الجهة اليمنى من المدونة لأني ارى مدونات عاملة كلمات مفتاحية في المدونات غير التسميات الاقسام يعني
ردحذفهم يضيفون آداة الأقسام مرتين مرة تعرض بشكل القائمة ومرة تعرض بشكل السحابة راجع هذا الموضوع سيوضح أكثر
حذفhttp://cnmu.blogspot.com/2013/05/Customize-Labels-Widget.html
شكرا ئلك يا غالي تم الاطلاع الموضوع شكرا لك اخي
حذفالعفو يا طيب بالتوفيق
حذفشكرا على الاضافة ولكني رأيت بان هناك اضافة لاتبقى لاصقة حتى اسفل المدونة لكني لم استكع سحبها من مدونة اجنبية
ردحذفربما لا تكون إضافة ولكن جزء من تصميم القالب او ربما لا تكون خاصة ببلوجر عموما ان صادفت طريقة مماثلة بالتأكيد سيتم عرضها ليستفيد الجميع وشكرا لمرورك
حذفشكراً اخي لكني لم افهم طريقة التركيب؟
ردحذفما الجزء الذي لم تفهمه بالضبط اخي
حذفكل ما عليك فعله يا طيب هو اضافة الكود الاول فوق الوسم </body>
ثم ابحث عن اسم الآداة التي تريدها ان تكون لاصقة انسخ معرفها واستبدله في الكود ومعرف الآداة هو الكلمة التي بجوار id
موضوع رائع ولكن كيفي جعل صقة قائمة المدونة لا =f
ردحذفتبحث عن معرف القسم أو القائمة وتضيفة بدلا من معرف الآداة في الشرح ID لكل جزء في القالب معرف خاص فإضافة معرف اى جزء سيجعله لاصق وبالتوفيق
حذففعلتها وشكرا
ردحذفشكراااا أخي علي هذه التدوينة كنت ابحث عنها منذ زمن واستطعت تركيبها لكن للأسف تختفي خلف باقي الادوات هل توجد طريقة لجعلها تظهر
ردحذفصورة توضيحية http://im57.gulfup.com/Xf0lWB.png فما الحل
أظن ان هناك خطا لديك في التركيب لانني ارى اغلب الإضافات مرتفعه عن الخلفية حاول ان تكون الإضافة داخل آداة HTML/JavaScript
حذفوان تضيف المعرف بشكل مضبوط
قمت باضافة الاداة بالطريقة الصحيحة أخي ولكنها تختفي خلف باقي الادوات
حذفجرب التالي هذا الكود في الشرح
حذفz-index:9999;
قم بزيادة الرقم 9 به واضف ثلاث تسعات او اربع اخرى ان لم يضبط فهناك مشكلة في تصميم اجزاء السايد بار لديك بحيث تظل فوق كل شئ
تحياتي لك أخي وشكرا علي ردك علي جميع رسائلي =s وهذا ليس عيب في الاداة بينما عيب في بنية قالبي الخاص حيث عندما اضع أي اداة تختفي خلف باقي الاضافات شكراا لك علي ردك
حذفأخي هل يمكن ان اتحكم في ارتفاع الاداة اي اني اريد ان اجعلها تحت الهيدر لكن انها تغطي عليه صورة توضيحية
ردحذفhttp://im80.gulfup.com/z2yFdm.gif
أرجو الرد
قلل الرقم 9999 في الكود التالي الموجود داخل كود الآداة
حذفz-index:9999;
يعني اجعله مثلا 999 او اقل لحين تصل الى رقم يجعل الآداة اسفل القائمة وفي نفس الوقت تعمل جيداً
شكرا لك أخي علي الرد ولكني حاولت أكثر من مرة ولكن لم يفلح الامر ماذا علي أن أفعل
ردحذفهذا امر قد يتطلب التعديل على الهيدر نفسه أخي الكريم وهذه امور دعم فني للأسف يا طيب لا اقدمها
حذفأزال المؤلف هذا التعليق.
حذفشكرا لك أخي علي الرد ولا يهمك
حذفولكن هل هناك حل لجعل هذه الاضافة الموجودة في الهايدر
ثابته اي اني لا اريدها لاصقة اريد ان تصبح ثابته لا تتحرك عند النزول
( صورة توضيحية لها ) http://im71.gulfup.com/RUttcD.png
غاباً أخي لو بحثت عن الكود التالي
حذفposition: fixed ;
في اكواد القائمة وحذفته سيحل هذا الأمر
شكرا لك لقد أضفت هته الإضافة الرائعة جدااااااااا في مدونتي الخاص بالربح من أدسنس
ردحذفhttp://24enjoy.blogspot.com/
بارك الله فيك والله انا بدور عليها من فتره كبيره
ردحذفتم تنفيذها على القائمه المنسدله على مدونتى
ارجو تقييمك
http://it-elgold.blogspot.com/
رايت متل الكود دى في مدونة ابو اياد معدل عليه n=
ردحذفالإضافات احيانا تكون مكرره في كثير من المدونات لكن انا حريص على عرض اكواد خاصه بي لذلك الكود بهذا النسق هو كود خاص بنا فإن رأيت كود بنفس نسق كودنا فهو منسوخ من عندنا لكن قد يكون تشابه لا اكثر في طبيعة الإضافة
حذفهذا الموضوع الذي شيبني كثيرا - رغم أني أريد تثبيتها ولم أفهم بعد أستاذ
ردحذفالله يبارك فيك
وفيكم بارك الله اخي الكريم
حذفلكن لم أفهم ما الذي لم تفهمه من الموضوع ؟
الله يجازيك أستاذ
حذفأريد ان أقول كيف أضع المشاركات الشائعة لا تختفي وقت قراءة الموضوع
الموضوع على اليمين والمشاركات لا تختفي
يكون اجمل الدرس أستاذ
الله يحفظك ياارب