المرجو الانتظار قليلا سوف يتم التوجيه الى المدونة الجديدة وشكرا المرجو الانتظار قليلا سوف يتم التوجيه الى المدونة الجديدة وشكرا

الخميس، 8 مارس 2012

اٍظافة خاصية " عن المؤلف " في كل تدوينة - about author

12:09 ص    أضف تعليقك


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


اعتقد بأنك قد شاهدت مدونات منصة 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
اتمنى ان يكون الشرح وافي ومتكامل ، وبالتوفيق دوما ادعو لي ولكم .

0 التعليقات:

إرسال تعليق