تغيير لون و خلفية تعاليق صاحب مدونة بلوجر لتظهر مختلفة عن باقي التعاليق

تغيير لون و خلفية تعاليق صاحب مدونة بلوجر لتظهر مختلفة عن باقي التعاليق

السلام عليكم ورحمة الله وبركاته .. ! 

أسعد الله أوقاتكم بكل خير أحبائي ، 

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

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

هذه التغييرات تتعلق بكود CSS مع كود يحتوي على أداة شرط if وسأطرق في القادم إن شاء الله إلى كيفية إضافة هذه الأكواد على قالبك.

 الآن نأتي إلى طريقة الإضافة 

توجه إلى لوحة التحكم الخاصة بمدونتك، و اتبع الخطوات التالية

1. اظغط على "تصميم"

2. تم "تحرير HTML"

3. تم ضع علامة على " توسيع قوالب عناصر واجهة المستخذم"

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

5. و ابحث عن الكود التالي باستخدام "Ctrl+F" 

]]></b:skin>

قبله مباشرة أضف كود الـ css التالي

.mbt-comment-body {
background: #FFFFFF;
color: #008000;
border: 1px solid #008000;
margin:0;
padding:0 0 0 10px;
width:520px;
}

مايجب أن تعرفه عن كود css السابق، حتى يتسنى لك التعديل عليه لتظهر التعاليق بالشكل الذي تريد.

#FFFFFF  لون الخلفية التي سيظهر بها التعليق. 'عليك تغيير الرموز بالرموز المناسبة للونك'

#008000  لون التعليق الخاص بك الذي سيظهر به.

1px solid #00800إعدادات تخص الإطار الذي سيظهر وسطه التعليق، " 1px تخص حجم أو سمك الإطار ، Solid نوع الإطار "هنا يتعلق الأمر بخط متصل" ، و الرموز المتبقية تشير إلى لون الإطار. " كل هذه الإعدادات يمكنك التعديل عليها بما يناسب مدونتك".

نأتي هنا إلى الكود الثاني و المتعلق بأداة الشرط if

دائما باستعمال طريقة البحث، نبحث عن الكود التالي 

<data:commentPostedByMsg/>

ونعاين تتمة الكود لنجده على الشكل التالي

<data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd> 

هنا بعد تحديدنا لموقع الكود و ما لُون بالأحمر، سنضيف له بعض الأسطر  بين الأسطر الملونة ليصبح الكود كالتالي

<data:commentPostedByMsg/> 
          </dt> 
<b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/> 
          <dd class='comment-body'> 
            <b:if cond='data:comment.isDeleted'> 
              <span class='deleted-comment'><data:comment.body/></span> 
            <b:else/> 
              <p><data:comment.body/></p> 
            </b:if> 
          </dd> 
</b:if>

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

أي استفسارات أنا رهن الإشارة ، لا تبخلو عني بتعليقاتكم،

المصدر : مدونة نوردكس