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


http://lh5.ggpht.com/_0JSsw4H6sns/TAAH7TSzeqI/AAAAAAAAC8E/oeqFla829wc/*1F3._thumb%5B34%5D.jpg?imgmax=800







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


ت2


ت3



ت4



سما بلوجر صندوق التعليق

طريقة التخصيص

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

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

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

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