• : تحميل و شرح برنامج تشارلز charles للمزرعة السعيدة 2012 بالصور
  • طريقة رفع المستوى بسرعه فى المزرعه السعيده - How quickly raise level happy farm - 2012
  •  الجزيرة الرياضية +4 بث مباشر من دون تقطيع . مشاهدة
  •  تعرف على قائمة اكثر 30 مدونة عالمية تحقق الربح من التدوين ، وتعرف على السر الحقيقي وراء تحقيقهم لهذه الاموال من المدونات
  • اجعل صندوق التعليق في مدونتك اكثر احترافية ، واضف عليه الوان جميلة لتبهر زوار مدونتك بأناقته

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

السبت، أبريل 14، 2012
السلام عليكم ،


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

2 التعليقات:

غير معرف يقول...

شكرا لك جميلة جدا

Unknown يقول...

عفوا اخى الغالى نورت

إرسال تعليق

 
مدونة البث المباشر 2012 © 2010 | تعريب وتطوير : سما بلوجر | Designed by Blogger Hacks | Blogger Template by ColorizeTemplates