اضافة " عن المؤلف " في كل تدوينة - about author

السلام عليكم ،

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

معاينة اضافة عن الكاتب

تابع بقية التدوينة اذا اعجبتك الاضافة ....

__________________________________________________________________

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

الخطوة الاولى

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

الخطوة الثانية

1 - ابحث عن :

]]></b:skin>

2- واستبدلها بـ هذا الكود :كود رقم 1

 /***** Author Box ********************/



.author-box {

background: #F7F7F7;

margin: 20px 0 40px 0;

padding: 10px;

border: 1px solid #E6E6E6;

overflow: auto;

}



.author-box p {

margin: 0;

padding: 0;

}



.author-box img {

background: #FFFFFF;

float: right;

margin: 0 0 10px 10px;padding: 4px;

border: 1px solid #E6E6E6;

}



]]></b:skin>

 3- ثم ابحث عن :

<div class='post-footer-line post-footer-line-1'>

4- واضف الكود التالي بعدها مباشرة : كود رقم 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-box'>

<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://2.bp.blogspot.com/_0JSsw4H6sns/TDBi2u-pkzI/AAAAAAAADbU/HpGA8el0h_U/S220/adi+arar.png' width='70'/><b>اكب هنا العنوان</b><br/>

اكتب عنك ما تريد داخل الصندوق<br/></p>

</div>

</b:if>

 5- تستطيع ان تضيف الكود السابق في عدة اماكن اخرى في قالب مدونتك مثل:

بعد او قبل : <div class='post-footer'>

 لتظهر في اول التدوينة اضف الكود قبل : <data:post.body/>

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

 __________________________________________________________________

الخطوة الثالثة

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

 في الكود رقم 1 :



القسم الاول الكتابة والحدود في الصندوق :

.author-box {

background: #F7F7F7;    لون الخلفية الرئيسية للصندوق

margin: 20px 0 40px 0;     الابعاد عن الهوامش

padding: 10px;                   بعد الكتابة عن الحد

border: 1px solid #E6E6E6;   لون الحد وسمكه

overflow: auto;

}

القسم الثاني - الصورة داخل الصندوق :

.author-box img {

background: #FFFFFF; :      لون الخلفية قبل اظهار الصورة

   right - left   مكان الصورة                 float: right;

margin: 0 0 10px 10px;    الابعاد عن الهوامش

padding: 4px;                  عرض اطار الصورة



border: 1px solid #E6E6E6;       سمك خط اطار الصورة ولونه

}

في الكود رقم 2 :



 height='70        ارتفاع الصورة

  width='70       عرض الصورة



وهذا هو رابط صورة المدون غيره برابط صورتك ، على ان تكون الصيغة png

http://2.bp.blogspot.com/_0JSsw4H6sns/TDBi2u-pkzI/AAAAAAAADbU/HpGA8el0h_U/S220/adi+arar.png

اتمنى ان يكون الشرح وافي ومتكامل ، وبالتوفيق دوما ادعو لي ولكم .