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

تعتبر اضافة صندوق التعريف بالكاتب من اهم اضافات المدونة هو من الامر المهم لدى الزوار و اليوم في هذه التدوينة سوف اشرح لكم كيفية اضافة صندوق التعريف بالكاتب وهذه الاضافة تضيف شكلا ولمسة رائعة للمدونة .

ولكن هذه المرة بشكل مختلف عن اضافات الكتاب الموجودة في المواقع الاخرى حيث قام فريق عمل عبدوش ويب بإضافة لمسات جميلة من الناحية الشكلية والبرمجية للاضافة.
تحتوي هذه الاضافة على عدة مميزات نزكر لكم اهمها تتلخص في الاتي

مميزات اضافة التعريف بالكاتب

1.  متعددة المؤلفين 
2. عدم الحاجة الى كتابة وصف واسم كل كاتب على حدى 
3. جلب تلقائى لاسم و وصف صورة الكاتب من للملف الشخصي في بلوجر 
4. شكل عصري ومتجاوب
5. الاضافة لا تحتوي على توقيع مصمم
6.  شكل جذاب ومتوافق مع جميع مقاسات الشاشات 
7. امكانية استخدام الاضافة في تصاميمك
8. امكانية التحكم في اخفاء صندوق التعريف من رسائل المدونة 

هذه الاضافة متعددة المؤلفين لا تحتاج الى كتابة اسم كل كاتب و ونبذة عن كل كاتب سيتم جلب تلقائي للصورة واسم الكتاب ونبذه عنه تحت اي تدوينة حسب كاتبها من ملفك الشخصي على بلوجر.
 بعد ذلك ننتقل الى طريقة تركيب اضافة صندوق التعريف بالكاتب اضاف لتركيب هذه الاضافة اتبع الخطوات بالترتيب لتجنب حدوث اي اخطاء وقبل تركيب الاضافة قم باخذ نسخة احتياطية من القالب تجنب لحدوث اي خطاء

المعاينة المباشرة للاضافة :

معاينة

طريقة تركيب الاضافة

1. قم بتسجيل الدخول الى بلوجر
2. انتقل الى لوحة التحكم 
3. اذهب الى المظهر 
4. قم بالضغط على تحرير HTML  
5. استخدم ctrl  +  c   للنسخ
6. استخدم ctrl  +  v   للصق

قم بنسخ الكود التالي وضعه فوق الوسم /b:skin

/* ================== 
 *  Admine Profile
 * ================== */
#admine-profile{display:table;max-width:97%;margin-top:30px;margin-right:5px;background-color:#efefef}
.admine-profile{float:center;text-align:right;width:auto;max-width:70%;margin-bottom:20px;margin-right:110px;margin-top:20px;font-size:20px;font-family:'Lalezar',cursive}
.admine-profile a{color:blue;font-weight:bolder;font-family:'El Messiri',sans-serif;font-size:20px;padding-top:10px}
#admine-profile img{width:150px;margin:0 auto;display:block;border-radius:100%;float:right;padding:20px 18px}
@media screen and (max-width:480px){#admine-profile{max-width:100%;margin-top:50px;text-align:center}#admine-profile img{margin-right:30%;width:130px;margin-bottom:-10px}.admine-profile a{font-size:13px;text-align:center}.admine-profile{margin-right:5px;font-size:13px;text-align:center;max-width:100%;float:right}.name-admine{font-size:13px}}

 

بعد ذلك قم بنسخ الاكواد الخاصة بي Html   بعد بنسخ الاكواد التالية قم بوضعها  اسفل الوسم  <data:post.body/>  ستجده متكرر عدة مرات في القالب ضع الاكواد اسفل اخر واحد تجده

<b:if cond='data:post.authorAboutMe'>
<div id='admine-profile'>
<b:if cond='data:post.authorPhoto.url'>
 <img expr:src='data:post.authorPhoto.url' itemprop='image'/>
  <b:else/>
 <img class='admine-profile' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh511YGDsj5pe1JK_Ph2s-cUUm5bYMtvdwrOafsqUPJFrwym8xkT0EM-P7mLh2U5zEZs102JJdzwgwWjMR901z_rpGrhw-mnHAO0hRzmMDLHMTzb4RxR9qY5hFECuAnxQ5TL0nY7gd7J5s/s1600/no-avatar-50.png'/>
  </b:if>
<div class='admine-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  
  <div>
<span class='name-admine'>
  كتب بواسطة :   </span><a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
 </a>
  </div>
  <span itemprop='description'><data:post.authorAboutMe/></span>
</div>
</div>
</b:if>

شرح التعديل على الاضافة
لتغير لون خلفية صندوق التعريف الكاتب قم باستبدال الكود  #f6f6f6  باي لون يناسبك يمكنك استخدام موقع html color codes لاستخراج اكواد الالوان 
لتغير لون البودر الخاص بالخلفية قم باستبدال الكود  #eee باي لون يناسب تصميم موقعك
لتغير لون البودر الخاص بالخلفية قم باستبدال الكود  #eee باي لون يناسب تصميم موقعك