The pro security

اسس تصميم المواقع الألكترونية

2012-07-08T08:12:00.002-07:00

سلسلة التعلم في الفصول الدراسية

أُسُس تصميم المواقع الإلكتروني

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

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

هنالك ثلاثة طرق لعمل المواقع الإلكترونية:

نظام (Html) : إنه نظام خاص بالنص المجرد الذي يُمَكِنَك من صياغة صفحة الكترونية . وبالإمكان النظر إلى هذا النظام على أنه لغة البرمجة الخاصة بالإنترنت .
محرر لغة الـ (Html) : إنه يوفر الوسائل والطرق المختصرة لصياغة وتحرير صفحات الـ ( Html) خاصة بالإنترنت .
برنامج (Expression Web/Dreamweaver) وبرنامج (WYSIWYG) تُمكنك هذه البرامج من عمل صفحات خاصة بالإنترنت دون الحاجة إلى برنامج (Html) ويحظى برنامج الـ بميزة التشغيل المباشر على الكومبيوتر المركزي (أي لا حاجة لنقل ملفات مكتملة).

التصميم :

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

المحتوى أو المضمون :

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

وجه مسار التصفح بأسلوب:

بسيط.
واضح.
يقوم على خرائط للموقع تتألف من طبقات أو مستويا
منظم ( التفكير بطريقة الخطوط العريضة ).

الأشكال أو الصور المتداخلة:

إن تطوير الموقع يبدأ بنصه وهيكله . بعد أن يتم تطوير الهيكل الاساسي , يجب تحليل المحتوى من حيث مَنْ الذي سيستفيد من عمل التصاميم التي تقوم على الصور أو النص .

مباديء عامة :

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

قالب بلوجر إخباري بشكل جميل جدا.؟؟

2012-07-07T17:03:00.000-07:00

قالب بلوجر إخباري

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

مميزات القالب:
1- وجود جزء خاص بالمواضيع والاخبار المهمة ، يتم عرض أهم 4 أخبار بشكل متتالي جذاب ، كما هو موجود في المواقع الاخبارية العالمية
2- الأخبار مقسمة على شكل عمودين ، مع وجود ملخص لكل خبر بصورة مصغرة له ، وعند الضغط عليه ينقله للخبر كاملا
3- الشريط الجانبي : تم وضع المواضيع المشهورة ، التصنيفات ، الأرشيف ، على شكل تبويب ثلاثي ، مما يعطي لمسة جمالية ، ويتجنب ازدحام الادوات.
4- وجود مكان بالإعلى لوضع إعلانات أدسينس مقاس 468*60 ، مما يزيد من فرص الربح إن شاء الله.
5- وجود أزرار للصفحات الاجتماعية كالفيسبوك ، تويتر ، يوتيوب ، وهي مما لا يستغنى عنه في المواقع الإخبارية.

معاينة القالب:
http://cnn-turkish.blogspot.com

تحميل القالب وشرح طريقة التعديل:

اضغط هنا للتحميل

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

أولا : تعديل مربع المواضيع المهمة:
1- قم بالدخول إلى مدونتك ثم اضغط على >> قالب >> اضغط على زر المسمى "تحرير html" أسفل صورة القالب >> ستظهر لك نافذه بها رسالة تحذيرية اضغط على "متابعة"
2- ابحث عن السطر التالي (اضغط ctrl+f للبحث السريع):

ستجد تحت تلك العبارة سطرين:
الأول تضع فيه رابط صفحة الخبر
الثاني تضع فيه رابط صورة الخبر (ويفضل أن يكون حجم الصورة 630*300) كما هو موضح بالصورة التالية:

اضغط لتكبيرها

ثم ابحث عن عبارة :

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

وبالطبع كرر هذا الأمر مع الأخبار المهمة الأخرى

<a href='http://newsforce.blogger-zoom.com/2012/01/blog-post.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofmqMckIe_CKp_cCVaZmhv91pmbzskKxWuhVZyXFXmqJiF9qsabK1WmThZ12YWaVAGbMHMA64yxmuQ2avN-RAy1jzSYqfBKpyJlFQ74iEos6OCJ2gj-gDifYC_xtv3VKzkgfKANtC-m3Q/s1600/fb2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>

الفيس بوك يكافئ الهاكر</h3>
<p>قرر موقع فايسبوك تقديم بطاقة إئتمان للهاكرز يكون باستطاعتهم عن طريقها شراء ما يريدون أو حتى سحب المبالغ التي بحاسبها نقدا عن طريق أي مكينة صرف آلى ولكن ما هو المقابل
</p>

ثانيا :تعديل أزرار المواقع الإجتماعية

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

ابحث عن السطر التالي:

في أسفل ذلك السطر ستجد أكواد الصفحات الاجتماعية ، قم باستبدال النص العربي الخاص بكل صفحة بالرابط الخاص بك
مثال:
استبدل عبارة "رابط قناتك على اليوتيوب" بـ رابط قناتك مثل : http://www.youtube.com/user/DblClickBlog
وهكذا بالنسبة للفيسبوك وتويتر وجوجل بلس

ثالثا:وضع إعلان أدسينس بالأعلى:

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

ابحث عن السطور التالية:

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yqAaVzriEU0lNq0XgrDDOxb5XxOQJskolTd5yQ-mDlhG5o4JgDKPRfCeRHw9Z6hsjoe0gCDeC9PweMt-iVSSq-Z7m62mcfDtEoaqygVW560O9v_RV5i0qdMRQ2l05j5RAhRe26OYNzGD/s1600/adsense.jpg' style='height:60px' width='468px'/>

ثم قم باستبدال الجزء الأحمر بكود الأدسينس الخاص بك (لاحظ أن تختار حجم 468*60)

رابعا: تعديل شعار المدونة:
قم بتحميل الملف التالي (ملف فوتوشوب psd)

http://www.mediafire.com/?6e84xjhp12iw1nu

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

16Share

بلوجر

كيف ترقم صفحات مدونتك ؟ ترقيم الصفحات في مدونة بلوجر page navigation

2012-07-07T15:18:00.003-07:00

كيف ترقم صفحات مدونتك ؟ ترقيم الصفحات في مدونة بلوجر page navigation

قراءة للموضوع

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

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

أولا : من لوح تحكم مدونتك و تحت تبويب ( تخطيط ) تختار "عناصر الصفحة" ثم تضيف إداة Html/Javascriptجديدة في أي مكان تشاء لأننا سننقلها فيما بعد . الآن أنت أمام نافدة الأداة فقط قم بنسخ الكود الموالي و ألصقه داخلها و لا تجعل لها عنوانا.

مثال : صورة الكود بعد أصافته ( النتيجة )

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

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

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

نرجو من الاخوة الزوار التعليق على الموضوع ولو بكلمة ( شكراً )

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

2012-07-07T15:16:00.003-07: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

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

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

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

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

2012-07-07T15:14:00.003-07:00

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

قراءة للموضوع

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

لوحة التجكم :

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

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

صفحة التخطيط

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

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

صفحة تحرير HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2012-07-07T15:07:00.003-07: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-07-07T13:04:00.001-07:00

الحمد لله والصلاة والسلام على رسول الله وعلى آله وصحبه ومن والاه وبعد :

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

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

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

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

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

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

* تنويه: يستحسن تحميل الملفات (سواء سكربتات أوصور ،،،)ورفعها على مساحاتكم الخاصة كـ (جوجل بايج) لمن لديه حساب جوجل.

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

2012-07-07T13:01:00.001-07:00

قراءة للموضوع

لوحة التجكم :

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

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

صفحة التخطيط

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

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

صفحة تحرير HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2012-07-07T12:59:00.004-07:00

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

قراءة للموضوع

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

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

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

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

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

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

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

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

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

2012-07-07T12:59:00.000-07:00

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

قراءة للموضوع

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

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

أولاً :

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

ثانياً :

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

ثالثاً :

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

رابعاً :

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

خامساً :

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

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

سادساً :

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

سابعاً :

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

ثامناً :

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

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

2012-07-07T12:55:00.001-07:00

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

قراءة للموضوع

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

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

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

طبعا يا شباب هذا الرابط 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 - قم بمعاينة القالب ثم اعمل حفظ . وحظا سعيدا ،،،

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