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

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

2012-02-12T11:46:00.000-08:00

اهلا وسهلا بكم زوار مدونة المحررون العرب اليوم نبدا بدرس جديد عن كيفية اضافة صندوق اعجاب الفيسبوك في المدونة بشكل ممتاز وجذاب في نفس الوقت . لماذا تحتاج الى وضع صندوق اعجاب للفيسبوك في مدونتك؟ لان هناك ملايين من الناس يستخدمون الفيسبوك كل يوم اما عن طريقة الكمبيوتر او الموبايل سوى كانو في وقت فراغهم او في وقت عملهم ، ولهذا تجد الكثير من مشرفي المواقع و المدونات يستفيدون من هذه الخدمة لما لها من منافع كبيرة في الاشهار.
فاذا كنت صاحب موقع او مدونة متخصصة مثلا في مجال تجاري تعرض سلع ومنتجات لشركة ما ، وتريد ان تشهرها بقدر المستطاع فعليك اولا التركيز على شبكة الفيسبوك الاجتماعية ، وقد يبادر في ذهنك السؤال التالي : ولماذا اهتم بموقع الفيسبوك وبما ان فيه ناس احيانا يتحدوث في الواقع عن اشياء تتعلق بحياتهم الشخطية ؟ اقولك بسؤالك هذا انت على خطاء لان الفيسبوك يعتبر في حد ذاتة ارض او دولة كبيرة و عظيمة عدد سكانها كبير جدا ويتزايد مع الوقت ، ومن دون ان تنفق سنت واحد يمكنك ان تروج وتسوق لمنتجاتك وبضائعك من موقعك او مدونتك من خلال هذا الشبكة الاجتماعية العملاقة الفيسبوك ( 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 .

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

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

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

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

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

2012-02-05T10:39:00.000-08:00

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

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

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

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

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

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

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- ثم قم بمعاينة الصفحة للتاكد ثم اعمل حفظ . ومبروووووووك عليك وحظاً سعيداً ،،

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

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

2012-02-01T09:59:00.000-08:00

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

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

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

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

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

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

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

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

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

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

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<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 + "_ArchiveMenu"' 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% ....

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

2012-01-20T10:05:00.000-08:00

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

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

اضغط للتكبير

والان دعونا نبداء بشرح عملية ربط المدونة او الموقع والمنتدى بالفيسبوك على خطوة خطوة بالصور :

1 - قم بالدخول على صفحتك او حسابك في الفيسبوك او قم بانشاء صفحة جديدة باسم مدونتك ثم انقر على الرابط التالي :

http://apps.facebook.com/rssgraffiti/?ref=bookmarks&count=0

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

اضغط للتكبير

3 - تضهر صفحة اخرى تطلب السماح بطلب اذن لاحظ الصورة التالية :

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

4 - في هذا الخطوة يطلب منك اضافة تغذية جديدة قم بالنقر على زر Add feed كما هو موضح في الصورة التالية :

5 - في هذه الخطوة اولا هل انت مفعل خدمة التغذية في مدونتك او لا ؟ اذا انت مفعل خدمة RSS ( خدمة التغذية ) هنا يطلب منك وضع رابط تغذية مدونتك او موقع او منتداك ثم عنوان المدونة ثم رابط المدونة لاحظ الصورة التالية :

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

وصلو على رسووووووول الله واي سؤال او استفسار نرجو التعليق ،،،

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

2012-01-17T10:59:00.000-08:00

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

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

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

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

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

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

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

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

لاحظ الصورة :

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

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

لاحظ الصورة :

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

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 ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .
لاحظ الصور التالية :

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

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

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

2012-01-12T10:35:00.000-08:00

بسم الله الرحمن الرحيم والصلاة والسلام على رسولنا الصادق الامين ، اخواني زوار المحررون العرب طبعا قد تحدثنا في درس سابق عن كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟ . ولكن درسنا اليوم يختلف عن الدرس السابق ، في هذا الدرس نشرح اسلوب او نمط آخر في كيفية اظافة اداة ( آخر المواضيع ) للمدونة او الموقع ، حيث ان هذه الاظافة تاخذ على شكل قائمة عمودية تحتوي على آخر العناوين الريئسية ( 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(http://1.bp.blogspot.com/_LqmwslVmHqM/TFQ5FmgcPRI/AAAAAAAAB7M/5nTPNdVga2k/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 - واخيرا قم بعمل حفظ للاداة . وصلى الله وسلم على رسولنا الكريم ،،،

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

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

2012-01-06T10:23:00.000-08:00

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الخلق محمد ابن عبدالله الصادق الامين اخواني الاعزاء شرحنا في الدرس السابق طريقة عمل جدول في مدونات بلوقر و وعدناكم باننا سنشرح طريقة اخرى مبسطة . اليوم سنتعلم في موضوعنا هذا الطريقة الثانية في كيفية انشاء ووضع جداول بيانات في محتوى تدوينات مدونات بلوجر ، هذه الطريقة بسيطة وسهلة لماذا ؟ لانها بواسطة احدى برامج مايكروسوفت اوفس ( 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 - واخيرا قم بعمل حفظ لجدولك ومبرووووووووك ،،،

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

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

2011-12-27T12:23:00.001-08:00

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

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

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

اذاً دعونا نبدا على مرحلة مرحلة كيف تظيف زر عداد للتعليقات على شكل فقاعة او اي شكل آخر ؟ :

1 - من لوحة تحكم مدونتك ادخل على تبويب ( قالب ) ومن ثم ( تحرير HTML ) وبعدها انقر على ( متابعة ) ثم اعمل علامة صح على توسيع قوالب عناصر واجهة المستخدم .

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

]]></b:skin>

3 - قم بنسخ الكود التالي ثم الصقة فوق الكود نمره 2 مباشرة :

.comments-button {
width : 48px;
height : 48px;
background : url(http://3.bp.blogspot.com/_vLeiVavkV_M/TRqeSsZYiYI/AAAAAAAADw0/NKcU4q-Vbq4/s200/comment-counter-bubble.png) no-repeat;
float : left;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding-top:10px;

ملاحظة :

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

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

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

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

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

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

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

<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

الصورة توضع كيفية وضع الكود خطوة 5 في كود خطوة 4 :

يعني بحيث يصبح الكود على الشكل التالي :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.allowComments'>
<a class='comments-button' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

* اللون الاخضر هو الكود الذي قمنا بالبحث عنة في خطوة رقم 4 ثم وضعنا الكود خطوة رقم 5 بداخلة الذي يرمز له باللون الاحمر .

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

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

6 - واخيرا قم بعملية حفظ للقالب وافتح صفحة مدونتك الرئيسية لتشاهد زر التعليقات على شكل فقاعة امام العناوين الريسية .

ومبروووك عليكم الاضافة ،،، وماعليكم سوى الدعاء الصالح بظهر الغيب لأخيكم العبد الفقير لله صاحب المدونة

واي سؤال او استفسار نرحب بها في التعليقات ،،،

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

2011-12-23T10:44:00.000-08:00

السلام عليكم ورحة الله وبركاتة اخواني الكرام اليوم سنتعلم درس جديد عن كيفية وضع جدول او كشف بيانات في مدونة بلوقر ، طبعا هناك الكثير من المدونيين او اصحاب المدونات عندما ينشرون مواضيع في مدوناتهم احيانا يحتاجون لعمل جداول بيانية او احصائية او محاسبية مثلا او اي جدول آخر في محتوى موضوعاتهم ( تدويناتهم ) او قد تخطر في بالهم هذه الفكرة ولكن لا يعلمون كيف ؟ لأن محرر نصوص بلوجر القديم او الجديد لا توجد به خاصية لانشاء جدول او جداول احصائية. وانا واحد من هولاء الذين كنت لا اعلم بذلك ولكن بعد بحثي في بعض المصادر الاجنية وجدت طريقة بسيط جدا من خلال صندوق محرر الرسائل مباشرة، طبعا هناك توجد عدة طرق لانشاء جداول في بلوجر ولكن كل طريقة تختلف عن الاخرى وفي درسنا هذا سنتعلم اولا الطريقة باكواد 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> ) بعد نهاية كود الجدول الاساسي ( انظر بداية الكود ونهايتة :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

توضيح الاكواد الملونة :
* كم بتغيير رقم 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

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

كيف تظيف بنرات اعلانانية بتأثيرات JQuery على مدونة بلوجر ؟

2011-10-10T04:27:00.000-07:00

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة صح في خانة توسيع قوالب عناصر واجهة المستخدم.

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F) :

]]></b:skin>

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

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;
border: none;
}

بعد ذلك إبحث عن هذا الكود :

</head>

ثم ألصق الكود التالي قبله :

والآن قم بحفظ القالب انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم " إضافة أداة" ثم اختر اداة HTML/Javascript والآن الصق الكود التالي:

مع إدخال رابط المعلن مكان اللون الاحمر ورابط البنر الخاص به مكان الرابط الأزرق في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء في درس اخر مع تحياتي للاخ ابو اياد ،،،

طريقة اضافة زر 1+ لجوجل على مدونة بلوجر

2011-10-07T12:17:00.000-07:00

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

ولإضافة هذا الزر في تدويناتك وفتح المجال للزائرين باقتراح مدونتك نقوم بشرح طريقة تركيب الزر +1 على المدونة . انتقل الى لوحة تحكم مدونتك ثم اختر ( تصميم ) بعدها تحرير ( HTML ) ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم .

قم بالبحث عن الكود التالي بواسطة لوحة التحكم ( ctrl +f ) : -

</body>

ثم قم بلصق الكود التالي قبلة : -

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

<data:post.body/>

ثم قم بلصق الكود التالي بعده ليكون الزر1+ اسفل التدوينة ، او قم بلصق الكود قبله ليكون الزر1+ تحت عنوان التدوينة :

<b:if cond='data:blog.pageType == "item"'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall من الكود بأحد القياسات الموجودة في الصورة أسفله .

وإذا أردت إظهار الزر 1+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق

تعليقاتكم مرحبا بها ،،،

المصدر : مدونة ابو اياد

كيف نقوم باضافة تأثيرات حركية على الصور في مدونات بلوجر ؟

2011-09-15T12:18:00.000-07:00

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

والآن دعونا لنتوجه لتطبيق الكود :

- انتقل الى لوحة تحكم مدونتك ثم اختر علامة ( تصميم ) ثم ( تحرير HTML ) ثم ضع علامة ( صح ) في خانة " توسيع قوالب عناصر واجهة المستخدم " . بعدها قم بالبحث عن الكود التالي وذلك بالاستعانة بلوحة التحكم ( Ctrl + F ) :

]]></b:skin>

ثم قم بوضع الكود التالي قبلة : -

.post img {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .

والتتيجة تكون الصورة على هذا الشكل .

أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،

استفساراتكم وتعليقاتكم مرحبا بها

المصدر مدونة ابو اياد

اعتذر لكم عن غيابي الطويل

2011-04-30T14:45:00.000-07:00

بسم الله الرحمن الرحيم

تحية طيبة واشواقٌ قلبية..

اهدي من خلالها سلام الله ورحمته وبركاته لمن يمتلكون احن واطيب القلوب اخواني واخواتي في عــالــم التدوين والمدونات .

فقد تغـيبـت مـراسـيـلي وانقطعت حـبـال مواضيعي !! إنـقـطـعـت فـجـأة ودون إنـذار وبـالـرغـمـ مـن إن الكثير منكم رغب في الإطمائنان علي الا أنكم لم تعاتبوني علي تقصيري .. فواجبي أن أقدم اعتذاري لكم عن غيابي المفاجئ وأعلم أن هذا الاعتذار لا يكفي .. فواجبي أكبر من ذلك بكثير اتجاهكم..

ولاكن يعلم الله ان غيابي كان بسبب انشغالي الكثير ..

ها أنا أمد يدي إليكم وكلي أسف وندم .. فاقبلوا اعتذاري هذا ..

و نعدكم إن شاءالله بمواضيع جديدة و منوعة في القريب

العاجل بإذن الله نأمل أن تحوز رضاكم. كما و نشكر

لكم إخلاصكم و زياراتكم المتواصلة للمدونة.

تحياتي

اضافة كود المتصلون حالياً في مدونة بلوجر

2010-08-04T18:45:00.000-07:00

أخواني الكرام هذه الخاصية تتيح لك معرفة عدد الزوار المتصلين بمدونتك أو موقعك حاليا و لتفعيل هذه الخاصية اتبع الشرح المفصل بالصور .

أولا : أدخل على هذا الموقع :http://freeonlineusers.com/

01

اذهب الى sign up بالموقع وابدا عملية التسجيل البسيطة

02

بدأ عملية التسجيل املأ الخانات الفارغة كما في الصورة التالية اختر اسم مستخدم وكلمة مرور بسيطة واضغط
register

03

ستظهر لك رسالة تخبرك بارسال رسالة بريدية الى بريدك الإلكتروني قم بفتح بريدك الإلكتروني للإكمال عملية التسجيل

لتفغيل عملية التسجيل اضغط على الرابط في بريدك الإلكتروني كما هو موضح في الصورة التالية

هذه رسالة تخبرك بأنه قد تم تفعيل حسابك بالموقع ويمكن أن تقوم بانشاء الكود ونسخه الى مدونتك

على يمين الصفحة بالأعلى ستجد دخول المستخدم كما في الصورة التالية أدخل بريدك الإلكتروني الذي سجلت به وكلمة المرور كما هو موضح في الصورة .

بعد دخولك الى حسابك اذهب الى أعلى الصفحة واضغط link codes

اكتب عنوان موقعك أو مدونتك أي العنوان الإلكتروني واضغط Add

ستظهر لك هذه النافذة يمكنك تبديل لون الخط وكذالك يمكنك اختيار اسم ثم اضغط على generate code

قم بنسخ الكود بكامله .

الأن اذهب الى مدونتك وادخل الى صفحة التخطيط .

ثم اذهب الى اضافة أداة كما في الصورة التالية .

اختر HTML/JavaScript

قم بلصق الكود في المساحة البيضاء واختر عنوان للأداة كمثال يمكنك كتابة بالعربية المتصلون حاليا أو بلإنجليزية online users ثم اضغط حفظ

من صفحة التخطيط اضظ كضالك على الخيار حفظ وقم بعرض المدونة الإلكترونية لمشاهدة الأداة وهي تعمل .

النتيجة .

أرجوا من كل الإخوة الأفاضل الذين استفادو من هذا الشرح المتواضع الدعاء الصالح والمشاركة بالرود وبارك الله فيكم.

كيف تضيف اداة الرزنامة او التقويم في مدونة بلوجر ؟

2010-01-13T10:50:00.000-08:00

شرح مفصل لطريقة اضافة رزنامة calendar الى مدونتك :

اذهب الى التخطيط من لوحة التحكم :

اختر اضافة أداة :

من نافذة اضافة أداة اختر المزيد من الأدوات كما في الصورة التالية :

04

اختر Daily Calendar:

اختر أي اسم للرزمامة بالعربي أو الإنجليزي أو الفرنسي كما يمكنك التحكم في حجم الرزنامة حسب ما يناسب مدونتك :

قم بحفظ العمل وعرض المدونة لمشاهدة الرزنامة :

مشاهدة الرزنامة على المدونة :

لا تنسونا من دعائكم الخالص بظهر الغيب وترك تعليق أو نصيحة أو استفسار أو بريد الكتروني أو روابط مدوناتكم .

كيف تحفظ نسخة احتياطية لمدونة بلوجر ؟

2010-01-13T09:54:00.000-08:00

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

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

الخطوة الأولى :

الخطوة الثانية :

الخطوة الثالثة :

الخطوة الرابعة :

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

كيف تصمم فوتر ( Footer ) جميل بثلاث خانات اسفل مدونة بلوجر ؟

2009-12-29T09:54:00.000-08:00

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

1 - صورة من قائمة ( عناصر الصفحة ) قبل عمل الخانات في الفوتر المدونة :

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

2 - صور بعد عمل الخانات في فوتر ( footer ) للمدونة ( من جهة لوحة التحكم وايظا من جهة المدونة ) :

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

الآن وبعد معرفتك للمثال وما المقصود بفوتر footer المدونة نبداء بشرح خطوات عمل الخانات الثلاث في فوتر المدونة :

1 - قم بحفظ نسخة احتياطية لستايل المدونة لتتجنب اي مشاكل قد تحصل لا سمح الله وايظاً اذا كانت عندك ادوات قمت باظافتهم من سابق في فوتر مدونتك قم بنقلهم الى العمود الجانبي ( side bar ) للمدونة .

2 - من لوحة التحكم اذهب الى قائمة ( التخطيط ) ثم الى ( تحرير HTML ) وابحث ( Ctrl +f ) عن الكود التالي :

]]></b:skin>
</head>

ثم قم باضافة الكود التالي فوقه مباشرة :

#footer-columns {

border-top:1px solid #999999;

clear:both;

margin:0 auto;

background: #ffffff;

}

#footer-columns h2 {

margin: 1.6em 0 .5em;

font: bold 16px Arial;

padding:10px;

background: #ffffff url(http://img159.imageshack.us/img159/9099/toolbg.jpg) no-repeat center right;

color: #9b2d15;

}

.column1 {

padding: 0px 5px 3px 5px;

width: 30%;

float: left;

margin:3px;

text-align: right;

}

.column2 {

padding: 0px 5px 3px 5px;

width: 31%;

float: left;

margin:3px 3px 3px 5px;

text-align: right;

}

.column3 {

padding: 0px 5px 3px 5px;

width: 30%;

float: right;

margin:3px;

text-align: right;

}

.addwidget {

padding: 0 0 0 0;

}

#footer-columns ul {

list-style:none;

margin:0 0 0;

padding:0 0 0;

}

#footer-columns li {

margin:0;

padding-top:0;

padding-left:0;

padding-bottom:.25em;

padding-right:15px;

text-indent:-15px;

line-height:1.5em;

}

body#layout #footer-columns {

width: 100%;

margin-left: auto;

margin-right: auto;

}

body#layout .column1 {

width: 32%;

float: left;

}

body#layout .column2 {

width: 32%;

float: left;

}

body#layout .column3 {

width: 32%;

float: right;

}

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

3 - قم بالبحث ( Ctrl + F ) عن الكود هذا في مدونتك :

<b:section class='footer' id='footer'/>

ثم استبدله بالكود التالي :

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

ب ) كيفية وضع قائمة وصلات مفيدة للزوار اسفل المدونة :

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

* من قائمة تخطيط ثم عناصر الصفحة اضغط على اضافة اداة ثم قم باختيار اداة HTML / javascript. انظر الصورة التالية :

ثم قم باضافة الكود التالي بداخلها :

<center><a href="http://arab-editors.blogspot.com">الصفحة الرئيسية</a> |

<a href="http://arab-editors.blogspot.com/rss.xml">خلاصة RSS</a> |

<a href="arab-editors.blogspot.com/2009/10/blog-post_23.html">اتصل بنا</a> |

<a href="about us link">عن المدونة</a> |

<a href="privacy link">privacy</a></center>

* العنوان الذي باللون الاحمر في الكود أعلاه هو عنوان مدونة ( المحررون العرب ) أستبدله الى عنوان مدونتك .

أرجو ان تستفيدوا من هذا الدرس وأي استفسار او سؤال نحن نرحب بتعليقاتكم عليه ،،،،

كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟

2009-12-23T11:09:00.000-08:00

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

مثال للشريط انظر الصورة :

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

خطوات الشرح :

أولا : قم بالدخول الى حسابك على بلوجر ومن اللوحة التحكم اختر التبويب :تخطيط - عناصر الصفحة وانقر على إضافة أداة في منطقة جزء التخطيط (layout) - منطقة الوسط - ثم اختر من القائمة إضافة HTML/JAVASCRIPT.

وانسخ الكود الأتي :

* قم بتغيير عنوان المدونة الذي باللون الاحمر في الكود الى عنوان مدونتك ...

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

ملاحظــــــــــــــــات على الكود اعلاه :

var nMaxPosts = 10; -يحدد عدد المواضيع التي تظهر في الشريط

var sBgColor; - var sBgColor= grey; :اذا كنت تريد تغيير لون الخلفية

var nWidth; - لتحديد العرض

var nScrollDelay = 185; - لتحديد السرعة كلما قلت القيمة زادت السرعة

var sDirection="left"; - لتحديد جهة الحركة. left = Right to left; Right = Left to right; Up = Down to up; Down = Up to down

var sBulletChar="»»"; هذا هو الرمز الذي يظهر قبل عنوان اي موضوع على الشريط ويمكنك تغييرة

ومبروووووووووووووك عليكم الاظافة ،،،،،،،

تعليقاتكم واستفساراتكم على الموضوع مرحبا بها

اكسب واربح المال من Revtwt باستخدام Twitter

2009-12-18T08:55:00.000-08:00

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

Revtwt لديها الحل : بامكانك وضع مشاركات بها روابط بواسطة موقع Revtwt وار سالها على حسابك في Twitter ، وتكسب فلوس في كل مرة يقوم اي صديق او زائر بالنقر على رابطك ( link ) المعطى لك من قبل Revtwt

Revtwt : هي طريقة جديدة مبتكرة لكسب المال عبر الانترنت بواسطة نشر ( post ) مشاركات او تويتس (tweets ) بواسطة حسابك في توتير ( Twitter ) ، وهي كلمة مختصر من الجملة التالية ( revenue from tweets )

لتبداء مع Revtwt يجب ان يكون لك حساب في تويتر ( Twitter ) وحساب آخر في ( Revtwt ) ، وايظا انت محتاج الى ان يكون لك متابعون ( Followrs ) لايقل عن 50 شخص من المتابعون في حسابك لدى تويتر ( Twitter ) اذا اردت هذه الخدمة . لذا اتبع الاخرين يتبعونك ولو على سبيل المجاملة .

كيف تكسب الاموال( الايرادات ) من خدمة Revtwt ؟

1 - بواسطة الاحالات : Referrals )

برنامج الإحالة من Revtwt هو طريقة ووسيلة رائعة وعظيمة لنشر كلمة من هذه الخدمة الرائعة ولكسب المزيد من المال عبر حسابك في تويتر ( Twitter ) . قم بنشر هذه الروابط الى المتابعون او اشر اليهما بها ، واستلم عن كل واحد يشترك عن طريقك 20 % من عائداتهم لمدى الحياة . Refferals هي عبارة عن روابط او اكواد تعريفية لموقع Revtwt قم بنشرها عبر حسابك في تويتر او قم بوضعها في موقعك او مدونتك طبعاً بعد اشتراكك في هذا الموقع ليشاهدها المتابعون او زوار موقعك وفي حالة النقر عليها والاشتراك بواسطتك من قبل الزواريعطيك Revtwt عائد مقابل الاشتراك بواسطتك ، هذه الاكواد على شكل بنر متحرك ( صورة ) .

2 - النقرات الاعلانبة ( ad clicks ) :

الاحالات ( Referrals ) هي مجرد تويترات او مشاركة روابط url تعريفية لموقع ريفينو تويتس ، لكن النقرات الاعلانية ( Ad clicks ) هي عبارة عن اعلانات لشركات هذا الاعلانات تجدها في حسابك في هذا الموقع في قائمة Post ads . قم باختيار الاعلان للشركة التي تدفع كثير من الفلوس للنقرة الواحدة ثم انشرها عبر حسابك في تويتر ، فاحيانا بمجرد النقر على اعلان عن شركة ماء تحصل على 20 دولار .
طبعاً هنا يمكنك سحب فلوسك اذا وصل رصيدك الى حد 20 دولار او مافوق ، لطلب الدفع يمكنك الحصول على المال المكتسب من هذه الخدمة من خلال حسابك على PayPal .

نرجو التعليق على الموضوع للاهمية ،،،

لزيادة عدد زوار موقعك بادل روابط موقعك مجانا - بشرى سارة للمدونيين

2009-12-16T11:13:00.000-08:00

بشرى سارة لكل زوار ( مدونة المحررون العرب ) الان ضع روابطك في باقي المدونات مقابل أن تضع رابط للمدونات الأخرى عندك ،،،،

الفكرة ببساطة كالاتي ضع هنا رابط لمدونتك والذي يريد أن يتبادل معك الروابط للمواقع او المدونات سيعرض ذلك في التعليقات وأنا سابدأ بنفسي لكل من أراد يضيف موقعي عنده فهذا رابط مدونتي :

http://arab-editors.blogspot.com/

ولكل من أراد المبادلة يترك رابطه في التعليقات بعد ان يضيف رابطي عنده
الفكرة سهلة ونرجو منكم سرعة المشاركة .

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

شرح اضافة زر العودة الى اعلى الصفحة لمدونات بلوجر

2009-12-12T09:39:00.000-08:00

السلام عليكم اخواني الكرام تحية طيبة اليكم موضوع بسيط وهو كيفية اضافة رز العودة الى الأعلى بقدر ماهو بسيط فهو مهم ولابد منه نبدأ

الشرح على بركة الله .

01 -من لوحة التحكم اختر التخطيط وبالإنجليزية layout :

02 - من صفحة التخطيط اختر اضافة أداة :

03 - سوف تظهر لك نافذة بها عدة أدوات اختر منها الأداة HTML/JavaScript الموضحة في الصورة التالية :

04 - والأن نقوم بلصق الكود كما في الصورة التالية كما يمكنك اختيار اسم وليكن العودة الى أعلى الصفحة أو العودة الى الأعلى أو أعلى فقط ثم اضغط على حفظ .

.....................................................................................................................................................................

.........................................................................................................................................................................

05 -مشاهدة الزر على المدونة :

الرجاء من الزوار الكرام الدعاء الصالح بظهر الغيب وترك تعليق أو تساءل أو استفسار أو نصيحة أو رابط مدوناتكم وشكرا لكم على الزيارة .

كيف تعمل فهرس لمدونتك باستخدام خدمة ادوات مشرفي المواقع ؟ انشاء خريطة لمدونات بلوجر

2009-12-10T08:18:00.000-08:00

بسم الله و الصلاة و السلام على رسول الله.
خدمة Google Sitemap ( أدوات مشرفي المواقع ) من الخدمات الأكثر شهرة بين صفوف المدونين و أصحاب المواقع لأنها تمكن من تعريف محرك البحث بخريطة الموقع أو المدونة قصد أرشفة و فهرست المحتويات بشكل جيد . و في هذا الموضوع بإذن الله سنتعرف طريقة إنشائها لمدونات بلوغر Blogger .

1 - إنشاء حساب بقوقل باستخدام أي بريد إلكتروني لديك وذلك من خلال :
Google تسجيل الدخول إنشاء حساب الآن

2 -بعد إتمام الخطوات وإنشاء الحساب قم بتسجيل الدخول من خلال ،،
Google
تسجيل الدخول
حساب جوجل

3 -ثم قم بالبحث عن كلمة ( أدوات مشرفي المواقع :) ومن خلال أول رابط يخرج في نتيجة البحث
أدوات مشرف الموقع

انظر الصورة التالية :

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

4 - عند الدخول بحسابك في جوجل تفتح صفحة لوحة التحكم الريسية بحسابك ثم اضغط على زر ( اضافة موقع ) ثم يفتح حقل اكتب فيه عنوان مدونتك ثم اضغط زر متابعة كما هو في الصورة التالية :

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

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

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

6 - بعد نسخ الكود ولصقة في المدونة قم بالضغط على زر تأكيد كما في الصورة التالية :

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

7 - سوف تفتح لك صفحة جديدة ابحث فيها على ملفات ( sitemap ) اضغط على زر اضافة ملف ( submit a sitemap ) ثم قم بوضع او نسخ واحد من الامتدادات التالية في الحقل ثم اضغط على زر ارسال ملف كما هو موضح في الصورة او اختار ثلاثة المهم انت حر في اختيار الامتدادات :

feeds/posts/default
او
atom.xml
او
/atom.xml?redirect=false&start-index=1&max-results=100
او
/atom.xml?redirect=false&start-index=101&max-results=100
او
/atom.xml?redirect=false&start-index=201&max-results=100

* الامتداد باللون الاحمر: يأرشف لك 26 رابط ( موضوع )
* الامتداد باللون الازرق : يارشف لك اكثر من 26 الى حد 100 موضوع او مقالة في مدونتك
* الامتداد باللون الاخضر : يارشف لك اكثر من 100 مقالة في مدونتك
* الامتداد باللون البني : يارشف لك اكثر من 200 مقالة

انضر الصور لتشرح لك كيفية إرسال ملفات sitemap :

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

أرجوا من الإخوة الكرم الذين استفادوا من الموضوع الدعاء

الصالح وترك تعليق وبارك الله فيكم .

اضافة شريط آخر الاخبار لقناة الجزيرة او العربية .

2009-12-08T09:27:00.000-08:00

إخواني الكرام السلام عليكم ورحمة الله

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

أولاً :

اذهب إلى التخطيط من لوحة التحكم بمدونتك .

ثانياً :

اذهب إلي اضافة أداة :

ثالثاً :

ثم قم باختيار ألأداة هذه ( HTML/JavaScript

رابعاً :

قم بنسخ الكود كاملا التالي :

خامساً :

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

بعد عملية الحفظ تظهر أو تضاف الأداة مباشرة في العمود الجانبي ثم قم بسحب الأداة بواسطة الماوس من العمود الجانبي ( side bar ) الى تحت او اسفل شريط عنوان مدونتك الموجود في صفحة عناصر المدونة .

سادساً :

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

سابعاً :

نهاية العملية ورؤية شريط الأخبار :

ثامناً :

ولإضافة شريط الأخبار الخاص بقناة العربية قم بنسخ الكود التالي عوضا عن الكود السابق :

أرجوا من الإخوة الكرم الذين استفادوا من الموضوع الدعاء

الصالح وترك تعليق وبارك الله فيكم .

كيف تضع او تظيف اداة استطلاع الرأي في مدونة بلوجر ؟

2009-12-07T07:15:00.000-08:00

بسم الله الرحمن الرحيم ، إخواني الكرام هذه أداة جميلة جدا ورائعة ومفيدة وهي أداة استطلاع الرأي حيث أن هذه الأداة تمكنك من اختيار أي سؤال في أي موضوع شئت وعرضه على زوار مدونتك لمعرفة أرائهم حول موضوع ما .
إذاً تابعوا معي شرح خطوات إضافة هذه ألأده وهي كالتالي :

اولاً :

من لوحة التحكم بمدونتك اذهب إلى التخطيط :

ثانياً :

اختر إضافة أداة :

ثالثاً :

ثم اضغط على أداة استطلاع الرأي الموضحة في الصورة :

رابعاً :

ستظهر لك هذه النافذة قم باختيار أي سؤال تريد استطلاع رأي زوار مدونتك عليه واختر الإجابات المناسبة ثم اضغط على حفظ :

خامساً :

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

سادساً :

ظهور الأداة على المدونة وهذا مثال لإستطلاع الرأي حول نيل لقب كأس افريقيا للأمم 2010 :

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

كيف تضع فيديو اليوتيوب الى مدونة بلوجر ؟

2009-12-06T09:24:00.000-08:00

إخوتي زوار مدونة المحررون العرب اقدم اليكم اضافة جميلة وذلك بناءا على طلبات بعض الزوار.

اضف الى مدونتك أحلى مقاطع الفيديو وأجعل مدونتك أكثر اثارة وجلبا للزوار اتبع الشرح المصور واضغط على الصورة لمشاهدتها بحجمها الحقيقي .

الخطوة الأولى :

الخطوة الثانية :

الخطوة الثالثة :

الخطوة الرابعة :

الخطوة الخامسة :

قم بعرض المدونة وشاهد احلى مقاطع الفيديو على مدونتك

كيف تغير قالب مدونتك ؟ كيفية تغيير قالب مدونات بلوجر .....

2009-12-06T09:10:00.000-08:00

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

لوحة التجكم :

من خلال لوحة التحكم تستطيع تغيير خصائص مدونتك , اضغط على التخطيط كما هو موضح في الصورة التالية

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

صفحة التخطيط

من خلال هذه الصفحة اختر تحرير HTML كما هو مبين في الصورة التالية

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

صفحة تحرير HTML

من خلال هذه الصفحة تستطيع تحميل قالب موجود على جهازك على شكل كود HTML كما تستطيع نسخ أي كود HTML كما هو موصح في الصورة التالية

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

مسح الكود السابق

في هذه الخطوة قم بمسح الكود السابق كما هو موضح في الصورة التالية

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

اختيار القالب المناسب

في هذه الخطوة اذهب الى هذه المدونة www.hassan-b.blogspot.com ( مدونة حسان ) ،وقم باختيار القالب الذي تراه يناسب محتوى مدونتك وهي قوالب معربة ومجانية ولكن للأمانة لا تقم بازالة عنوان هذه المدونة من مدونتك وذالك لن يؤثر على مدونتك سلبا أبدا .

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

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

تحميل ونسخ الكود HTML

في هذه الخطوة قم بتظليل الكود HTML للقالب الذي اخترته من مدونة www.hassan-b.blogspot.com لكن اثناء عملية التظليل لا تختار تحديد الكل selct all بل قم بالتظليل بالمؤشر .

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

عملية نسخ الكود HTML

خلال هذه الخطوة قم بنسخ الكود الذي قمت بنسخه

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

عملية تأكيد الحفظ وعرض المدونة

في هذه المرحلة قم بتأكيد عملية الحفظ ثم انقر فوق عرض المدونة الإلكترونية كما هو موضح في الصورة التالية

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

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

انشر مدونتك في اقوى محركات البحث ؟؟

2009-11-24T10:18:00.001-08:00

اضافة الموقع او المدونة في اقوى محركات البحث " جوجل " و " ياهو " و " ام اس ان "

انشاء مدونات بلوجرblog blogger ,قوالب معربة لمدونات blogger ,اضافات على مدونات بلوجر blog blogger ,اربح المال مع مدونات بلوجرblogger ,كل ما يتعلق بمدونات بلوجر blogger هنا تجدونه في مدونة المحررون العرب .

الإضافة المميزة لمحرك البحث جوجل:

وصلة الإضافة: https://www.google.com/addurl

هذا المحرك ليس بالشئ الهين .. لأنه يستخدم خورازمية معقده وليست بسيطه كبقية محركات البحث .. والفكرة الأساسية فى ظهور النتائج لدى جوجل تتلخص فى وجود "رتبة عالية للصفحة" High PR
والرتبة تظهر فى شريط أدوات جوجل بالشكل
وهى من صفر إلى 10 .. كلما زادت كلما ارتقى ترتيب موقعك .. فكرتها ذكيه .. حيث أنها تعتمد على شعبية صفحتك فى الويب كله! ولزيادة قيمتها .. احصل على أكبر قدر ممكن من الوصلات إلى موقعك .. والوصلات التى تشير إلى موقعك اسمها back links أو inbound links .. نقطه فى غاية الخطورة!
تخيل أن صفحة فى موقع رتبتها 4 .. وكان بالصفحة وصلة إلى صفحة فى موقعك .. توقع أن موقعك سترتفع رتبته قريبا ..
لو صفحة فى موقع رتبتها 8 وأخذت منها وصلة لموقعك فكأنك أخذت 6 وصلات من صفحات ذات رتبة 3 أو رتبة منخفضه!
الخلاصة: كلما حصلت على وصلات أكثر من صفحات ذات رتبة مرتفعه أكثر، كلما ازدادت رتبة صفحتك.
كيف تحسب رتبة صفحة على الويب؟ باستخدام شريط أدوات جوجل أو الأسهل من خلال مواقع عديدة .. على سبيل المثال موقع: http://www.stargeek.com/pr_checker.php ستجد أنه يمكنك معرفة الرتبة لأى صفحة بأى موقع ..

موقع آخر:

http://www.webmasterbrain.com/upcoming-pag...ool--tool11.htm

وبعد ذلك متى سترتفع الرتبة؟ سترتفع مع أول تحديث لمحرك البحث .. قد يتطلب الأمر شهور أو أسابيع! لا تدرى!
جوجل يتحتاج الكثير والكثير من الصبر!

- وآخر التطورات التى أضافها جوجل كعلامة مميزة أخرى لهم هى خرائط المواقع google sitemaps وتجد الموضوع على الوصله:

https://www.google.com/webmasters/sitemaps

الإضافة المميزة لمحرك البحث يــاهـــــو:

وصلة الإضافة: http://search.yahoo.com/info/submit.html

محرك بحث يأتى بعدد معقول من الزوار ولا يتطلب مجهود كبير فى الوصول إليه .. مجرد أيام قد تصل أسبوع .. فهو مهتم بالفهرسة بسرعة كبيرة (أسرع من جوجل فى الفهرسة).

الإضافة المميزة لمحرك البحث إم إس إن:

وصلة الإضافة: http://search.msn.com/docs/submit.aspx

يقترب كثيرا من الياهو ولكنه أقل فى الأهمية!

إذا كنت مسئول عن موقع (أي webmaster) فعليك أن تراعى التالى
- راقب موقعك جيدا عن طريق برامج الإحصائيات وستجد الكثير منها مجانا مثل awstats و webalizer وتجدهما على الوصلتين :
http://awstats.sourceforge.net/

http://www.mrunix.net/webalizer

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

- احصل على inbound links كثيرة .. ولكن كيف؟ أمامك حلول بسيطه مثل عمل التبادل الاعلانى أو الأهم وهو تبادل الوصلات link exchange وهذه طريقة معروفة حيث تحدد جزء مهم من صفحتك

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

- حاول تجديد محتويات موقعك باستمرار للحصول على فهرسة أكبر ووصولك يصبح أعمق فى محركات البحث.

- استخدم تصميم بسيط فى الصفحة بعيدا عن تعقيدات الجافا سكريبت وكثرة الصور والجداول لأن كل هذا يؤدى إلى بطئ تحميل الصفحة! تخيل لو شخص وجد موقعك الأول فى نتائج البحث وتعذب لكى يدخله!! (محرك البحث قد لا يمكنه فهرسته بصورة كاملة أحيانا!).

تعليقاتكم مرحباً بها

تعلم كيفية انشاء مدونة على بلوجر ؟؟ خطوات انشاء مدونة على بلوجر Blogger

2009-11-24T10:03:00.000-08:00

بسم الله الرحمن الرحيم ، إخوتي الكرام نبداء معكم بموضوع آخر عن كيفية إنشاء مدونة في بلوجر ( خطوات إنشاء او بناء مدونة على بلوجر blogger ) ، طبعاً الموضوع هذا للأخوة المدونيين المبتدئين الجدد اللذين بدأت في أذهانهم فكرة إنشاء مدونة على بلوجر .

الواجهة الرئيسية باللغة الفرنسية :

هذه الواجهة الأولى للموقع باللغة الفرنسية طبعا يمكنك تغيير اللغة إلى أي لغة شئت ونحن نختار اللغة العربية طبعا فهي الأسهل لنا كعرب .

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

الصفحة الرئيسية باللغة العربية :

هذه الصفحة الأولى للموقع باللغة العربية من هنا يمكن أن تبدأ في إنشاء مدونتك .

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

كتابة الإيميل وكلمة السر :

هذه الخطوة تقوم فيها بإدخال البريد الإلكتروني الخاص بك وكلمة السر التي تستخدمها للدخول إلى بريدك الإلكتروني أي كأنك تدخل إلى بريدك الإلكتروني العادي وطبعا البريد الإلكتروني يجب أن يكون على gmail كما هو مبين في الصورة التالية وكذالك قم باختيار اسم لمدونتك بدون أن تنسى إدخال الرمز أي الحروف المعطاة في أدنى الصفحة .

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

اختيار عنوان أو اسم للمدونة :

هذه النقطة مهمة جدا في نجاح مدونتك وفي نشرها على محركات البحث إذ يجب أن يكون عنوان المدونة مطابق لما تحتويه ويمكن تغيير العنوان وقت ما تشاء.

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

اختيار القالب المناسب لمدونتك :

هذه الصفحة تمكنك من اختيار القالب والشكل الذي يناسب مدونتك حتى يكون هناك انسجام بين المحتوى والشكل كما يمكنك تغيير القالب وقت ما تشاء .

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

نهاية عملية انشاء المدونة :

تحتوي هذه الصفحة على رسالة تفيد بأنه قد تم إنشاء مدونتك بنجاح ويمكن الانتقال إلى الصفحة الموالية لبدأ عملية التدويين بالضغط على بدء التدويين كما هو موضح في الصورة أدناه .

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

انطلق في عالم التدويين :

وبعد إتمام العملية بنجاح يمكنك بدء التدوين من خلال هذه الصفحة اختر عنوان مناسب للموضوع الذي تريد كتابته ويمكنك حتى إضافة صورة أو فيديو.

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

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

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

2009-11-24T09:05:00.000-08:00

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

طبعاً الكثير يسأل عن طريقة فتح روابط المدونة في نافذه

جديدة

بل ان كثير من المتابعين للمدونات يريدون ان

يظلوا في نفس الصفحة الرئيسية

والاطلاع على بقية المواضيع بحرية

في حين تفتح مواضيعهم التي اختاروها في نافذه
جديدة

واليكم هذه الطريقة البسيطة والجميلة حقا :-

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

= نختار التخطيط

= ونختار
تحرير html

= نوسع القالب

{ احذر وانصح كالعادة : يجب
اخذ نسخة للقالب }

= نبحث عن هذا الكود --
طبعا بــ ctrl + f

<head>

= ونضيف تحته مباشرة هذا
الكود

بعد ذلك قم بحفظ القالب

ومبرووووووك عليك هذه ألإضافة

ما نريده منكم هو التعليق على الموضوع ولكم مني أطيب الأمنيات

عيدكم مبارك عساكم من عواده ؟؟؟؟؟؟

2009-11-24T08:37:00.000-08:00

إخواني الأعزاء زوار مدونة ( المحررون العرب ) مقدماً أقولكم
" عيد سعيد وكل عام وانتم بألف خيييييييييييير "

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

اما انا فسأقضي هذا العيد مع عائلتي واقاربي وجيراني في منطقة ريفية بعيدة لايوجد بها خدمة الانترنت لمدة 15 يوم من تاريخ 25 / 11 / 2009 م ، فعذراً لمن راسلني وتأخرت في الرد عليه .

كيف تميز تعليقاتك عن تعليقات الزوار الآخرين في مدونتك ؟ تمييز تعليقات صاحب المدونة عن تعليقات بقية الزوار في مدونات بلوجر !!

2009-11-22T00:35:00.000-08:00

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

والان خطوات الشرح :

الخطوة الاولى : نذهب الى قائمة ( تخطيط ) ثم ( تحرير HTML ) ثم نقوم بتوسيع القالب . انظر الصورة :

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

الخطوة الثانية : نقوم بالبحث ( CTRL+F ) عن الكود التالي :

]]></b:skin>

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

.author-comments {
background: #99C9FF;
border: 3px solid #99C9FF;
padding: 5px;

* اللون الاحمر الذي في الكود يمثل لون خلفية التعليقات ، فهو الان عبارة عن لون بخلفية ازرق قم بتغييره اذا شئت .
* اللون الازرق في الكود يمثل لون الاطار المحيط بالتعليق . قم بتغييره اذا شئت .
* اللون الاخضر في الكود يمثل عرض اطار تعليقاتك بالمدونة . قم بتغيير العرض اذا شئت .

الخطوة الثالثة : نقوم بالبحث الكود التالي :

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

<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

ثم نبحث عن الكود هذا :

ثم نضع فوقه الكود التالي :

</b:if>

خلاصة الشرح :

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

ثم نقوم بالضغط على زر حفظ ومبروك عليك ،،،،

تكبير حجم خط التعليقات

نقوم بالبحث عن ( COMMENTS ) وبعدها ندور ونبحث في الاكواد بتاعها حتى نلاقي الكود التالي :

#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;

ثم نضيف لها كود حجم الخط كالتالي :

font-size: 150%;

اللون الاحمر هو حجم الخط قم بتغيير اذا شئت

خلاصة الشرح :

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

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 160%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
font-size: 150%;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 100%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */

* اللون الاخضر : الكود الذي نبحث عنه علشان نقوم بتكبير الخط
* اللون الاحمر : الكود الذي قمنا باضافته ( كود حجم الخط )

ما نريده منكم سوى دعائكم لي و تعليقاتكم على الموضوع ،،،

طريقة عرض التصنيفات على شكل سحابة أوسمة - سحابة الكلمات الدلالية لمدونة بلوجر

2009-11-20T11:59:00.000-08:00

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

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

طريقة وشرح تركيب الأداة :

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

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

ثم نعمل التالي علشان تكون على شكل سحابة . انظر الصورة التالية :

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

1 - خيار عرض كل التصنيفات أو بعضها فقط ، عند تحديد الثاني يظهر خيار التعديل في أسفله.
2 - عند ضغط "تعديل" تظهر النافذة الصغيرة كما في الصورة و منها يمكنك اختيار التصنيفات التي تريد إظهارها.
3 - هذه لاختيار شكل عرض الأداة، إما لائحة بشكلها العادي أو سحابة أوسمة. يفضل وضع أداتين ، واحدة بشكل لائحة و الأخرى سحابة أوسمة.
4 - تفعيل أو تعطيل عرض الأرقام التي تظهر بجانب التصنيفات و التي تدل على عدد التدوينات المصنفة تحتها.

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

شرح كيفية إضافة زر مواقع النشر الإجتماعية (المفضلة) إلى مدونتك.

2009-11-20T10:18:00.000-08:00

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

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

1 - وضعها في القائمة الجانبية.
و هذه أسهل الطرق و لا تتطلب منا إلا الذهاب إلى موقع الخدمة ثم اختيار الأيقونات المراد عرضها و ضغط زر توليد الكود ، فننسخه إلى مربع في القائمة الجانبية بالنسبة لووردبريس أو بلوك لباقي برامج إدارة المحتوى أما في بلوجر فنختار إضافة أداة جديدة من نوع Html/Javascript و نضع الكود فيها و نحفظها .

2 - وضعها أسفل كل موضوع أو تدوينة.
بالنسبة لووردبريس هناك إضافة ممتازة قد تغنيك عن نسخ الأكواد و هي Sociable ، يمكن تحميلها من هنـــــــا ، بعد فك الضغط عن الملف يرفع مجلد الإضافة إلى مجلد Plugins الموجود داخل wp-content وتفعل الإضافة من لوحة التحكم حيث يمكن تعديلها من خلال قائمة الإعدادات.

1* اضافة بطريقة بسيطة وسهلة من AddThis وبها جميع مواقع النشر المفضلة .

أدخل الى لوحة التحكم لمدونتك ومن ثم توجه الى التبويب : التخطيط |تحرير ال HTML و اختر 'توسيع قوالب عناصر الاستخدام ' :

ابحث عن الجزء :

وضف مباشرة تحتها هذا الكود :

<div><a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a2504334d304afb"></script></div>

2* إضافة من ShareThis و تحتاج الى التسجيل :

- بعد التسجيل انقر فوق 'Enable Sharing 'get the button ومن ثم تتوجه الى صفحة اعداد الاضافة الخاصة بك وفيها خطوتين :

الأولى : فيها يمكنك اختيار اي مواقع النشر التي تريد اضافتها، كيفية ظهورها مع كيفية ظهور الزر .
الثانية : اختيار الخدمة الخاصة بك :
ملاحظة : في الخطوة 2 اختر Any WebSite .

- الآن أضغط على Get Share This Code
* أخيرا:
ستظهر لك صفحة بها الكود الخاص بك قم بإضافته كما أسلفنا في الشرح السابق للإضافة AddThis.

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

2009-11-20T05:46:00.000-08:00

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

طبعاً العداد الذي سوف نشرح طريقة تركيبة يتكون من اربع مكونات كالتالي :

1 - اجمالي عدد صفحات التي تم زيارتها - total page visits

2 - اجمالي عدد الزوار الذين زارو مدونتك من تاريخ اضافة العداد - total visitors

3 - اجمالي عدد الزوار هذا اليوم - visitors today

4 - عدد الزوار المتواجدون الان - online visitors

مثال عن العداد انظر الصورة التالية :

واليكم شرح خطوات اضافة نموذج هذا العداد او غيره من النماذج في هذا الموقع :

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

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

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

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

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

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

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

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

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

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

طريقة وضع اواضافة كود العداد او اي كود آخر في العمود الجانبي للمدونة ( sidebar ) :

1 - افتح لوحة تحكم مدونتك ثم اذهب الى ( تخطيط ) ثم الى ( عناصر الصفحة ) ثم اضغط ( اضافة اداة ) . كما هو موضح في الصورة التالية :

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

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

اضغط على الصورة لتكبر ( قائمة ادوات بلوجر )

اضغط على الصورة لتكبر ( تهيئة html/javascript )

اضغط على الصورة لتكبر ( لوحة التحكم بعد اضافة اداة العداد )

واخيراً نقوم بالضغط على زر حفظ الموجود فوق في لوحة التحكم .

نتيجة شرحنا للموضوع هذا هي انظر للصورة التالية :

اضغط على الصورة لتكبر ( النتيجة بعد الاضافة واظهار العداد في المدونة )

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

الطريقة الصحيحة لاختيار مجال محدد لموقعك او مدونتك ؟

2009-11-19T10:35:00.000-08:00

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

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

منافسة قليلة = سيطرة وربح كبير

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

لغة انجليزي = سعر الضغطات مرتفع

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

مجال محدد لمدونتك = كسب زوار مستهدفين

والى اللقاء في موضوع آخر زوارنا الكريم ما نريده منكم هو تعليقكم على هذا الموضوع ،،
الناشرون العرب