تخصيص صندوق التعليقات

سنتعلم في هذا الدرس كيف نضيف كود تخصيص صندوق التعليقات واظهاره بشكل اجمل واكثر اناقة من الشكل المعتاد والمعروف في مدونات بلوجر (blogspot) ، هذه الاضافة ستجعل زوار مدونتك اكثر شهية لاضافة التعليقات ، طبعا لا يخفى على احد بأن صندوق التعليقات في  منصة (wordpress) يتفوق على نظيره في بلوجر ، ولكن هذه الاضافة ستجعل مدونات بلوجر اكثر احترافية واناقة ، شاهد بعض الصور لنماذج من صندوق التعليقات المخصص :

هل اعجبتك اشكال صندوق التعليقات ، تابع بقية التدوينة لمعرفة طريقة التخصيص

طريقة تركيب اضافة تخصيص صندوق التعليقات

1. من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم ..
2. ثم ابحث عن :

<div class='comment-form'>

  : واستبدلها بـ 

 <div id='mbt-form'> 

   3.  ابحث عن :

]]></b:skin>

واضف قبلها(فوقها) مباشرة هذا الكود :

#mbt-form iframe{

background:#ffffff url(http://farm5.static.flickr.com/4020/4647821870_28f1634a7d_t.jpg) no-repeat bottom right;

border:7px solid #ABABAB;


padding:5px;

font:normal 13pt "tahoma;

color:#ABABAB;

width:450px;

}

#mbt-form iframe:hover{

background:#ffffff url(http://farm4.static.flickr.com/3340/4647190659_cd0b1c00f2_t.jpg) no-repeat bottom right;


border:7px solid #3b5897;

}

#mbt-form a{

color:#3b5897;

احفظ القالب ومبروك عليك الاضافة

___________________________________________________________________

- تخصيص الاضافة -

الان سنتطرق الى طريقة تخصيص هذا الكود ليتناسب مع الوان مدونتك وشكلها نتوكل على الله ونبدأ :

هذه الاجزاء التي يتكون منها الكود 

#mbt-form iframe

#mbt-form iframe:hover

#mbt-form a

1. شكل صندوق التعليق في الوضع العادي .

#mbt-form iframe

هذا الجزء من الكود يحدد طريقة ظهور صندوق التعليق في الوضع العادي او قبل مرور الفارة عليه :

background : لتغيير لون الخلفية باضافة كود للون المراد  او اضافة رابط صورة ليظهر في الخلفية .

                ملاحظة : اذا اردت استخدام لون في الخلفية فقط ، احذف هذا من الكود :  url(http://farm5.static.flickr.com/4020/4647821870_28f1634a7d_t.jpg) no-repeat bottom right;

border: لتحديد حجم الاطار الخارجي ولونه في صندوق التعليق بتغيير القيمة 7 وتغير كود اللون #ABABAB بكود اللون الذي تريده

padding : لتحديد بعد الحدود عن نموذج المشاركة (يرجى عدم تغييرها)

font : حجم خط كلمة " التعليق باسم" ونوعه في نموذج المشاركة ، تستطيع تغيير القيمة 13 لتكبير او تصغير الخط ، وتغيير كلمة tahoma بخط اخر تريده .

color : لون خط كلمة " التعليق باسم" في نموذج المشاركة

width : عرض الصندوق ، تستطيع تغير العرض ليتناسب مع مدونتك .

2.  تخصيص الصندوق عند مرور الفارة عليه :

 #mbt-form iframe:hover

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

3.  لون الروابط في صندوق التعليقات .

#mbt-form a

تحديد لون الروابط " تسجيل خروج" و " الاشتراك عن طريق البريد الالكتروني "

4.  تذكر انت غير مقيد بشكل الكود  .

تستطيع ان تخصص هذا الكود وتصمم الصور التي تريد ان تعرض ، فقط قم بتغيير الروابط داخل الكود الاول بروابط الصور الخاصة بك .

لأي استفسار اترك تعليق