13 أكتوبر 2015

مدون محترف دروس بلوجر نصائح للمدونين CSS إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر

إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر

إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر من أجل زيادة سرعة تحميل المدونة

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

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


معاينة

إضافة زر إظهار و إخفاء التعليقات في بلوجر

1- ادخل إلى لوحة تحكم بلوجر
2- و انقر على قالب
3- و اضغط على تحرير HTML
4- ابحث عن الكود التالي

    <div class='comments' id='comments'>


    مُلاحظة: سوف تجد الكود في الأعلى مُكرر مرتين نحن سوف نستخدم الكود الثاني منه
    الان بعد أن وجدنا الكود الثاني سوف نقوم بمسحه و إستبداله بالكود التالي

    <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">إظهار التعليقات</a>
    <div class='clear'/>
            <div class='comments hide-content' id='comments'>
    <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">إخفاء التعليقات</a>
    <div class='clear'/>


    الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
    /* Show and Hide Comments */
    .hide-content{display:none;margin:0;padding:0;}
    a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
    #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
    a.showcontent:hover{background:#fff;color:#5593f0;}
    #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

    إعدادات التنسيق

    - كود اللون #fff هو خاص بلون كلمة إظهار و إخفاء
    - رقم 15px و هي خاصة بحجم الخط
    - كود اللون #5593f0 هو خاص بلون خلفية الزر


      الان مرة أخرى ابحث عن الوسم </body> و اضف الكود التالي فوقه
      <script type='text/javascript'>
      //<![CDATA[
      // Show and Hide Comments
      function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
      //]]>
      </script>

      الان قُم بحفظ القالب
      اي سؤال او استفسار لا تترد بوضعه في تعليق


      مواضيع ذات صلة
      إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر
      4 / 5
      بواسطة

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

      1. أعجبتني الإضافة تساعد تحميل صفحه بسرعه =e

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

          حذف
        2. شفتها لما ركبتيها =a

          حذف
        3. قلت الكود مكرر مرتين أنا أستبدلت مع الكود الأول وأشتغل ولم يشتغل لما أستبدلتو بالكود الثاني

          حذف
        4. ههههههههههه كيف شفتها انا ركبتها دقيقة فقط =z
          اصلاً انا هغير قالب مدونتي واصمم قالب جديد =s
          بالنسبة للأكواد كل شخص يجرب الكودين و الكود الي تشتغل عليه الإضافة هو الصحيح =a

          حذف
        5. الله يوفقك ننتضر التصميم الجديد

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

        ردحذف
        الردود
        1. كلام سليم اخي مدون
          شكراً لك و لتعليقك
          تم زيارة مدونتك وضع تعليق فيها ا
          احترامي و تقديري لشخصك الكريم

          حذف
      3. دائما متألق مدون محترف موضوع جميل وتقريبا اول موضوع يشرح اضافة هذي الخاصية في تعليقات بلوجر , لك جزيل الشكر =r

        ردحذف
        الردود
        1. شكراً لك صديقي
          تعليقك زاد الموضوع تألق =e

          حذف
      4. السلام عليكم
        سؤال لو سمحت...لماذا عند استخدامي لاحد قوالب بلوجر العادية ( اول ما ننشئ المدونة بتكون موجودة)
        وقت احط فيها اعلان ما بيظهر
        ممكن حل ؟

        ردحذف
        الردود
        1. قد تكون وضعت الإعلان في مكان خاطي
          او هناك اكواد تمنع ظهور الإعلانات

          حذف
      5. أزال أحد مشرفي المدونة هذا التعليق.

        ردحذف
        الردود
        1. شكراً لك يا غالي
          ولكن لا ننشر روابط إشهار

          حذف
      6. رووووووووعه ياغالى بالتوفيق

        ردحذف
      7. السلام عليكم اخ منير ☺
        الموضوع جميل والاضافة اجمل ❤
        لكن ماعندي مكان للتعليقات بمدومني 😅
        انا مدونتي مدونة شخصية
        سأضع الرابط في تعليق منفرد لانه ممنوع الروابط...
        لكن اخي لو سمحت عندي مشكلة
        المشكلة هي القالب الخاص بالموقع ما اقدر اضيف اداة جديدة في التخطيط...وضعت السؤال بقسم الأسئلة الشائعة + وضعت صورة لمعاينة التخطيط... من فضلك هل من حل؟ وشكرا

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

          حذف
        2. المعنى انه لا يوجد للمشكلة .. =v
          على كل حال اخ منير هل استطيع اضافة اداة عدد الزوار من القالب؟ بالتعديل على HTML
          دون الحاجة للتخطيط؟
          تحياتي

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

          حذف
        4. شكرا ياغالي
          ولكن الافضل ان تقوم بإضافة اداة للتخطيط
          ما طريقة اضافتها ؟

          حذف
        5. قم بإضافة هذا الكود

          <div style='clear: both;'/>
          <b:section class='cnsec' id='cnsec' maxwidgets='1' showaddelement='yes'/>
          <div style='clear: both;'/>

          في المكان الذي تريد ان تقوم بجعل الإضافة به
          مع تغيير cnsec بمعرف الادوات في قالبك

          حذف
        6. تعبتك معي اخي =x
          اريد الاضافة اسفل القالب ... اين اضع الكود ؟

          تغيير cnsec بمعرف الادوات في قالبك...لم افهم =d ماهو معرف ادوات قالبي

          الله يعينك +x

          حذف
        7. اخي طبقت ما قلته لي.. تم اضافة قسم بالتخطيط صحيح ولكن عندما اضغط اضافة اداة لا استطيع :(

          حذف
        8. لا عادي ولا يهمك يا غالي
          اضف الكود التالي فوق ]]>

          #cnsec {width:100%; display:block; margin:10px 5px;}
          #cnsec h2 {display:none;}

          و اضف الكود الذي اعطيتك إياه في المكان الذي تريده
          بعدها ادخل التخطيط و انظر إلى المكان الخاص بالإضافة اي يوجد
          المشكلة لا استطيع إفادتك بالمكان ولكن
          جرب إضافة الكود فوق <div id='copyright'>

          حذف
        9. جربت كله ... مافي فائدة
          شكرا على كل حال ماقصرت ياغالي

          حذف
        10. المشكلة انت لم تعرف كيفية تركيب الادوات
          لهذا لا يوجد فائدة

          حذف
      8. أزال أحد مشرفي المدونة هذا التعليق.

        ردحذف
        الردود
        1. اعتذر لمسح التعليق
          تم الرد هنا و الرد في قسم الاسئلة

          حذف
      9. أزال أحد مشرفي المدونة هذا التعليق.

        ردحذف
        الردود
        1. صديقي هنا لا يتم نشر هاشتاغ الحملة

          حذف
      10. موضوع جميل تسمح لي ان اكون من الزائرين الدائمين للمدونة

        ردحذف
        الردود
        1. اهلاً صديقي
          أنت من أول يوم لك في المدونة وأنت من أصحاب المدونة وليس من الزائرين
          احترامي وتقديري لشخصك الكريم =r

          حذف

      يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
      =q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r