دورة تصميم ستايلات بلوجر
الادلة
الدرس 3 : كيف تتحكم في ستايل مواضيع المدونة | دورة تصميم ستايلات بلوجر
3:05 ص | مرسلة بواسطة
العربي |
1 التعليقات
1 التعليقات
بعد ان حصلنا على هيدر جميل في الدرس السابق: تصميم هيدر جميل
،، سننتقل الآن الى تعديل ستايل المواضيع.
كل الحكاية و ما فيها اننا سنقوم بتقسيم الموضوع الى الى جزئين،، واحد لتعديل التاريخ و عنوان
الموضوع. و جزء آخر الى تعديل ستايل الموضوع نفسه،، + بونس الدرس.
لذا بدون لف و لا دوران،، سيكون موضوع اليوم طويل شوية.
*) تعديل منطقة غلاف المواضيع :
1) تعديل عرض غلاف المواضيع.
نريد ان نجعل المنطقة التي تظهر فيها المواضيع واسعة قليلا، فنقوم بالتالي:
ادخل الى القالب HTML
و ابحث عن الكود التالي:
#main-wrapper {
و عدّل في خاصية العرض: مثلا
width:500px;
ملاحظة:
يجب مراعاة عرض الغلاف الخارجي و غلاف السايد بار،،
مثلا لو الغلاف الخارجي 10،، سيكون غلاف المواضيع 8 وغلاف السايد بار 2
على سبيل المثال فقط.
2) وضع حدود او نزعها من منطقة غلاف المواضيع
و هاذي سهلة جدا،، لو نريد ان نضع حدود في منطقة غلاف المواضيع.
في نفس المنطقة:
#main-wrapper {
عدل على خاصية:border
مثلا:
border: 1px solid #000000;
========================================
*) تعديل ستايل عنوان و تاريخ الموضوع:-
1) التحكم بحجم و الوان عنوان الموضوع.
نتحكم بها من الخواص التالية:
تعديل ستايل التاريخ:
.date-header {
تعديل ستايل عنوان الموضوع:
.post-title {
و
.post-title a, .post-title a:visited, .post-title strong {
2) طريقة وضع التاريخ تحت عنوان الموضوع:
مثال عن الطريقة، انظر الصورة:
اذا اردت ان يظهر تاريخ نشر الموضوع تحت العنوان اتبع التالي:
ادخل الى تحرير HTML واضغط على Expand widget (تمديد بالعربية على ما اظن)
ابحث لنا عن الكود التالي و انسخه في محرر النصوص ثم احذفه من القالب اي قم بقصه:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
و بعد ذلك ابحث لنا عن الكود التالي:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
و اضف تحته الكود الذي نسخناه في محرر النصوص.
و اضغط على حفظ.
بعد ذلك لنقم بتنسيق الشكل،، ابحث عن خاصية التالية:
.date-header {
و استبدل خاصية ال margin
بهذه القيمة:
margin:.5em 0 1.5em;
ثم ابحث لنا عن :
.post-title {
و اضف بداخلها:
margin-top:1.5em;
و قم بالحفظ.
3) وضع خلفية جميلة لعنوان الموضوع.
اذا اردت ان تضع اطار جميل لعنوان مواضيعك فيمكنك ذلك بكل سهولة
و اتبع الطريقة التالي:
اولا قم بصنع خلفية جميلة،، بقياس مناسب:
510×36 على سبيل المثال فقط
و انا حصلت على هذه الخلفية:
قم برفعها و بعد ذلك...
ابحث لنا عن الكود التالي:
.post-title {
و اضف بداخله الخاصية التالية:
background: #ffffff url(http://img39.imageshack.us/img39/6459/aaddad.jpg) no-repeat top right;
padding: 10px;
و استبدل العنوان بوصلة الصورة التي صممتها.
ثم اضغط على حفظ.
========================================
*) تعديل ستايل و شكل الموضوع:-
1) التحكم بحجم و لون الخط بداخل الموضوع.
للتحكم بحجم و نوع الخط في مواضيع مدونتك،، ابحث عن التالي في القالب:
.post div {
و ضع بداخله الخاصية التالي،، على سبيل المثال:
font: bold 16px Arial;
و طبعا اختر ما يعجبك من حجم و نوع.
و لتغيير اللون ضع الخاصية التالي في نفس المنطقة :
color: #854253;
و اختر كود اللون الذي تريد.
2) كيف نضع حدود للموضوع.
اسفل الخاصية السابقة (خارجها)
نضيف خاصية جديدة و هي كالتالي:
.post-body {
border: 1px solid #854253;
}
و طبعا اختر لون الحدود الذي تريد.
3) كيف نفصل بين المواضيع بخط او بصورة.
هناك طريقتان و انا سأختار اسهلها في نظري:
ادخل على تحرير HTML و قم بتمديد القالب Expand ثم ابحث لنا عن الكود التالي:
<div class='post-footer-line post-footer-line-1'>
و اضف بعده إما:
صورة:
<center><img src='http://site.com/pic.jpeg'/></center>
او خط:
<hr align='right' color='#854253' width='90%'/>
و اختر اللون و العرض و المكان الذي تريده.
========================================
*) بونس الدرس:
طريقة وضع اعلانات ادسنس بداخل الموضوع:
و هي طريقة من عبدو باشا ربنا يكرمه و يجازيه كل خير،،
و قمت بالتعديل على بعض الاكواد لتجدها في قالب بلوجر
1- قم بتفعيل : ادسنس داخل المقالات من Edit layout وبعدين دوس edit على المربع الكبير
بتاع مقالات المدونة Blog posts واختر علامة صح بجانب وضع الاعلانات داخل المحتوى ..
وظبط خياراتك.
عيب هذه الطرقة اذا اكتفيت بها سوف تجعل هناك فاصل كبير بين المقال والاعلان وهو ما سيتم
شرح تفاديه في الخطوات القادمة :
2- ادخل على Edit html تحرير و قم بتمديد القالب ، واحفظ قالب المدونة الحالي ... كخطوة احتياطية.
3- ابحث عن الكود :
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
4- استبدل الكود اعلاه ب :
<b:if cond='data:blog.pageType != "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if>
- ابحث عن :
data:post.body/>
وضع بعدها :
<b:if cond='data:blog.pageType == "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if>
وذلك لظهور الاعلان بعد المقال ، لو اردت ان تضع الاعلان فوق المقال ضع الكود الاخير فوق
data:post.body/>
6- احفظ القالب...
========================================
و ها هي نتيجة الدرس: مدونة تجارب نووية .
و يمكنكم تحميل القالب في هذه المرحلة: من هنا
يمكنك ان تقوم باي شيء تريده بقالب مدونتك و لا حدود لما يمكنك عمله سوى خيالك و ابداعك.
في الاخير آسف على طول الموضوع.
اتمنى لكم التوفيق و اي استفسار انا موجود ان شاء الله.
،، سننتقل الآن الى تعديل ستايل المواضيع.
كل الحكاية و ما فيها اننا سنقوم بتقسيم الموضوع الى الى جزئين،، واحد لتعديل التاريخ و عنوان
الموضوع. و جزء آخر الى تعديل ستايل الموضوع نفسه،، + بونس الدرس.
لذا بدون لف و لا دوران،، سيكون موضوع اليوم طويل شوية.
*) تعديل منطقة غلاف المواضيع :
1) تعديل عرض غلاف المواضيع.
نريد ان نجعل المنطقة التي تظهر فيها المواضيع واسعة قليلا، فنقوم بالتالي:
ادخل الى القالب HTML
و ابحث عن الكود التالي:
#main-wrapper {
و عدّل في خاصية العرض: مثلا
width:500px;
ملاحظة:
يجب مراعاة عرض الغلاف الخارجي و غلاف السايد بار،،
مثلا لو الغلاف الخارجي 10،، سيكون غلاف المواضيع 8 وغلاف السايد بار 2
على سبيل المثال فقط.
2) وضع حدود او نزعها من منطقة غلاف المواضيع
و هاذي سهلة جدا،، لو نريد ان نضع حدود في منطقة غلاف المواضيع.
في نفس المنطقة:
#main-wrapper {
عدل على خاصية:border
مثلا:
border: 1px solid #000000;
========================================
*) تعديل ستايل عنوان و تاريخ الموضوع:-
1) التحكم بحجم و الوان عنوان الموضوع.
نتحكم بها من الخواص التالية:
تعديل ستايل التاريخ:
.date-header {
تعديل ستايل عنوان الموضوع:
.post-title {
و
.post-title a, .post-title a:visited, .post-title strong {
2) طريقة وضع التاريخ تحت عنوان الموضوع:
مثال عن الطريقة، انظر الصورة:
اذا اردت ان يظهر تاريخ نشر الموضوع تحت العنوان اتبع التالي:
ادخل الى تحرير HTML واضغط على Expand widget (تمديد بالعربية على ما اظن)
ابحث لنا عن الكود التالي و انسخه في محرر النصوص ثم احذفه من القالب اي قم بقصه:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
و بعد ذلك ابحث لنا عن الكود التالي:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
و اضف تحته الكود الذي نسخناه في محرر النصوص.
و اضغط على حفظ.
بعد ذلك لنقم بتنسيق الشكل،، ابحث عن خاصية التالية:
.date-header {
و استبدل خاصية ال margin
بهذه القيمة:
margin:.5em 0 1.5em;
ثم ابحث لنا عن :
.post-title {
و اضف بداخلها:
margin-top:1.5em;
و قم بالحفظ.
3) وضع خلفية جميلة لعنوان الموضوع.
اذا اردت ان تضع اطار جميل لعنوان مواضيعك فيمكنك ذلك بكل سهولة
و اتبع الطريقة التالي:
اولا قم بصنع خلفية جميلة،، بقياس مناسب:
510×36 على سبيل المثال فقط
و انا حصلت على هذه الخلفية:
قم برفعها و بعد ذلك...
ابحث لنا عن الكود التالي:
.post-title {
و اضف بداخله الخاصية التالية:
background: #ffffff url(http://img39.imageshack.us/img39/6459/aaddad.jpg) no-repeat top right;
padding: 10px;
و استبدل العنوان بوصلة الصورة التي صممتها.
ثم اضغط على حفظ.
========================================
*) تعديل ستايل و شكل الموضوع:-
1) التحكم بحجم و لون الخط بداخل الموضوع.
للتحكم بحجم و نوع الخط في مواضيع مدونتك،، ابحث عن التالي في القالب:
.post div {
و ضع بداخله الخاصية التالي،، على سبيل المثال:
font: bold 16px Arial;
و طبعا اختر ما يعجبك من حجم و نوع.
و لتغيير اللون ضع الخاصية التالي في نفس المنطقة :
color: #854253;
و اختر كود اللون الذي تريد.
2) كيف نضع حدود للموضوع.
اسفل الخاصية السابقة (خارجها)
نضيف خاصية جديدة و هي كالتالي:
.post-body {
border: 1px solid #854253;
}
و طبعا اختر لون الحدود الذي تريد.
3) كيف نفصل بين المواضيع بخط او بصورة.
هناك طريقتان و انا سأختار اسهلها في نظري:
ادخل على تحرير HTML و قم بتمديد القالب Expand ثم ابحث لنا عن الكود التالي:
<div class='post-footer-line post-footer-line-1'>
و اضف بعده إما:
صورة:
<center><img src='http://site.com/pic.jpeg'/></center>
او خط:
<hr align='right' color='#854253' width='90%'/>
و اختر اللون و العرض و المكان الذي تريده.
========================================
*) بونس الدرس:
طريقة وضع اعلانات ادسنس بداخل الموضوع:
و هي طريقة من عبدو باشا ربنا يكرمه و يجازيه كل خير،،
و قمت بالتعديل على بعض الاكواد لتجدها في قالب بلوجر
1- قم بتفعيل : ادسنس داخل المقالات من Edit layout وبعدين دوس edit على المربع الكبير
بتاع مقالات المدونة Blog posts واختر علامة صح بجانب وضع الاعلانات داخل المحتوى ..
وظبط خياراتك.
عيب هذه الطرقة اذا اكتفيت بها سوف تجعل هناك فاصل كبير بين المقال والاعلان وهو ما سيتم
شرح تفاديه في الخطوات القادمة :
2- ادخل على Edit html تحرير و قم بتمديد القالب ، واحفظ قالب المدونة الحالي ... كخطوة احتياطية.
3- ابحث عن الكود :
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
4- استبدل الكود اعلاه ب :
<b:if cond='data:blog.pageType != "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if>
- ابحث عن :
data:post.body/>
وضع بعدها :
<b:if cond='data:blog.pageType == "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if>
وذلك لظهور الاعلان بعد المقال ، لو اردت ان تضع الاعلان فوق المقال ضع الكود الاخير فوق
data:post.body/>
6- احفظ القالب...
========================================
و ها هي نتيجة الدرس: مدونة تجارب نووية .
و يمكنكم تحميل القالب في هذه المرحلة: من هنا
يمكنك ان تقوم باي شيء تريده بقالب مدونتك و لا حدود لما يمكنك عمله سوى خيالك و ابداعك.
في الاخير آسف على طول الموضوع.
اتمنى لكم التوفيق و اي استفسار انا موجود ان شاء الله.
التسميات:
الاشتراك في:
الرسائل (Atom)