السلام عليكم ،
اعتقد بأنك قد شاهدت مدونات منصة wordpress ، وكيف تكون كل تدوينة متبوعة بصندوق يظهر بعض المعلومات التي يكتبها المؤلف عن نفسه مع صورة له ، والكثير منا تمنى ان يحصل على هذه الاضافة في مدونات blogspot ، في هذه التدوينة سأبين بأذن الله طريقة اضافة هذا الصندوق الجميل في مدونات بلوجر ، قبل اي شيء شاهد معاينة لهذه الاضافة من الرابط التالي :
تابع بقية التدوينة اذا اعجبتك الاضافة ....
- طريقة تركيب الاضافة -
4- واضف الكود التالي بعدها مباشرة : كود رقم 2
6- احفظ القالب ومبروك عليك الاضافة .
طريقة تخصيص الاضافة
في الكود رقم 1 :
القسم الاول الكتابة والحدود في الصندوق :
padding: 4px; عرض اطار الصورة
border: 1px solid #E6E6E6; سمك خط اطار الصورة ولونه
}
في الكود رقم 2 :
height='70 ارتفاع الصورة
width='70 عرض الصورة
وهذا هو رابط صورة المدون غيره برابط صورتك ، على ان تكون الصيغة pnghttp://2.bp.blogspot.com/_0JSsw4H6sns/TDBi2u-pkzI/AAAAAAAADbU/HpGA8el0h_U/S220/adi+arar.png
اعتقد بأنك قد شاهدت مدونات منصة 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 == "item"'>
<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; : لون الخلفية قبل اظهار الصورة
.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
اتمنى ان يكون الشرح وافي ومتكامل ، وبالتوفيق دوما ادعو لي ولكم .
شارك هذه الصفحة :
|
0 التعليقات:
إرسال تعليق