ديسمبر 2015

كتابة مشاركة احترافية وشرح ادوات تحرير الرسائل

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

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

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

يتكون صندوق كتابة الرسائل من :

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

شرح ادوات تحرير المشاركات على بلوجر

  1. عنوان الموضوع الذي تقوم بكتابته.
  2. وضعان مختلفان لكتابة المواضيع, الوضع تأليف هو الإفتراضي اما الوضع html هو للكتابة بالاعتماد على اكواد html.
  3. للتراجع خطوة او التقدم خطوة.
  4. لتغيير نوع الخط المستخدم لكتابة النص. مثال: تعلّم بلوجر.
  5. لتغيير حجم الخط. مثال: تعلّم بلوجر.
  6. لإختيار نوع الجملة المكتوبة ان كانت عنوان او عنوان فرعي او عنوان ثانوي, الافتراضي هو عادي.
  7. لجعل النص عريض او ذو خط ثقيل. مثال: تعلّم بلوجر.
  8. لجعل النص مائل. مثال: تعلّم بلوجر.
  9. لوضع خط اسفل النص. مثال: تعلّم بلوجر.
  10. لوضع شرطة على النص كأنه ممسوح او تم إلغاءه. مثال: تعلّم بلوجر.
  11. لتغيير لون النص. مثال: تعلّم بلوجر.
  12. لتغيير لون خلفية النص. يمكن تظليل كلمة واحدة. مثال: تعلّم بلوجر.
  13. لإضافة رابط في المشاركات. مثال: تعلّم بلوجر.
  14. لإضافة صورة داخل المشاركة. مثل الصور التي امامكم الآن.
  15. لإضافة فيديو داخل المشاركة.
  16. لإقتطاع النص ويظهر على الرئيسية الصورة الاساسية للمشاركة وبعض النص المختصر. يظهر النص حتى وضع هذه العلامة. وهي تسمى اقرأ المزيد.
  17. لتحديد إذا ما كان النص محاذي لليمين او لليسار او في المنتصف تماماً.
  18. لعمل قائمة مُرقمة مثل التي تقرأها الآن.
  19. لعمل قائمة مُنقطة بدلاً من الأرقام.
  20. لجعل جزءاً من النص وكأنه اقتباس.
  21. لإزالة اي تنسيق على النص.
  22. يوضح لك الأخطاء الإملائية.
  23. يحول حروف اللغة الإنجليزية إلى احرف اخرى ولا يستخدم هذا الزر ولا نريده في كتابة موضوع.
  24. لتحديد إذا ما كان النص يُقرأ من اليمين إلى اليسار او العكس.
التسميات على بلوجر
لكتابة اسم القسم الذي يضم الموضوع الذي تقوم بكتابته
وكما بالصورة يمكنك إضافة الموضوع إلى قسمين ثم اضغط تم.

تغيير تاريخ المشاركة على بلوجر
لتغيير تاريخ كتابة المشاركة
الوضع الإفتراضي تلقائي, يمكنك اختيار وضع تعيين الوقت والتاريخ ثم تحديد التاريخ الذي ترغب ثم اضغط تم.

تخصيص رابط ثابت على بلوجر
عند كتابة موضوع يتم إنشاء رابط تلقائي , يمكنك اختيار  رابط ثابت مخصص.
كما بالصورة مكتوب post وانظر الرابط ايضاً في الصورة ينتهي بـ post.

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

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

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

تعلم بلوجرمدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر مدونة تعلم بلوجر تحتوي دروساً قيمة في مهارات التعامل مع المدونات بلوجر.

يتم عمل مثل هذه الصورة من خلال الكود التالي:
[code type="HTML"]<a href="رابط الصورة" imageanchor="1" style="clear:right;float:right;margin-bottom:1em;margin-left:1em"><img alt="عنوان الموضوع او الصورة" border="0" height="150" src="رابط الصورة" title="عنوان الموضوع او الصورة" width="200"/></a>اكتب النص هنا .<br />[/code]
بهذا انتهى موضوعنا واتمنى اكون قد افدتكم ولو قليلاً

تعرف على إضافات بلوجر وبند التخطيط

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

انت عندما تدخل إلى مدونة تجدها تتكون من :
  • header = رأس المدونة مكان البانر
  • body = جسم المدونة مكان المشاركات
  • sidebar = الشريط الجانبي يحمل بعض المعلومات والإضافات
  • footer = ذيل المدونة ويحمل معلومات صاحب المدونة والحقوق وبعض الإضافات احياناً
صورة مفصلة لتخطيط المدونة
  • رأس المدونة header يستخدم دائماً لوضع البانر الذي يحمل اسم المدونة والبانر الإعلاني.
  • جسم المدونة body يحتوي على مشاركات ودروس ومحتوى المدونة.
  • الشريط الجانبي sidebar يحتوي على إضافات بلوجر من صندوق إعجاب فيسبوك ومتابعة عبر البريد وغيرها الكثير.
  • ذيل المدونة footer يحتوي على إضافات بلوجر كما في الشريط الجانبي بالإضافة إلى حقوق المدونة
[alert title="ملاحظة" icon="info-circle"]إضافات بلوجر يمكن إضافتها في اي مكان بالمدونة ولكنها عادتاً تكون بالشريط الجانبي وذيل المدونة[/alert]

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



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

  • مشاركة مميزة: إبراز مشاركة خاصة على مدونتك 
  • HTML/JavaScript: إضافة وظيفة طرف ثالث أو شفرة أخرى إلى مدونتك الإلكترونية. 
  • الملف الشخصي: عرض معلومات عن نفسك للزائرين.
  • أرشيف المدونة الإلكترونية: تسهيل الأمر على الزائرين للتنقل في مدونتك باستخدام روابط للمشاركات الأقدم.
  • رأس الصفحة: عرض عنوان مدونتك الإلكترونية ووصفها.
  • صورة: إضافة صورة من جهاز الكمبيوتر، أو من أي مكان آخر على الويب.
  • التسميات: إظهار جميع تسميات الرسائل في مدونتك الإلكترونية.
  • الصفحات: عرض قائمة بالصفحات المستقلة في مدونتك.
  • قائمة الروابط: عرض مجموعة من المواقع المفضلة لديك، أو المدونات، أو صفحات الويب لزائريك.
  • نص: إضافة رسالة نصية إلى مدونتك.
  • المشاركات الشائعة: عرض قائمة بالمشاركات الأكثر شعبية من مدونتك.
  • مربع البحث: السماح للزائرين بالبحث في مدونتك، وقائمة المدونات الموصى بقراءتها، وكل شيء آخر وضعت روابط له.
  • إحصاءات المدونة: عرض عدد مرات مشاهدة الصفحة في مدونتك.
  • شريط الفيديو: ‏عرض مقاطع YouTube لقرائك لمشاهدتها دون مغادرة الصفحة.
  • قائمة المدونات الإلكترونية: قم بعرض ما تقرأه باستخدام مجموعة روابط المدونات الإلكترونية المفضلة لديك.
  • متابعة بالبريد الإلكتروني: تسهيل الأمر على الزائرين للاشتراك في استلام البريد الإلكتروني عندما تنشر مشاركة.
  • عرض الشرائح: إضافة عرض الشرائح من الصور المفضلة لديك إلى مدونتك.
  • الشعار: ‏إظهار تباهيك بخدمة Blogger من خلال إضافة شعار إلى صفحتك.
  • استطلاع رأي: تعرف على آراء الزائرين بإضافة استطلاع رأي إلى مدونتك الإلكترونية.
  • ارتباطات الاشتراك: اسمح للقراء بالاشتراك بسهولة في مدونتك باستخدام برامج قراءة المواجز الشائعة
  • زر 1+: السماح للزائرين باقتراح علامتك التجارية والمحتوى الخاص بك.
  • الترجمة: السماح للزائرين بترجمة مدونتك إلى لغات مختلفة.
  • النشرة المصورة: ‏عرض العناوين الرئيسية الحالية من أخبار Google في مدونتك.
  • القائمة: إضافة قائمة بأسماء الكتب أو الأفلام المفضلة أو الأشياء الأخرى التي ترغبها.
  • المتابعون في Google+‎: ‏إبراز جمهورك في +Google بالكامل (من حيث حجمه وبعض من الوجوه الودودة التي تميزه)، وإتاحة الفرصة للزائرين لمتابعتك على +Google.
  • شارة Google+‎: ‏تعريف الزائرين بأنك متاح على +Google والسماح لهم بمتابعتك بنقرة واحدة.
  • الإسناد: عرض بيانات الإحالة لمدونتك.
وهناك المزيد غير ذلك.
هذه كانت نبذة عن بند التخطيط وإضافات الأدوات سوف تنفعنا جيداً في دروس قادمة إن شاء الله.

مثال على تركيب إضافة المواقع الإجتماعية

انقر إضافة آداة في الشريط الجانبي للمدونة, ثم اختر الآداة HTML/JavaScript سوف يفتح امامك خانة للكتابة فارغة, ضع فيها هذا الكود:

[code type="JQuery"]<style> div#social_icons{height:25px;width:100%;position:relative} div#social_icons ul{clear:right;float:right;list-style:none;position:relative;right:50%;text-align:center;margin:0!important;padding:0!important} div#social_icons ul li{display:block;float:right;list-style:none;position:relative;left:50%;margin:0 0 0 1px !important;padding:3px 10px!important} div#social_icons ul li span{display:block;font-size:8px;border:none;padding:40px 0 2px!important} div#social_icons ul li:first-child span{margin-right:-2px} div#social_icons ul li:last-child span{margin-right:-10px} div#social_icons .delicious a,div#social_icons .twitter a,div#social_icons .google a,div#social_icons .facebook a,div#social_icons .pinterest a,div#social_icons .stumbleupon a,div#social_icons .linkedin a{width:24px;height:24px;display:block} div#social_icons .delicious a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -76px 0} div#social_icons .twitter a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat 0 0} div#social_icons .stumbleupon a{background: urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -101px 0} div#social_icons .google a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -50px 0} div#social_icons .facebook a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -25px 0} div#social_icons .pinterest a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -126px 0} div#social_icons .linkedin a{background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFsAnZLLqBmjb0W8FStvh7elboneYkoE4ZWp2BEH-8FvD4rTPXM_vZ4CERk_1TUd7lOUriuEvoA1Cn_QQebWOjowLoxV5xhEOT9R58Q-rGOejqCM1Yd6VMzS7NjMHPk1K1hrxGllGBqpC/s1600/advsoc_widget_main_24.png) no-repeat -151px 0} </style> <div id="social_icons"> <ul> <li class="delicious" style="padding:0 4px!important"><a id="delicious" href="http://delicious.com/post?url=ضع رابط مدونتك&amp;" class="fade" target="_blank" style="opacity:1" title="Delicious"></a></li> <li class="twitter" style="padding:0 4px !important"><a id="twitter" href="http://twitter.com/معرف تويتر هنا" class="fade" target="_blank" style="opacity:1" title="Twitter"></a></li> <li class="facebook" style="padding:0 4px !important"><a id="facebook" href="http://www.facebook.com/معرف الفيسبوك هنا" class="fade" target="_blank" style="opacity:1" title="Facebook"></a></li> <li class="google" style="padding:0 4px !important"><a id="google" href="https://plus.google.com/u/1/YOUR-GOOGLE-PLUS-ID" class="fade" target="_blank" style="opacity:1" title="Google+"></a></li> <li class="stumbleupon" style="padding:0 4px !important"><a id="stumbleupon" href="http://www.stumbleupon.com/submit?&amp;url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="StumbleUpon"></a></li> <li class="pinterest" style="padding:0 4px !important"><a id="pinterest" href="http://www.pinterest.com/هنا PINTEREST معرف" class="fade" target="_blank" style="opacity:1" title="Pinterest"></a></li> <li class="linkedin" style="padding:0 4px !important"><a id="linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=ضع رابط مدونتك" class="fade" target="_blank" style="opacity:1" title="LinkedIn"></a></li> </ul> </div>[/code]

تغيير قالب (شكل) المدونة وضبط القالب الجديد

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

قالب المدونة هو ملف ينتهي باللاحقة او الصيغة xml ويشمل بداخله مئات السطور البرمجية للعديد من لغات تطوير صفحات الإنترنت: xml, html, css, javascript.

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

والآن نعود مرة أخرى إلى موضوعنا الرئيسيي لهذا اللقاء وهو تغيير قالب المدونة.
اولاً تحتاج إلى قالب بلوجر, وقد قُمت بوضع قالب احترافي رائع جداً لمن يريد على الرابط التالي التحميل والمعاينة:


بعد تحميل القالب إذهب إلى لوحة تحكم المدونة ثم إذهب إلى البند قالب وانظر اعلى اليسار في الصفحة تجد زر نسخ احتياطي/استعادة اضغط عليه, ومن خلال النافذة الصغيرة التي فتحت امامك اضغط على الزر Choose File وحدد مكان القالب الذي قمت بتحميله منذ قليل ثم اضغط تحميل .

النافذة المخصصة لتحميل القالب الجديد

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

اهم التعديلات على اي قالب بلوجر

ما يميز اي مدونة عن الأخرى هو اسم المدونة ومحتواها واقسام المدونة المكتوبة في القائمة الرئيسية للمدونة.
القائمة الرئيسية للمدونة
إذاً سوف نقوم بتعديل هذه القائمة لكتابة اقسام مدونتك.
حسناً إذهب إلى لوحة تحكم المدونة ثم إلى البند قالب ثم اضغط على تحرير HTML ليفتح امامك مُحرر قوالب بلوجر.
في اي مكان داخل هذا المحرر الملئ بالسطور اضغط على لوحة المفاتيح Ctrl + F ليظهر مكان صغير اكتب فيه اي اسم من الاسماء الموجودة في القائمة الرئيسية وليكن متفرقات ثم اضغط انتر.
سوف تجد شكل الكود كالتالي:
<li><a href='#'>متفرقات</a></li>

والآن يمكنك تغيير اسم متفرقات باسم القسم لديك وتغيير العلامة # برابط القسم لديك.
رابط القسم يكون هكذا
/search/label/بلوجر
لا يهم كتابة اسم رابط المدونة.

تغيير بانر او صورة المدونة الرئيسية

جهز صورة خاصة بشعار مدونتك بمقاس 230px × 100px ثم إذهب إلى بند التخطيط من خلال لوحة تحكم المدونة. ثم إذهب إلى المستطيل الذي يحمل اسم المدونة يكون كالتالي.. تعلّم بلوجر (رأس الصفحة) إضغط تحرير انظر الصورة التالية.


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

Ahmad Saleh

{picture#https://lh3.googleusercontent.com/-x9IaIzz6qY0/AAAAAAAAAAI/AAAAAAAAB6c/-z2x3sEQyZE/s120-c/photo.jpg} انا اخوكم احمد صالح, من مواليد 1985 لا ادرس أي مجال في مجالات الكمبيوتر الدارسة التعليمية, إنما كل ما تعملته كان من خلال الإطلاع وحُب الشئ. ليس هناك الكثير عني سوى أنني أحب التدوين ومن الطبيعي الحديث عن ما تحبه, وها أنا معكم أروي لكم دروساً تعلمتها في فن التدوين, والله الموفق. {facebook#} {twitter#} {google#}

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.