طريقة تخصيص صندوق التعليق في مدونات بلوجر blogger

اليوم وأنا أحاول تعديل مدونتي بعدما خربت مني أستوقني هذا الدرس الهائل العظيم لدي مدونة صديق وهي مدونة سما بلوجر فحولت أن أأتي لكم به عسي أن يفيدكم لأن أطيل عليكم الدرس كالتالي:
سنتعلم في هذا الدرس كيف نضيف كود تخصيص صندوق التعليقات واظهاره بشكل اجمل واكثر اناقة من الشكل المعتاد والمعروف في مدونات بلوجر (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.  تذكر انت غير مقيد بشكل الكود  .

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

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