كيف تفصل بين مواضيع مدونتك في الصفحة الرئيسية بطريقة انيقة وجذابة ؟

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الخلق محمد بن عبدالله الصادق الامين .اخوتي الاعزاء زوارمدونة  المحررون العرب اهلا وسهلا بكم . اليوم نبداء بدرس جديد قد يبحث عنة الكثير من المدونيين عن كيفية اضافة صورة تفصل بين مواضيع او مقالات مدونتك الظاهرة في الصفحة الرئيسية بشكل انيق وجذاب يتناسب مع الوان مدونتك ، هذه الاضافة تعطي المدونة شكل جميل ومميز وتجعل كل زائر يدخل على مدونتك انه يميز بين كل مواضيعها المنشورة في  الصفحة الرئيسية. والصورة التالية توضح الفكرة اكثر : 

انقر على الصورة للتكبير

طريقة رفع الصور في موقع العملاق : 

طبعا يا شباب هذا الرابط   http://siahdesign.com/archives/210  لموقع فيه عدة صور جميلة بامكانك ان تختار واحدة منهم ثم انقر بالزر الايمن على الصورة ثم اختر ( حفظ باسم ) واحفظها مثلا في سطح المكتب ، ثم انتقل الى موقع رفع الصور العملاق على الرابط  التالي :  http://www.0zz0.com/  ولمعرفة طريقة رفع الصور في موقع العملاق لاحظ الصورة التالية   :

اضغط على الصورة للتكبر

والان دعونا نبدا بخطوات : طريقة اضافة صورة فاصلة بين المواضيع لمدونات بلوجر : 

1 - ادخل على لوحة تحكم مدونتك .

2 - ثم انقر على قالب - ثم تحرير HTML - ثم متابعة .

3 - ابحث عن هذا الكود (   .post {    )  باستخدام مفتاح ( CTRL+F  ) .

4 - ثم قم بوضع الكود التالي بداخله قبل القوس } :

background: url(http://www6.0zz0.com/2012/02/23/15/427618559.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

* اللون الاحمر : رابط الصورة الفاصلة بين المواضيع . بامكانك ان تختار صورة اخرى تتناسب مع لون  مدونتك ثم تقوم برفعها في اي موقع لرفع الصور مثلاً موقع  http://www.0zz0.com  ثم ضع رابط صورتك مكان الرابط باللون الاحمر في الكود اعلاه  . 

لاحظ الصورة التالية توضح كيف واين تضع الكود في قالب المدونة :

5 - قم بمعاينة القالب ثم اعمل حفظ . وحظا سعيدا ،،،

 اذا استمتعت بقراءة الدرس اعلاة قم بالاشتراك عبر بريدك الالكتروني ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح فهرس المدونة للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله  ....... واي سؤال او استفسار نرجو التعليق ،،، 

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تعمل قائمة - مواضيع ذات صلة او مواضيع مشابهة - اسفل كل موضوع او مقالة في مدونتك او موقعك؟

بسم الله الرحمن الرحيم اخوتي الكرام السلام عليكم ورحمة الله وبركاتة اليوم نبداء بموضوع جديد في مدونتنا عن كيفية وضع او عمل قائمة ( مواضيع ذات صلة او مقالات مشابهة او مواضيع ذات علاقة ( سمها ما تشاء )  تحت كل موضوع او مقالة في مدونة بلوجر . طبعا قائمة مواضيع ذات صلة من خصائصها انها تعرض المواضيع المشابهة للموضوع الذي تتصفحة الان وايظا من نفس قسم الموضوع هذا ، ولها فوائد عظيمة وهي تجعل زوار مدونتك ان يبقو لفترة طويلة في تصفح مدونتك اي زيادة في مشاهدة صفحات المدونة وهناك توجد طرق كثيرة واشكال مختلفة لهذه الاضافة منها على شكل قائمة اسفل المقال تعرض عناوين المواضيع المشابهة كما في مدونتي تجدها اسفل كل موضوع ،ومنها ايظا على شكل قائمة بعناوين المواضيع مع صور مصغرة لكل لموضوع بشكل افقي . ولكن في درسنا هذا سنتطرق لشرح طريقة تركيب قائمة مواضيع ذات صلة كما في الصورة التالية :

* ملاحظة :  لكن قبل ان نبدا بخطوات  تركيب  هذه  الاضافة تذكر انك عامل اقسام لمدونتك اي كل المواضيع المنشورة في مدونتك موزعة في اقسام ( اقسام المدونة ) ولمعرفة التفاصيل عن كيفية عمل او انشاء اقسام لمدونتك   قم بزيارة الدرس هذا ،،،،

واي موقع او مدونة لا يوجد بها اقسام فالطريقة هذا غير صالحة لها .... 

والان اسحمولي بشرح خطوات : كيفية اضافة او وضع مواضيع ذات صلة في مدونة بلوجر ؟ 

1 - اذهب الى لوحة تحكم المدونة .
2 - من لوحة تحكم مدونتك اختر قالب - ثم تحرير HTML - ثم متابعة . ( لا تنسى حفظ نسخة احتياطية لقالب مدونتك من اي خطاء قد يقع  )
3 - قم بتوسيع قوالب عناصر واجهة المستخدم اي بوضع علامة صح في المربع .

4 - ابحث عن الكود التالي باستخدام مفتاح ( CTRL+F ) :

</head>

5 - قم بنسخ الكود التالي ثم ضعه او انسخة فوق كود خطوة4 .

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->

6 - ابحث عن الكود التالي في مدونتك بواسطة المفتاح ( CTRL+F ) :

<data:post.body/>

7 - قم بنسخ الكود التالي ثم الصقة بعد كود خطوة رقم6 :

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>مواضيع ذات صلة: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

8 - قم بعمل حفظ للقالب . ومبرووووك ،،،،

ملاحظة مهمة : قد تجد كود خطوة رقم 6 ( <data:post.body/> ) مكرر مرتين ، قم بوضع كود خطوة رقم7 بعد كود خطوة 6 المكررالثاني . كما هو موضح في الصورة التالي ( كود خطوة رقم 7 بعد كود خطوة رقم6 الذي باللون الاصفر ) :

 اذا استمتعت بقراءة الدرس اعلاة قم بالاشتراك عبر بريدك الالكتروني ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح فهرس المدونة للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله  ....... واي سؤال او استفسار نرجو التعليق ،،، 

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تظيف صندوق اعجاب الفيسبوك في مدونتك بشكل انيق ؟

اهلا وسهلا بكم زوار مدونة المحررون العرب اليوم نبدا بدرس جديد عن كيفية اضافة صندوق اعجاب الفيسبوك في المدونة بشكل ممتاز وجذاب في نفس الوقت .  لماذا تحتاج الى وضع صندوق اعجاب للفيسبوك في مدونتك؟  لان هناك ملايين من الناس يستخدمون الفيسبوك كل يوم اما عن طريقة الكمبيوتر او الموبايل سوى كانو في وقت فراغهم او في وقت عملهم ، ولهذا تجد الكثير من مشرفي المواقع و المدونات يستفيدون من هذه الخدمة لما لها من منافع كبيرة في الاشهار.
فاذا كنت صاحب موقع او مدونة متخصصة مثلا في مجال تجاري تعرض سلع ومنتجات لشركة ما ، وتريد ان تشهرها بقدر المستطاع فعليك  اولا التركيز على شبكة الفيسبوك الاجتماعية ، وقد يبادر في ذهنك السؤال التالي : ولماذا اهتم بموقع الفيسبوك وبما ان فيه ناس احيانا يتحدوث في الواقع عن اشياء تتعلق بحياتهم الشخطية ؟  اقولك بسؤالك هذا انت على خطاء لان الفيسبوك يعتبر في حد ذاتة  ارض او دولة كبيرة و عظيمة عدد سكانها كبير جدا ويتزايد مع الوقت ، ومن دون ان تنفق سنت واحد يمكنك ان تروج وتسوق لمنتجاتك وبضائعك من موقعك او مدونتك من خلال هذا الشبكة الاجتماعية العملاقة الفيسبوك ( Facebook ) وان من اعظم الطرق شعبية واكثرها شيوعاً هو ان تنشاء صفحة اعجاب على الفيسبوك لمدونتك اوموقعك وتجعل الزوار يعجبون بها وذلك للحصول على زوار كثير معجبين بصفحتك على الفيسبوك .

ماهي الفائدة من جعل الاخرين معجبين بصفحتي على الفيسبوك ؟

هناك فائدة عظيمة ، وانت تعرف الادمان على الفيسبوك . كثير من الناس يدخلون على حساباتهم على الفيسبوك ليشاهدو اخر الاخبار والمواضيع من على حائط  صفحاتهم . وان اي شخص يعجب بموضوع ما بصفحتك على الفيسبوك يظهر هذا الموضوع  مباشرة على حائط صفحتة ويشاهدة الاصدقاء المضافون لديه و ايظاً اصدقاء الاصدقاء وهكذا ... مما يؤدي لجعل صفحتك ومدونتك لها شعبية وزيارات كثيرة وسمعة كبيرة ...  اليست هذه الاضافة مدهشة نوعاً ما ؟

اذاً لانشاء صفحة لمدونتك على الفيسبوك ليس بالامر المعقد ، وانا قد ذكرت ذلك في درس سابق عن كيفية انشاء صفحة على الفيسبوك  و كيف تربط مواضيع مدونتك او موقعك على الفيسبوك ؟ ربط المدونة بالفيسبوك .  لمزيد من التفاصيل قم بزيارة الصفحة . والصورة التالية توضح صندوق اعجاب الفيسبوك ،،، وسامحوني واعذروني اذا طولت عليكم في المقدمة . 

مثال : صندوق اعجاب الفيسبوك

والان دعونا نبداء بخطوات : كيفية وضع صندوق اعجاب في المدونة ؟

1 - ادخل على لوحة تحكم المدونة .

2 - ومن لوحة تحكم المدونة انقر على - قالب - ثم تحرير HTML - و من ثم متابعة .

3 - ضع علامة صح في مربع توسيع قوالب عناصر واجهة المستخدم .

4 - قم بالبحث باستخدام المفتاح ( Ctrl + F ) عن الكود التالي :

]]></b:skin>

5 - ثم قم بلصق الكود التالي فوقة مباشرة :

/* ------ Custom Like Box ----- */ .fan_box a:hover{ text-decoration: none; } .fan_box .full_widget{ height: 200px; border: 0 !important; background: none !important; position: relative; } .fan_box .connect_top{ background: none !important; padding: 0 !important; } .fan_box .profileimage, .fan_box .name_block{ display: none; } .fan_box .connect_action{ padding: 0 !important; } .fan_box .connections{ padding: 4px !important; margin:3px 0px 5px 0px!important; border: 0 !important; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #666; } span.total{ color: #365899; font-weight: bold; background:#ECEEF5; padding:4px !important; margin:3px 0px 5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; } span.total:hover{ border:1px solid #6383C1; } .fan_box .connections .connections_grid { padding-top: 10px !important; } .fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; } .fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: normal; color: #289728 !important; padding-top: 1px !important; } .fan_box .connect_widget{ position: absolute; bottom: 0; left: 0px; margin: 0 !important; } .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; } .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } /*--------------- Custom Like Box End--------------*/

* ملاحظة : في حالة اذا اردت ان تغير لون اسم البروفايل من اللون الاخضر الى لون آخر قم بتغيير الرقم الذي باللون الاحمر في الكود = 289728 .

6 - من قائمة التخطيط قم  بالنقر على اضافة اداة الموجودة في العمود الجانبي ( السايد بار ) مثلا ، ثم من قائمة الادوات اختر اداة  HTML / Java Script  .

7 - قم بنسخ الكود التالي باستخدام مفتاح ( Ctrl + F ) ولصقة في اداة  HTML / Java Script   .

<style> #mbtlikebox{ color: #365899; font: bold 11px arial; background:#ECEEF5; padding:3px !important; margin:5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; width:290px; } #mbtlikebox:hover{ border:1px solid #6383C1; } </style> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("");</script> <fb:fan profile_id="128605887189860" stream="0" connections="8" width="300px" height="200px" header="0" logobar="0" css="https://sites.google.com/site/3alymni/css/3.css"></fb:fan> <div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="http://arab-editors.blogspot.com/">Visit the Like Page »</a></div>

* اللون الاحمر : هو رقم ID الخاص بصفحتك على الفيسبوك قم باستبدالة برقم ID صفحتك . لاحظ الصورة التالية :

* اللون الازرق : هو عبارة عن عرض صندوق الفيسبوك قم بتغيره ليتناسب مع مدونتك .
* اللون البرتقالي : عبارة عن ارتفاع صندوق الفيسبوك  بامكانك تغييرة كما تشاء .
* اللون الوردي :  ظروري .... قم باستبدالة برابط مدونتك او موقعك .


8 - واخير قم بعمل حفظ للاداة ومبرووووووك على الاظافة الجديدة .

 اذا استمتعت بقراءة الدرس اعلاة قم بالاشتراك عبر بريدك الالكتروني ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح فهرس المدونة للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله  ....... واي سؤال او استفسار نرجو التعليق ،،، 

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تنسق محاذاة مواضيع المدونة في الصفحة الرئيسية ؟

بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الكريم ، اخوتي الكرام زوار مدونة المحررون العرب ، السلام عليكم ورحمة الله وبركاتة . اليوم نبداء بدرس جديد عن كيفية تنسيق محاذاة مواضيع الصفحة الريئسية لمدونة بلوجر ؟ طبعاً هل شاهدتم يوما ان نص مواضيع مدونتكم وخصوصا في الصفحة الرئيسية مبعثرة غير منسقة ؟ هل تريدو ان تقوموا بتنسق محاذاة نص تدوينات الصفحة الرئيسية لتظهر بشكل جيد ومنظم وجذاب ؟ هناك الكثير من المدونات تستعرض عدد من المواضيع في الصفحة الرئيسية اي جزء من المقال متبوع بخاصية ( اقراء المزيد ) مثل مدونة المحررون العرب ، لذا لا توجد في بلوجر اداة او خاصية لتنسيق محاذاة نص مواضيع الصفحة الرئيسية مثل برنامج مايكروسوفت وورد . ( طبعا توجد في بلوجر خاصية محاذاة النصوص في صندوق تحرير الرسائل وهذا الخاصية للمقال بالكامل طبعا انا لا اقصدها بل اقصد كيفية محاذاة مجموع  المواضيع الظاهرة في الصفحة الرئيسية ) لاحظ الصور التالية توضح الفكرة اكثرة ركزو شوية :

قبل تنسيق المحاذاة 

الصورة قبل تنسيق المحاذاة

بعد تنسيق المحاذاة 

الصورة بعد تنسيق المحاذاة

اذاً بعد مشاهدة الصور اعلاة وتوضيح الفكرة دعونا نبداء بشرح الخطوات : 

1 - ادخل على لوحة تحكم المدونة .

2 - ومن لوحة التحكم قم باختيار : قالب - تحرير HTML - متابعة . ( بعد قيامك بحفظ نسخة احتياطية لقالب مدونتك )

3 - ضع علامة صح في مربع توسيع قوالب عناصر واجهة المستخدم .

4 - قم بالبحث عن الكود التالي .post   باستخدام مفتاح ( Ctrl+F ) :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

ملاحظة : غالباً الكود الافتراضي في المدونة يكون كما هو موضح في الصورة التالية :

5 - قم بنسخ الكود التالي ولصقة في الاخير قبل القوس :

text-align:justify;

ليصبح الكود كالتالي :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align:justify;
}

ملاحظة : باختصار انسخ الكود الاخير هذا مباشرة وقم بلصقة في مدونتك بالكامل بين القوسين اي استبدلة مكان الكود الافتراضي الموجود في الصورة اعلاة ، بس انتبه تكرر القوسين .

6- ثم قم بمعاينة الصفحة للتاكد ثم اعمل حفظ . ومبروووووووك عليك وحظاً سعيداً ،،

واخيرا اذا استمتعت بقراءة الدرس اعلاة قم بالاشتراك عبر بريدك الالكتروني ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح فهرس المدونة للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله  ....... واي سؤال او استفسار نرجو التعليق ،،، 

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف توسع عرض ارشيف المدونة - بنمط القائمة المنسدلة ؟

بسم الله الرحمن الرحيم والصلاة والسلام على روسلنا ونبينا محمد ابن عبد الله الصادق الامين ، اخوتي الكرام زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . اليوم احب ان ابداء بموضوع آخر عن كيفية توسيع عرض ارشيف المدونة في حالة اذا كان بنمط ( قائمة منسدلة ) ، طبعا هناك الكثير من المدونات تضع اداة ارشيف المدونة بنمط قائمة منسدلة في الشريط الجانبي للمدونة ( السايد بار ) لكن عرض مربع الارشيف الافتراضي هذا لا يساوي عرض السايد بار للمدونة اي يكون مربع صغير طول عرضة يصل الى نصف عرض السايد بار ، ولهذا تجد اصحاب المدونات غير مرتاحين لشكله لذا يلجأو باختيار قائمة ارشيف اما بنمط ( تسلسل هيكلي ) او نمط ( قائمة كاملة ) ولكن هذه النمطين الاخيرين ياخذون مساحة كبيرة في السايد البار في حالة لو اردت ان تظيف ادوات اخرى بداخلة . اما نمط ( قائمة منسدلة ) فائدته انه لا ياخذ مساحة كبيرة بل ياخذ مربع صغير وعند النقر عليه يعرض مواضيع المدونة . لاحظ الصور التالية توضح ارشف المدونة بنمط القائمة المنسدلة قبل التعديل وبعد التعديل :

الصورة رقم ( 1 ) توضح الاشكال الثلاثة للارشيف

الصورة رقم ( 2 ) توضح عرض الارشف قبل التوسيع (الافتراضي ) 

الصورة رقم (3 ) توضح عرض ارشيف المدونة بعد توسيعة

* ملاحظة : قبل ان تبداء بالخطوات تأكد من ارشيف مدونتك هل هو بنمط القائمة المنسدلة ؟ اذا كان بشكل القائمة المنسدلة كما في الصور اعلاه وتريد توسيعه الخطوات التالية تشرح لك كيفية توسع عرض الارشيف ، اما اذا كان بنمط تسلسل هيكلي او قائمة كاملة  فالموضوع لا يتكلم بخصوص هذه النمطين .

والان اسمحولي ان ابدا بالخطوات :  ( قم بعمل حفظ نسخة احتياطية لقالب مدونتك  ) 

1 - ادخل على لوحة تحكم المدونة .

2 - من من لوحة التحكم انقر على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - ضع علامة صح في مربع توسيع قوالب عناصر واجهة المستخدم  .


4 - ابحث على الكود التالي وذلك بواسطة مفتاح البحث  ( Ctrl - F ) :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

ملاحظة : تستطيع البحث عن الكود اعلاه خطوة 4 عن طريقة نسخ اول سطر منه ثم تاكد من وجود الكود بالكامل في مدونتك ...
لاحظ الصورة : 

الكود الافتراضي في المدونة قبل التعديل

5 - قم بمسح الكود اعلاه خطوة ( 4 ) ثم استبدلة بالكود التالي :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' style='width:100%'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

ليصبح كما في الصورة التالية :

كود ارشيف المدونة بعد التعديل

6 - اعمل معاينة ( Preview ) للمدونة للتأكد من تطبيق العملية ثم قم بعمل حفظ ( Save ) .

* طبعا في الحقيقة الكودين في الشرح اعلاة خطوة 4 + 5 متشابهان ، فقط غيرنا جزءبسط جدا وهو اظافة الكود الذي يشير باللون الاحمر style='width:100%'  في كود خطوة رقم 5 تغيير نسبة العرض الى 100% ....

واخيرا اذا استمتعت بقراءة الدرس اعلاة قم بالاشتراك عبر بريدك الالكتروني ليصلك تحديثات المدونة من دروس مفيدة وحصرية لمدونات بلوجر كما يمكنك ان تتصفح فهرس المدونة للحصول على المزيد من المواضيع الاساسية التي قد تناسب مدونتك . والصلاة والسلام على رسول لله  ....... واي سؤال او استفسار نرجو التعليق ،،،

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تعمل اوتظيف مساحات اعلانية فوق هيدر المدونة ؟ - بنرات اعلانية

بسم الله الرحمن الرحيم ، اخواني المدونون و زوار مدونة المحررون العرب السلام عليكم ورحمة الله وبركاتة . امس تحدثنا عن كيفية اضافة وعمل أداة آخر موضيع المدونة مع صور مصغرة ؟ ولكن اليوم سنتطرق الى درسا جديد وحصري في مدونتنا هذه عن كيفية عمل بنرات اعلانية في اعلى الصفحة ؟ اي فوق الهيدر ، او كيفية اضافة اعلانات جوجل ادسينس فوق الهيدر ؟

طبعا اخوتي الكرام اكيد وبلا شك قد شاهدتم الكثير من المواقع الالكترونية تعمل هذه المساحة الاعلانية مثل المواقع الرياضة والاخبارية والمنتديات الكبيرة ، ولكن السؤال لماذا ؟ انا في اعتقداي ان البعض منهم لديه نية لعمل هذه البنرات الاعلانية لغرض كسب المال اون لاين يعني يعرض سلع ومنتجات الاخرين مقابل المال زهيد او يعلن لمواقع الكترونية اخرى . والبعض منهم لغرض التبادل الاعلاني فقط ليس لغرض الفلوس ( ظفني في موقعك اظيفك في موقعي ) اي للاشهار . عموماً اذا عندك النية لكسب المال من موقعك او مدونتك الالكترونية  ، فاالفرصة هي ان تعمل مساحة اعلانية في مدونتك . طبعا هناك اماكن عديدة وجيدة وبارزة بحيث تعمل مساحة اعلانية تسويقية فيها مثلا اعلى الصفحة ( فوق الهيد ) ، وفي نفس الهيدر ، وتحت الهيدر ، وفي الفوتر ( اسفل الصفحة ) ، وكذلك بجانب الصفحة ( سايد بار ) . لكن اليوم سنتحدث في درسنا هذا عن كيفية عمل بنرات اعلانية فوق الهيدر ؟ انظر الصورة التالية كمثال توضحي للبنرات الاعلانية اعلى الصفحة :

اذاً دعونا نبدا على خطوة خطوة - Step by step :

1 - ادخل على حسابك في بلوجر .

2 - من لوحة التحكم انقر من القائمة على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .

4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .

5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .

<div id='outer-wrapper'>

لاحظ الصورة :

اضغط الصورة للتكبير

6 - انسخ الكود التالي وضعه تحته مباشرة .

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

لاحظ الصورة :

اضافة كود البنرات الاعلانية

7 - قم بالبحث عن الكود التالي :

]]></b:skin>

8 - ثم ضع هذا الكود فوقه مباشرة :

/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

ملاحظة : طبعا هذا الكود من نمط  CSS Styling وضع لتنسيق البنرات الاعلانية من ناحية المحاذاة وغيرها،  في حالة تريد تغيير في المحاذاة لسبب ما قم بالتغيير فيه . بينما كود خطوة رقم 6 وضع لانشاء عنصر جديد ( مربع اضافة اداة )  في قائمة التخطيط .

لاحظ الصورة :

اضافة الكود نمرة 7

9 - قم بعمل حفظ للقالب ثم توجه او انقر على تخطيط .

10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم ( اضافة اداة ) انشئ فوق الهيدر وتحت Navbar مباشرة .
لاحظ الصورة :

النتيجة النهائية 

11 - الان لإضافة بنرات اعلانية او اعلانات جوجل ادسينس فوق الهيد قم بالنقر على ( اضافة اداة ) الجديدة التي تم انشاءها الان فوق الهيدر كما في الصورة اعلاه ( ليس السايد بار ) ثم من قائمة الادوات المنبثقة اختر اداة جافا HTML وقم بوضع كود البنر ثم اعمل معاينة للتأكد من عملك ، ثم حفظ .
ملاحظة : بامكانك ان تضع اربعة اكواد في اداة جافا HTML الواحدة او  اكثر حسب تصميم مساحة البنرات لديك، بحيث تكون البنرات الاعلانية على شكل افقي متسلسلة واحد تلو الاخر ( من اليمين الى اليسار ) لاحظ الصورة الاولى كل الاكواد في اداة جافا HTML واحدة . بينما لو اضفت اداة HTML اولا ثم وضعت كود بنر واحد فيها ثم قمت باضافة اداة HTML ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .
لاحظ الصور التالية :

الخلاصة : طبعا في هذا الدرس تعلمت كيف تضيف عنصر جديد من عناصر الصفحة فوق الهيدر وايظا كيفية اضافة مساحات اعلانية ( بنرات اعلانية ) وكذلك اضافة اعلانات جوجل ادسينس ،،،

ملاحــــــظة مهمة : بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود  </head>  تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5  . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي  </head> ثم نظرت تحته فوجدت الكود كالصورة التالية  :

بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :

واخيرا نرحب بتعليقاتكم واي سؤال او استفسار نحن مستعدين للاجابة

المصدر | مدونة المحررون العرب

...تابع القراءة

تعلم كيف تظيف قائمة اخر مواضيع المدونة مع عرض صور مصغرة ؟

بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الصادق الامين ، اخواني زوار  المحررون العرب طبعا قد تحدثنا في درس سابق عن كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟ . ولكن درسنا اليوم يختلف عن الدرس السابق ، في هذا الدرس نشرح اسلوب او نمط آخر في كيفية اظافة اداة ( آخر المواضيع ) للمدونة او الموقع ، حيث ان هذه الاظافة تاخذ على شكل قائمة عمودية تحتوي على آخر العناوين الريئسية ( Recent posts ) للمدونة وجزء صغير من المحتوى وايظا صور مصغرة ( Thumbnail )  من صور آخر المواضيع المنشورة ، هذه الاضافة تعطي المدونة مظهر جميل ورائق عند وضعها في السايد بار ( Sidebar ) ، بينما الطريقة السابقة التي اشرنا اليها تاخذ على اسلوب او نمط شريط افقي متحرك لآخر مواضيع المدونة تضعه تحت الهيدر ( Header ) مثلاً . والصورة التالية توضح قائمة ( آخر مواضيع المدونة ) في درسنا هذا : 

قائمة آخر المواضيع

اذاً ، دعونا نبدا بشرح الخطوات :

1 - ادخل على حسابك في بلوجر . 


2 - من لوحة تحكم المدونة انقر من القائمة على ( تخطيط  ) ثم ( اضافة اداة ) كما هو موضح في الصورة التالية :

لوحة تحكم المدونة

3 - قم باختيار اداة  HTML/Java Script كما هو موضح في الصورة التالي : 

قائمة الادوات 

4 - قم بنسخ ولصق الكود التالي  في الاداة : 

<div class="pipesContainer">
<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"http://www.yourblog.blogspot.com/feeds/posts/default"},"hideHeader":"false","height":"auto","count": 8 }</script>
<div style="font-family: arial, trebuchet; font-size: 9px;">link <a href="http://arab-editors.blogspot.com">Recent Posts Thumbnails</a> by <a href=" http://arab-editors.blogspot.com/search/label/%D8%A7%D8%AF%D9%88%D8%A7%D8%AA%20%D9%88%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1 ">Blogger Widgets</a> </div> <noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.pipesContainer {
margin:10px 0 10px 0;
padding:0px;
background:none;
}
.pipesHolder {
padding: 0px!important;
margin:10px 0px!important;
}
.pipesTitle {
padding-top:0px!important;
line-height:14px;
font-weight:bold!important;
}
/*.pipesDescription,*/
.pipesSmallthumb {
display:none!important;
}
.pipesThumbnail img {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhOitNP3qck5kI8W-N9rxxealxxPkWrOase6sxgGKu-8O94DKsFNP1n5ceOE2d3cmQmznCYkBLANjXV959y0npKw61P3djba6TgxCREF8mr2Awtx1HEwTrHOrWTovBdKMKIVUTxXF8uI/s400/bloggerlogo-4.png) no-repeat top center;
border: none!important;
height:auto!important;
width:72px!important;
}
.yba,.ybf {display:none!important;}
.ygt {margin-top:10px;margin-bottom:10px;font-size:9px;float:left;}
.ybr li {background-color: transparent!important; padding:0px!important;}
</style></div>

توضيح على الكود :

* قم بوضع رابط مدونتك او موقعك مكان اللون الاحمر في الكود اعلاه ،

* اللون الوردي : = 8 يشير الى عدد المواضيع ( العناوين ) الذي تريدهم يظهرون ، هنا عددهم الافتراضي في الكود  = 8 بامكانك تخفيض العدد الى 6 او 5 او اقل على رغبتك .

 5 - واخيرا قم بعمل حفظ للاداة . وصلى الله وسلم على رسولنا الكريم ،،،

تعليقاتكم تهمنا ،، وزيارتكم تسرنا 

المصدر | مدونة المحررون العرب

...تابع القراءة

الطريقة الثانية : كيفية انشاء ووضع جدول في محتوى تدوينة بلوجر ؟

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الخلق محمد ابن عبدالله الصادق الامين اخواني الاعزاء شرحنا في الدرس السابق طريقة عمل جدول في مدونات بلوقر و وعدناكم باننا سنشرح طريقة اخرى مبسطة . اليوم سنتعلم في موضوعنا هذا الطريقة الثانية في كيفية انشاء ووضع جداول بيانات في محتوى تدوينات مدونات بلوجر ، هذه الطريقة بسيطة وسهلة لماذا ؟ لانها بواسطة احدى برامج مايكروسوفت اوفس ( Microsoft office ) الا وهو برنامج مايكروسوفت اوفس وورد ( Microsoft office word ) والكل يعرف هذا البرنامج وهو مخصص للنصوص . 

دعونا نبدا بالخطوات :

1 - افتح برنامج الورد (MS Word) وقم بعمل ادراج جدول فيه حسب رغبتك من ناحية عدد الصفوف والاعمدة وتنسيق الجدول من ناحية الحدود وحتى كتابة البيانات بداخلة واي شي آخر .

2 - اضغط على قائمة ( ملف Manual ) من نفس برنامج الورد ثم اختار ( حفظ باسم save as )  .

3 - بعد عملية ( حفظ باسم save as ) تظهر قائمة تحدد فيها مكان الحفظ واسم الملف ونوع الملف ، اختار حفظ بنوع ( Web Page ) كما هو موصح في الصورة التالية :

4 - بعد حفظ الملف كنوع ( Web Page ) قم بفتح الملف بواسطة برنامج محرر النص ( Notepad ) او برنامج ( Edit Plus ) فيظهر كود الجدول.

5 - قم بنسخ الكود بالكامل ومن ثم قم بلصقة في محرر نصوص مدونتك بداخل تبويب ( HTML ) . او انسخ  جزء من الكود الذي يبداء بوسم ( <table> ) وينتهي بـ  (  </table> ) .

6 -  واخيرا قم بعمل حفظ لجدولك ومبرووووووووك ،،،

تعليقاتكم تهمنــــــــــــا وزيارتكم تســــــــــرنا 

المصدر | مدونة المحررون العرب

...تابع القراءة

طريقة عمل جدول في مدونات بلوجر

السلام عليكم ورحة الله وبركاتة اخواني الكرام اليوم سنتعلم درس جديد عن كيفية وضع جدول  او كشف بيانات في مدونة بلوقر ، طبعا هناك الكثير من المدونيين او اصحاب المدونات عندما ينشرون مواضيع في مدوناتهم احيانا يحتاجون لعمل جداول بيانية او احصائية او محاسبية مثلا او اي جدول آخر في محتوى موضوعاتهم ( تدويناتهم ) او قد تخطر في بالهم هذه الفكرة ولكن لا يعلمون كيف ؟ لأن محرر نصوص بلوجر القديم او الجديد لا توجد به خاصية لانشاء جدول او جداول احصائية. وانا واحد من هولاء الذين كنت لا اعلم بذلك ولكن بعد بحثي في بعض المصادر الاجنية وجدت طريقة بسيط جدا من خلال صندوق محرر الرسائل مباشرة، طبعا هناك توجد عدة طرق لانشاء جداول في بلوجر ولكن كل طريقة تختلف عن الاخرى وفي درسنا هذا سنتعلم اولا الطريقة باكواد CSS Styling في 10 خطوات مبسطة ومن ثم في درس آخر سنتعلم الطريقة الاخرى ان شاء الله تعالى .

في هذا الدرس ستتعلم على خطوة خطوة كيف تعمل او تضع جدول بدءا من بسيط الى جدول اكثر تعقيدا مع الالوان والخلفيات والحدود . وفي آخر الدرس نعطي مثال عملي تطبيقي شامل كل الخطوات .

اولا سنبدا بجدول بسيط ذو ثلاثة اعمدة وثلاثة صفوف وبعدها نستمر تدريجيا على خطوة خطوة لنحسن شكل ووظيفة الجدول حتى نحصل على الجدول كما هو موضع في الصورة ادناه :

اضغط على الصورة للتكبير

دعونا نبدا بالخطوات وبسم الله الرحمن الرحيم  :

1 - من لوحة تحكم مدونتك اضغط على زر ( انشاء مشاركة جديدة - نشر) والذي يرمز له برمز القلم . او قم بفتح مشاركتك المحفوظة في مسودة المشاركات التي كتبتها سابقا ولم تنشرها وتريد لها جدول مثلا .

2 - في صندوق محرر النصوص تجد تبويبين ( تأليف و HTML ) انقر على تبويب ( HTML ) .

3 - انسخ الكود التالي وقم بلصقة في صندوق محرر النصوص (HTML ) . انظر للصور التي بعد الكود توضح العملية :

<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>عمــود رقم 1</th>
<th>عمــود رقم 2</th>
<th>عمــود رقم 3</th>
</tr>
<tr>
<td>خلية حرف أ</td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
</tr>
<tr">
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
</tr>
</table>

لتوضح الالوان الموجودة في الكود :
* اللون الازرق : رقم 2 باللون الازرق في الكود يقصد به عرض حدود الجدول .
* اللون الوردي : يقصد به كود لون حدود الجدول ( لون حدود الجدول ) .
* اللون الاحمر : يقصد به كود لون خلفية الجدول ( لون خلفية الجدول ) .
* اللون البرتقالي : الرقم اوالنسبة 100% يقصد بها عرض الجدول في المدونة بامكانك تغيير النسبة بما يتناسب مع مدونتك .
* اللون البني الغامق : رقم 3 =Cellpaddin يقصد به توسيع خانات او خلايا الجدول بامكانك تغييره الى اي رقم آخر .
* الاخضر الغامق : رقم 3 =Cellspacing  يقصد به توسيع حدود الجدول الخارجية وايظا توسيع الحدود التي بين الخلايا  .
* عمود رقم 1 : يمكنك تغيير كلمة (عمود رقم1 و2 و3 ) رأس الجدول الى الكلمات التي تريدها حسب جدولك هذا مجرد مثال فقط .
* خلية حرف أ : وايظا يمكنك تغيير كلمة ( خلية حرف أ و ب و ت ... الخ ) خلايا الصفوف حسب جدولك الى ارقام او كلمات اخرى هذا مثال فقط على الكود .

اضغط الصورة للتكبير

اضغط الصورة للتكبير

طبعا اخوتي الكرام لا تنسو ان هذا الكود ينتج عنه جدول ذو ثلاثة اعمدة وثلاث صفوف ( انظر للصورة ادناه ) يعني عبارة عن 12 خانة ويعتبر الكود الاساسي في درسنا هذا . اما بقية الخطوات التالية التي سنتعلمها هي عبارة عن اضافة ميزات مختلفة للجدول ، بما في ذلك كيفية اضافة المزيد من الاعمدة والصفوف للجدول و لون خلفية رأس الجدول والحدود ، وكذا اضافة عنوان للجدول تحته او فوقة مباشرة وايظا تغيير حجم الجدول .

نتيجة الكود / اضغط على الصورة للتكبير

4 - في هذه الخطوة بالذات نقوم باصلاح مشكلة مزعجة في Blogger وهي احيانا ظهور مساحة كبيرة بيظاء فارغة فوق الجدول بعد نشرة في المدونة . لاصلاح هذه المشكلة نقوم باضافة الكود الذي باللون الاحمر الجديد فوق كود الجدول الاساسي ونقوم باضافة كود الاغلاق هذا (  </div>  )  بعد نهاية كود الجدول الاساسي ( انظر بداية الكود ونهايتة :

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>عمــود رقم 1</th>
<th>عمــود رقم 2</th>
<th>عمــود رقم 3</th>
</tr>
<tr>
<td>خلية حرف أ</td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
</tr>
<tr">
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
</tr>
</table></div>

5 - في الخطوة الخامسة نقوم باضافة كود جديد آخر لتحسين مظهر رأس الجدول يعني تغيير خلفية ولون نص رأس الجدول للتتناسب مع نظام الالوان الخاصة بمدونتك . انظر الكود ادناه باللون الاحمر وبداخله كود لون الخلفية باللون الازرق ولون النص بالوردي قم بتغيير لون الخلفية ولون النص حسب رغبتك :

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>عمــود رقم 1</th>
<th>عمــود رقم 2</th>
<th>عمــود رقم 3</th>
</tr>
<tr>
<td>خلية حرف أ</td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
</tr>
<tr>
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
</tr>
</table>

النتيجة : انظر للصورة التالية لترى ان الخلفية باللون ( الازرق ) ولون النص ( بالابيض )  لرأس الجدول اختلف عن صورة الجدول الموجودة في خطوة رقم 3 :

اضغط على الصورة للتكبير

6 - دعونا في هذه الخطوة نتعلم كيف نظيف صف او عدة صفوف افقية للجدول وكذلك كيف نظيف عمود او عدة اعمدة راسية للجدول  انظر للصورة التالية تجد فيها زيادة لصف رابع من الخلايا التالية ( Cell D ,Cell G,Cell F,Cell E ) وزيادة عمود رابع ( Column Num4 ) وتحته الخانات التالية( C,B,A ) : الصورة هي نتيجة للكود الذي بعدها مباشرة خطوة 6 ،،

اضغط الصورة للتكبير

تابع معي الكود التالي يوضح كيف تظيف صف / صفوف او عمود / اعمدة للجدول كما تشاهده في الصورة اعلاه  :

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>عمود رقم1</th>
<th>عمود رقم2</th>
<th>عمود رقم3</th>
<th>Column Num4</th>
</tr>
<tr>
<td> خلية حرف أ </td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
<td>Cell A</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
<td>Cell B</td>
</tr>
<tr>
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell D</td>
</tr>
</table>

توضيح الالوان الموجودة بداخل الكود :
* اللون الاحمر : يعني اضافة عمود رابع ( column nu 4 ) للجدول العملية مجرد نسخ ولصف فقط من نفس الكود لا اقل ولا اكثر .
*اللون البرتقالي : يعني اضافة خانة A للصف رقم 1 عمود رقم4 يعني تنسخ كود خلية حرف ت وتعمل ( enter ) ولصقة مباشرة تحتة .
* اللون البني :  اضافة خانة B للصف رقم2 عمود رقم4 .
* اللون الاخظر : اضافة خانة C للصف رقم3 عمود4 .
* اللون الوردي : يعني اضافة صف كامل من اربع خلايا ( D,G,F,E ) عبارة عن عملية نسخ الصف الثالث بكامله ولصقه مباشرة تحتة ،  بس ركزو شوية ان بداية كل صف يبدا بـــ الكود ( <tr> ) وينتهي بالكود ( </tr> ) وكذلك كود اعمدة الجدول انظر للصورة التالية تبين تفصيل الكود :

اضغط الصورة للتكبير 

7 - في هذه الخطوة نقوم بعمل بعض التحسينات او شوية فنيات للجدول يعني اضافة الوان للصفوف بحيث تكون خلفية كل صف تختلف عن الصف الثاني وهكذا وذلك باضافة كود لخلفية الصف . ولكن قبل ان نعمل هذا الكود يتطلب منا ايظا عمل كود آخر قبلة يجعل نص او محتوى ( كتابة ) الجدول متوسطة وسط الخلايا ( الخانات ) لاننا لو ما عمل هذا الكود سترى الكتابة او النص بداخل الجدول تتجه لليسار او اليمين يعني مش في الوسط وذلك بسبب اضافة كود خلفية الصف لكود الجدول الاساسي  :

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>عمود رقم1</th>
<th>عمود رقم2</th>
<th>عمود رقم3</th>
<th>Column Num4</th>
</tr>
<tr class="alt">
<td> خلية حرف أ </td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
<td>Cell A</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
<td>Cell B</td>
</tr>
<tr class="alt">
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell D</td>
</tr>
</table>

توضيح الاكواد الملونة :
* الون الازرق : يقصد به الكود الذي يجعل الكتابة او محتوى الجدول في وسط خلايا الجدول يعني متوسطة .
* الون الاحمر : هو كود لون خلفية الصف ولون نص الصف بامكانك ان تغير لون خلفية الصف والنص حسب رغبتك .
* الون الوردي : هو الكود الذي يتحكم في اختيارك لاي صف من صفوف الجدول انت تريده يختلف خلفيته عن الاخر . وفي مثالنا هذا هو موجود في كود الصف الاول والثالث ( خلفية اصفر) بينما كود الصف الثاني والرابع لا يوجد ( خلفية ازرق) ، وتضعه فوق رأس كل صف كما هو مبين في الكود اعلاه . انظر للصورة التالية نتيجة الكود :

نتيجة خطوة 7- اضغط للتكبير

8 - طبعا في الخطوة الثامنة سنتعلم كيف نظيف عنوان او شرح ( caption ) للجدول مرتبط به مباشرة يعني فوقة او تحته انظر للصور التالية توضح العنوان فوق الجدول وتحت الجدول .

طيب تابع معي اين سنضع كود عنوان الجدول في الكود الاساسي وتابع الشرح بعد الكود :

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<caption>هنا اكتب العنوان </caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>عمود رقم1</th>
<th>عمود رقم2</th>
<th>عمود رقم3</th>
<th>Column Num4</th>
</tr>
<tr class="alt">
<td> خلية حرف أ </td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
<td>Cell A</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
<td>Cell B</td>
</tr>
<tr class="alt">
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell D</td>
</tr>
</table>

توضيح الاكواد الملونة المظافة في كود الجدول الاساسي :

* اللون الوردي : هو الكود الذي يجعل عنوان او شرح الجدول في الوسط . انظر للصور اعلاه تجد العنوان فوق الجدول في الوسط .

* طبعا هنا ركز معي شوية بخصوص الكودين الازرق والاحمر : في حالة اذا اردت ان يكون العنوان فوق الجدول قم بمسح او ازالة  الكود الازرق فقط  وخلي الاكواد الاخرى على ما هم عليه ( الاحمر و اللوردي)  ، وفي حالة اذا اردت ان يكون العنوان تحت الجدول خليهم على ماهم عليه كما هم في الكود اعلاه ، وفي مثالنا هذا اذا طبقت الكود اعلاه تجد عنوان تحت الجدول . واكتب العنوان الذي تريده بين  (  <caption>هنا اكتب العنوان </caption>  ) .

9 - الخطوة التاسعة نتعلم كيف نغير حدود الجدول بدل ما هي حدين مع بعض دبل ( double ) نجعلها ذو حد واحد فقط ( single ) لاحظ  الصورة التالية توضح ان الجدول اختلف عن الجدول السابق اصبح جدول ذو حد واحد :

تابع معي الكود لتتعلم كيف نجعل الجدول ذو حد واحد ؟ :

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
<caption>هنا اكتب العنوان </caption>
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
<th>عمود رقم1</th>
<th>عمود رقم2</th>
<th>عمود رقم3</th>
<th>Column Num4</th>
</tr>
<tr class="alt">
<td> خلية حرف أ </td>
<td>خلية حرف ب</td>
<td>خلية حرف ت</td>
<td>Cell A</td>
</tr>
<tr>
<td>خلية حرف ث</td>
<td>خلية حرف ج</td>
<td>خلية حرف ح</td>
<td>Cell B</td>
</tr>
<tr class="alt">
<td>خلية حرف خ</td>
<td>خلية حرف د</td>
<td>خلية حرف ذ</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell D</td>
</tr>
</table>

توضيح الاكواد الملونة :
* كم بتغيير رقم cellspacing الى صفر (0 ) كما هو موضح باللون الاحمر في الكود اعلاه . او بامكانك ان تطبق خاصية ازالة الحدود يعني باضافة الكود كما هو مبين باللون الازرق . 

ملاحظة مهمة: خاصية ازالة الحدود يعني (عملية تصفير الرقم ) ليست مدعمة بواسطة كل متصفحات الانترنت ولهذا اعطينا خيار آخر وهو اضافة الكود الذي باللون الازرق . ولك الاختيار اما ان تعمل صفر ( 0 ) او تظيف الكود باللون الازرق وكل الطرق تؤدي الى روما . 

10 - والان استمر باضافة البيانات في جدولك وقم بتعبئة الخانات الى البيانات والارقام والكلمات التي تريدها بدلا من كلمة ( عمود1 و خليه حرف أ و Cell A ) لاننا هنا اشرنا اليهم مجرد مثال توضيحي فقط ، 

11 - واخيرا قم بعمل حفظ لجدولك وقم بنشره في مدونتك ومبرووووووووك عليك الجدول . 

مثال عملي تطبيقي على الدرس 

اخوتي الكرام سنبدا بمثال عملي تطبيقي على درسنا هذا وليكن مثلا على مدى التعرض للعنف الاسري طبعا تم اخذ هذا البيانات من احدى البحوث العلمية لبلدا ما . وهنا قمنا بتغيير على الجدول من حيث الحدود والالوان ولون الخط . والجدول التالي هو ليس صورة وانما تطبيق على الدرس اعلاه  :

يتضح من الجدول ادناه أن 3.33% من عينة البحث هن يتعرضن للإيذاء الجسدي غالبا بينما تنخفض النسبة لتصل إلى 2.5 % هن يتعرضن كثيراً للإيذاء الجسدي كما وضحت 10% هن يتعرضن الإهانة وأشارت 5% هن يتعرضن الإهانة غالباً و رأت 4.16%  هن غالباً ما يتعرضن للتهديد بإلحاق الأذى أما 8.33 هن يتعرضن كثيراً للتهديد بإلحاق الأذى وأضافت 20.83% هن يتعرضن كثيرا للشتم أو الصراخ في الوجه وهذه ليست بالنسبة القليلة ولا يجب الاستهانة بها لأنها توضح وجود عنف يمارس عليهن حتى لو كان بالشتم أو الصراخ في الوجه في حين 9.1 % هن غالباً ما يتعرضن للشتم أو الصراخ في الوجه.

جدول يوضح مدى التعرض للعنف الاسري

العبــــــــــــــــارة	ابـــــداً	نـــــادراً	احيانــــا	كثيرا	غالبــــا	المجمــوع
تتعرضين للايذا الجسدي	70	16.6	7.5	2.5	3.3	100
تتعرضين للاهانة	35.8	28.3	20.8	10	5	100
تتعرضين للتهديد بالحاق الاذى	60.8	11.6	15	8.3	4.1	100
تتعرضين للشتم او الصراخ في وجهك	27.5	22.5	20	20.8	9.1	100

واخيرا زوار المدونة الكرام ما عليكم سوى الدعاء لي بالخير والصحة والعافية ونرحب بتعليقاتكم وانتظروني في الدرس القادم لشرح طريقة اخرى ثانية كيف تعمل جدول او كشف بيانات احصائية في مدونة بلوجر ؟

المصدر | مدونة المحررون العرب

...تابع القراءة