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

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


بعد الانتهاء قم بحفظ قالب المدونة .
___________________________________________________________________

طريقة تعديل الكود بما يتناسب مع قالب مدونتك  :

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.  تذكر انت غير مقيد بشكل الكود  .

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

لأي استفسار اترك تعليق
المصدر : مدونة سما بلوجر بتصرف بسيط
أصدقاء(تطوير ويب)
تعليقات Facebook
3تعليقات Blogger

3 عدد التعليقات على موضوع طريقة تنسيق صندوق التعليقات في مدونة بلوجر بتقنية ال css

Hareth Arabiyat يقول...

أخي الكريم أحمد لقد ضهر لي كودين من من أول كود في الخطوة الأولى ماذا أفعل

3rby يقول...

يعطيك العافية اخي الكريم على الشرح

http://3rbyblog.blogspot.com

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .