إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
بعد ان حصلنا على هيدر جميل في الدرس السابق: تصميم هيدر جميل
،، سننتقل الآن الى تعديل ستايل المواضيع.
كل الحكاية و ما فيها اننا سنقوم بتقسيم الموضوع الى الى جزئين،، واحد لتعديل التاريخ و عنوان
الموضوع. و جزء آخر الى تعديل ستايل الموضوع نفسه،، + بونس الدرس.
لذا بدون لف و لا دوران،، سيكون موضوع اليوم طويل شوية.
*) تعديل منطقة غلاف المواضيع :
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)
12 تعليقات:
السبت, يوليو 11, 2009
يقول...درس مشوق أخي الكريم
شكرا لك على الدروس الرائع
ولكن عندي استفسار
أريد طريقة اضهار موضوع واحد فقط في الصفحة الرئسية في المنتدى كما يوجد الان في http://arab-publishers.blogspot.com يضهر موضوع واحد فقط
هل فهمت قصدي
السبت, يوليو 11, 2009
يقول...العفو،،
ادخل الى عناصر المدونة،،
ثم اضغط على edit على المربع الكبير بتاع مقالات المدونة.
(رسائل المدونة الاكترونية)
و بعدين تطلع لك نافذة،، في الخيار الاول
اكتب 1
ثم حفظ.
و بالتوفيق و شكرا على مرورك.
الخميس, يوليو 23, 2009
يقول...السلام عليكم أخى مدونتك رائعة ومفيدة جدا وقد استفدت منها كثيرا ... ولى سؤال عن وضع اعلانات ادسنس داخل الموضوع كما فى مدونة تجارب نووية حيث يظهر الإعلان فى نهاية الموضوع وليس بعد التعليقات ... فقد قمت بعمل الخطوات المذكورة ولكن عند الحفظ يقول ان هناك أخطاء أرجو الإفادة أخى وبارك الله فيك
مدونة عرب بس http://arabbas.blogspot.com
الخميس, يوليو 23, 2009
يقول...وأريد أخى طريقة أخرى لوضع كود أدسنس داخل الموضوع بحيث يكون فى أى قطعة داخل الموضوع سواء فى الأعلى أو الوسط أو الأسفل ( قبل التعليقات وليس بعدها )
السبت, يوليو 25, 2009
يقول...مساء الخير أخوي
دورة مرة روعة
بس عندي أستفهام
ماعندي شيء أسمة عناصر المدونة مع العلم أني مدونتي باللغة العربيه ياليت أعرف كيف
الاثنين, أغسطس 03, 2009
يقول...الاخ عرب بس//
شكرا لك،
اعد تطبيق الطريقة (بونس الدرس)
و اخبرني بالخطأ الذي يظهر لك،
و اذا اردت وضع الاعلانات بداخل الموضوع في الاعلى،،
غير مثل ما هو مطلوب في الدرس (بونس الدرس).
و اذا واجهك مشكل اخبرني.
الاخت تناهيد//
عناصر المدونة،، هي عناصر الصفحة
لانني استخدم الواتجهة بالانجليزية و مرات اسهو و اقول عناصر المدونة.
شكرا لكما على المرور.
الاثنين, سبتمبر 07, 2009
يقول...مشاء الله دروسك كلها مفهومة اخي
السبت, نوفمبر 07, 2009
يقول...الأكواد هذي هل هي ثابتة لكل القوالب
لأني بحثت عن : main-wrapper
يقول لي نوت فاوند.. ما لقيته..!!
السبت, نوفمبر 07, 2009
يقول...انا مستخدمة قالب جاهز في مدونتي ..
لكن في كلمة تطلع لي باللون الأحمر..undefined
ممكن أعرف اشلون اشيلها ..
http://maybooks.blogspot.com/
وشكرا جزيلا ..
الثلاثاء, يناير 26, 2010
يقول...مشاء الله
يسلمو عيونك يا اخي
اريد تغير ايقونة بلوجر ؟
جربت كتير ولم تفلح معي ارجوا توضيح لي كيفت الكود الصحيح سوري هتعبك معي
بارك الله فيك
الأحد, يناير 31, 2010
يقول...الاخت مي//
1) المتعارف عليه اثناء تصميم ستايلات بلوجر هو استعمال main-wrapper لكن هذا ستايل و لكل طريقته في التصميم، على كل حال في مدونتك بدل main-wrapper يوجد #content
2) المشكلة هاذي هي من خطأ في القالب في حد ذاته،
لذا جربي ان تقومي بتعطيل عرض تاريخ نشر المواضيع.
و ذلك من صفحة عناصر المدونة، اضغطي على تحرير لمنطقة المواضيع و عطلي عرض التوقيت او قومي بتشغيله اذا وجدته معطلا و قومي بالحفظ.
كما انصحك اختي الكريمة الابتعاد عن القوالب معقدة الرمجة، فكما لاحظتي ان المبرمج لم يتقيد بأكواد مستخدمة عامة لتسهيل تحرير الشكل العام للمدونة.
و بالتوفيق.
=======
الاخت شذا روحي //
تفضلي الطريقة من هنا:
طريقة اضافة ايقونة لمدونتك
و اي استفسار بخصوص الطريقة اضفي تعليق في موضوع الطريقة.
بالتوفيق، و شكرا لكم جميعا.
الخميس, أكتوبر 21, 2010
يقول...بارك الله فيكم
مدونة رائعة
ومواضيع شيقة .
ينقص الشرح صور
إرسال تعليق