مساحة إعلانية

الثلاثاء، 15 أبريل، 2014

الثلاثاء، 15 أبريل، 2014

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

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

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

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

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

ابحث عن الوسم </body>  
 وأضف فوقه الكود التالي
<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 بعرض الآداة التي اخترتها حتى لا يكون هناك فارق بين العرض الأساسي والعرض عند التمرير
وبهذا يكون انتهى الموضوع وبالتوفيق

هناك 45 تعليقًا:

  1. اضافة مميزة جدا احسنت فأبدعت

    ردحذف
    الردود
    1. أشكرك أخي الكريم أحمد واحسن الله اليك =r

      حذف
  2. اضافة جميلة جداً .. شكرا لك :)

    ردحذف
    الردود
    1. سررت بمرورك أخي الفاضل محمود تحياتي لك

      حذف
  3. إضافة جميلة وكنت اتوقع انك ستطرحها لانك تستعملها لديك في الموقع (شارك الموضوع) ولكنها لا تركب على جميع القوالب اي لا تتلائم مثل موقعي ^_^ اتمنى التوفيق لك اخ عمرو

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

      حذف
  4. اضافة جميلة جداً اخي العزيز كنت استخدمها سابقاً والاّن اعطيتني فكرة جميل لاعاود استخدامها =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

    ردحذف
    الردود
    1. حبيبي محمد ^_^ =f
      هناك فرق بين الطريقتين فالوسم position واستخدام fixed مثلا معه يجعل الإضافة لاصقة ولكن بشكل دائم اى انك لو في اعلى الصفحة والإضافة في اسفلها ستظهر لك اعلى الصفحة أما sticky تظل الإضافة في مكانها ولا تنزل إلا بعد التمرير وهذا طبعا أفضل وهذا فرق شاسع طبعا الاولى اخف من استخدام اكواد الجافا لكن الثانية أكثر تميزاً ولكن لكل اضافة طبع خاص ويمكن استخدام الطريقتين مع ادوات مختلفة وشكراً لمشاركتك مع الأعضاء تمييز الـ ID وأسهل طريقة لتمييزه انه يكون مكتوب بجواره ID تحياتي لك حبيبي دمت بكل ود

      حذف
    2. شكراً لك فهمت قصدك انا لم اكن الحض هذا لأن الاضافة كانت في اعلى المدونة ولم تشكل فرق ^_^

      حياك الله اخي الغالي , والسلام عليكم ورحمة الله وبركاته

      حذف
    3. وعليكم السلام ورحمة الله وبركاته
      نعم الإضافات في الأعلى تستخدم مع أى طريقة لن تفرق وطبعا الأفضل استخدام position كونه أخف
      أما لو الإضافة تخطط سقف المدة ففيجب حينها ان نستخدم الإضافة الموجوده في هذا الموضوع ستكون الخيار الأمثل
      وتحياتي لك اخي محمد

      حذف
  5. السلام عليكم ورحمة الله وبركاته
    ممتاز اضافة مميزة وحصرية لكن لدي سؤال هل يمكن التحكم في مكان ظهورها
    ماشاء الله طرحت فأبدعت اشكرك أخي العزيز عمرو على هذا الطرح الرائع
    جزاك الله كل خير ووفقك لما يحبه ويرضاه دمت في رعاية الله وحفظه

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      اشتقت لك اخي بدر فينك يا طيب الفترة الماضية
      الحمد لله أنك بخير ويسرني مرورك الكريم

      حذف
    2. بارك الله فيك اخي العزيز وانا ايضا اشتقت لك ولإبداعاتك s=
      وأعتذر عن الغياب بسبب ظروف منعتني من التدوين
      ومتابعة المدونين في الفترة الماضية و الحمد لله على كل حال
      أشكرك جزيل الشكر حبيبي الغالي على اهتمامك وجزاك الله كل خير d =r=

      حذف
    3. المهم أنك بخير أخي الحبيب
      وعوداً حميداً تحياتي لك =r

      حذف
  6. جميل اخي عمرو اضافة مميزة و ممتازة احب استعمالها مع اشهارات ادسنس لانها غير ضارة بالحساب و لمردودها المميز =s

    ردحذف
    الردود
    1. حياك الله أخي سعيد شكراً لمرورك يا غالي ولكن توضيح هي تخالف شروط ادسنس فأدسنس تمنع اى نوع من جعل الإعلان لاصق اياً كانت الطريقة وهذا ما قرأته في احد المناقشات في منتدى الدعم الفني الخاص بأدسنس وكان السؤال حول تلك الإضافات هي لا يسمح بها سوى للحسابات الخاصة التي يحصل عليها كبار المواقع التي يتجاوز زوارها 30 مليون شهرياً يعني تقريباً من ترتيبهم في اليكسا اقل من 3 آلاف غير ذلك قد يحظر الحساب فإحذر يا طيب وتحياتي لك =r

      حذف
  7. شكرا ئلك اخي بصراحة مدونتك اكثر من رائعة و جميلة و انت مبدع بمعنى الكلمة و انا كتير استفدت من شروحاتك
    انا منير من سوريا عمري 18 سنة و ان شاء الله من متابعين مدونتك

    ردحذف
    الردود
    1. حياك الله أخي منير وحيا الله سوريا الأبية واهلها واتشرف بمتابعتك اخي الكريم

      حذف
  8. سؤال اخي كيف استطيع عمل كلمات دلالية للمدونة تظهر على الجهة اليمنى من المدونة لأني ارى مدونات عاملة كلمات مفتاحية في المدونات غير التسميات الاقسام يعني

    ردحذف
    الردود
    1. هم يضيفون آداة الأقسام مرتين مرة تعرض بشكل القائمة ومرة تعرض بشكل السحابة راجع هذا الموضوع سيوضح أكثر
      http://cnmu.blogspot.com/2013/05/Customize-Labels-Widget.html

      حذف
    2. شكرا ئلك يا غالي تم الاطلاع الموضوع شكرا لك اخي

      حذف
    3. العفو يا طيب بالتوفيق

      حذف
  9. شكرا على الاضافة ولكني رأيت بان هناك اضافة لاتبقى لاصقة حتى اسفل المدونة لكني لم استكع سحبها من مدونة اجنبية

    ردحذف
    الردود
    1. ربما لا تكون إضافة ولكن جزء من تصميم القالب او ربما لا تكون خاصة ببلوجر عموما ان صادفت طريقة مماثلة بالتأكيد سيتم عرضها ليستفيد الجميع وشكرا لمرورك

      حذف
  10. شكراً اخي لكني لم افهم طريقة التركيب؟

    ردحذف
    الردود
    1. ما الجزء الذي لم تفهمه بالضبط اخي
      كل ما عليك فعله يا طيب هو اضافة الكود الاول فوق الوسم </body>
      ثم ابحث عن اسم الآداة التي تريدها ان تكون لاصقة انسخ معرفها واستبدله في الكود ومعرف الآداة هو الكلمة التي بجوار id

      حذف
  11. موضوع رائع ولكن كيفي جعل صقة قائمة المدونة لا =f

    ردحذف
    الردود
    1. تبحث عن معرف القسم أو القائمة وتضيفة بدلا من معرف الآداة في الشرح ID لكل جزء في القالب معرف خاص فإضافة معرف اى جزء سيجعله لاصق وبالتوفيق

      حذف
  12. شكراااا أخي علي هذه التدوينة كنت ابحث عنها منذ زمن واستطعت تركيبها لكن للأسف تختفي خلف باقي الادوات هل توجد طريقة لجعلها تظهر
    صورة توضيحية http://im57.gulfup.com/Xf0lWB.png فما الحل

    ردحذف
    الردود
    1. أظن ان هناك خطا لديك في التركيب لانني ارى اغلب الإضافات مرتفعه عن الخلفية حاول ان تكون الإضافة داخل آداة HTML/JavaScript
      وان تضيف المعرف بشكل مضبوط

      حذف
    2. قمت باضافة الاداة بالطريقة الصحيحة أخي ولكنها تختفي خلف باقي الادوات

      حذف
    3. جرب التالي هذا الكود في الشرح
      z-index:9999;
      قم بزيادة الرقم 9 به واضف ثلاث تسعات او اربع اخرى ان لم يضبط فهناك مشكلة في تصميم اجزاء السايد بار لديك بحيث تظل فوق كل شئ

      حذف
    4. تحياتي لك أخي وشكرا علي ردك علي جميع رسائلي =s وهذا ليس عيب في الاداة بينما عيب في بنية قالبي الخاص حيث عندما اضع أي اداة تختفي خلف باقي الاضافات شكراا لك علي ردك

      حذف
  13. أخي هل يمكن ان اتحكم في ارتفاع الاداة اي اني اريد ان اجعلها تحت الهيدر لكن انها تغطي عليه صورة توضيحية
    http://im80.gulfup.com/z2yFdm.gif
    أرجو الرد

    ردحذف
    الردود
    1. قلل الرقم 9999 في الكود التالي الموجود داخل كود الآداة
      z-index:9999;
      يعني اجعله مثلا 999 او اقل لحين تصل الى رقم يجعل الآداة اسفل القائمة وفي نفس الوقت تعمل جيداً

      حذف
  14. شكرا لك أخي علي الرد ولكني حاولت أكثر من مرة ولكن لم يفلح الامر ماذا علي أن أفعل

    ردحذف
    الردود
    1. هذا امر قد يتطلب التعديل على الهيدر نفسه أخي الكريم وهذه امور دعم فني للأسف يا طيب لا اقدمها

      حذف
    2. أزال المؤلف هذا التعليق.

      حذف
    3. شكرا لك أخي علي الرد ولا يهمك
      ولكن هل هناك حل لجعل هذه الاضافة الموجودة في الهايدر
      ثابته اي اني لا اريدها لاصقة اريد ان تصبح ثابته لا تتحرك عند النزول
      ( صورة توضيحية لها ) http://im71.gulfup.com/RUttcD.png

      حذف
    4. غاباً أخي لو بحثت عن الكود التالي
      position: fixed ;
      في اكواد القائمة وحذفته سيحل هذا الأمر

      حذف
  15. شكرا لك لقد أضفت هته الإضافة الرائعة جدااااااااا في مدونتي الخاص بالربح من أدسنس
    http://24enjoy.blogspot.com/

    ردحذف
  16. بارك الله فيك والله انا بدور عليها من فتره كبيره
    تم تنفيذها على القائمه المنسدله على مدونتى
    ارجو تقييمك
    http://it-elgold.blogspot.com/

    ردحذف
  17. رايت متل الكود دى في مدونة ابو اياد معدل عليه n=

    ردحذف
    الردود
    1. الإضافات احيانا تكون مكرره في كثير من المدونات لكن انا حريص على عرض اكواد خاصه بي لذلك الكود بهذا النسق هو كود خاص بنا فإن رأيت كود بنفس نسق كودنا فهو منسوخ من عندنا لكن قد يكون تشابه لا اكثر في طبيعة الإضافة

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©