htmlmmlml

السبت، 11 يناير 2014

خدعة لإنشاء أكثر من 20 صفحة ثابتة في بلوجر

By  at 5:07 م    52 comments

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

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

المدون

عصام محيمي

تاريخ النشر

11 يناير 2014

التصنيف

نصائح وخدع بلوجر
إذا حاولت إنشاء الصفحة الـ 21 في مدونتك ستظهر لك رسالة تخبرك بأنه قد قمت بإنشاء الحد الأقصى من الصفحات الثابتة أي (20) صفحة كما هو مبين في الصورة :
Static Pages in Blogger
لتكسير هذا الحاجز وإنشاء صفحات إضافية ركز معي جيدا في الخطوات التالية، وأنصحك بتطبيقها أولا في مدونة تجريبية حتى تفهم الخدعة جيدا.
الخطوة 1
- قم أولا بإنشاء 20 صفحة في مدونتك ثم إنتقل بعدها إلى الخطوة الموالية.
الخطوة 2
- إضغط على الرابط Edit لأي صفحة وكأنك تريد تعديلها.
Static Pages in Blogger
الخطوة 3
- أنسخ رابط التعديل الخاص بتلك الصفحة من شريط العناوين Address bar كما هو مبين في الصورة :

الخطوة 4
- إحتفظ بهذا الرابط في المفكرة Bloc-notes أو أي محرر نصوص. إذا فقدت الرابط لا يمكنك إسترجاع الصفحة.
الخطوة 5
- عليك الآن بحذف تلك الصفحة بالضغط على الرابط Delete. لا تخف، يمكنك استرجعها ثانية.
الآن أصبح لديك 19 صفحة في مدونتك، يعني أنه بإمكنك إنشاء صفحة واحدة إضافية (الصفحة رقم 21) لأنك قمت بحذف (الصفحة رقم 1). تذكر أنني قلت لك في الأول "ركز معي جيدا".
الخطوة 6
- قم بإنشاء صفحة جديدة (الصفحة رقم 21).
الخطوة 7
- لديك الآن 20 صفحة ثابثة في مدونتك (من 2 إلى 21)، وقد حان الوقت لإسترجاع الصفحة التي قمت بحذفها في الخطوة الخامسة (الصفحة رقم 1).
لعمل ذلك إفتح علامة تبويب جديدة New tab في متصفحك وإلصق الرابط الذي قمت بالإحتفاظ به في الخطوة الرابعة ثم إضغط Enter من لوحة المفاتيح.
الخطوة 8
- سترى أن الصفحة مازالت موجودة. إضغط على الزر Publish لنشرها.
الخطوة 9
- مبروك، لقد قمت باسترجاع الصفحة المحذوفة وأصبح لديك 21 صفحة ثابتة في مدونتك.
لإنشاء صفحات إضافية أخرى لمدونتك، قم بتكرار نفس الخطوات السابقة.

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

الخميس، 9 يناير 2014

أفضل طريقة لإضافة وصف المدونة

By  at 10:51 ص    55 comments

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

المدون

عصام محيمي

تاريخ النشر

9 يناير 2014

التصنيف

دروس بلوجر

تعريف الوسم Meta

يستخدم الوسم <Meta> لإخبار محركات البحث عن مضمون الموقع (كالوصف والكلمات المفتاحية)، ويتم كتابته داخل الوسم <head> حيث لا يتم عرض محتوياته للزائر لأنه خاص بمحركات البحث.

1أهمية الوصف Meta description
يعتبر الوصف Meta description مهم جدا لأن محركات البحث تقوم بعرضه في نتائج البحث وبالتالي فهو العامل الأساس الذي يحدد ما إذا كان الباحث سيزور مدونتك أم لا.
2خطوات إضافة وصف المدونة
- من لوحة التحكم إضغط على Settings ثم إختر Search preferences
- ستلاحظ أن خاصية الوصف Description غير مفعلة Disabled، إضغط الآن على الرابط Edit
- قم بتفعيل خاصية البحث وذلك باختيار الأمر Yes
- في المربع الأبيض الفارغ، أكتب الوصف الخاص بمدونتك ثم إظغط على الزر Save changes لحفظ التغييرات كما هو مبين في الصورة أسفله :
يمكنك تعديل وصف مدونتك في أي وقت تشاء وذلك باتباع نفس الخطوات السابقة.

3نصائح
- من الأفضل أن يكون الوصف Meta description يتركب من جملة واحدة أو جملتان تعكسان محتوى المدونة
- وصف المدونة يجب أن لا يتعدى ثلات كلمات مفتاحية
- خذ وقتك الكافي في إختيار وصف المدونة وحاول أن يكون دقيقا ومعبرا

الخميس، 12 ديسمبر 2013

تقنيات CSS - الجزء الأول

By  at 5:09 م    8 comments

لغة CSS أصبحت أكثر أهمية في مجال تصميم المواقع خاصة مع ظهور الإصدار الثالث (CSS3) في سنة 2003 مما أدى إلى التقليل من إستعمال الفلاش والصور.

اليوم سأشارك معكم بعض التقنيات الهامة في لغة CSS والتي إكتسبتها من خلال تجربتي الشخصية.

المدون

عصام محيمي

تاريخ النشر

12 ديسمبر 2013

التصنيف

البرمجة والتصميم
1صور دائرية باستخدام border-radius :
خاصية border-radius تمكنك من إضافة حواف دائرية على عناصر الصفحة كالصور مثلا، ويمكن استغلال هذه الخاصية لإنشاء صور دائرية وذلك بإعطائها القيمة %50.
- تطبيق :
في هذا التطبيق سأقوم بإستدعاء مجموعة من الصور (الطول = العرض)، كل صورة سأعطيها قيمة مختلفة في خاصية border-radius حتى تتضح لك الفكرة :
- النتيجة :
botder-radius-css3
2أيقونات بجانب العناوين
باستخدام بعض الخصائص في لغة CSS يمكنك إنشاء عناوين بجانبها أيقونات بكل سهولة وإحترافية، فقط ركز معي في التطبيق.
- تطبيق :
مثلا أريد إضافة أيقونة بلوجر بجانب العنوان التالي :
 
محترف بلوجر
الحل الأمثل والأذكى هو إزاحة العنوان قليلا نحو اليسار ثم إعطائه الأيقونة كخلفية على اليمين بدون تكرار كما يلي :
 h3
 {
     padding-right: 40px;
     background-image: url(blogger.png);
     background-position: right center;
     background-repeat: no-repeat;  
 }
- النتيجة :
CSS icon title
3الأزرار
يمكنك إنشاء رابط على شكل زر باستخدام لغة CSS دون الحاجة إلى الصور، والتطبيق التالي سيوضح ذلك.
- تطبيق :
نعتبر الرابط التالي على سبيل المثال :
الخاصيات المسؤولة عن تصميم الزر هي padding و background، وللمزيد من الجمالية سأستعمل خاصية border-radius لإضافة الحواف الدائرية كما يلي :
 a
 {
     padding: 10px;
     background: #3A4755;
     border-radius: 5px;
     text-decoration: none;
 }
- النتيجة :
link

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

الأحد، 17 نوفمبر 2013

كيف تضيف نموذج الإتصال إلى صفحة راسلنا

By  at 3:31 م    13 comments

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

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

المدون

عصام محيمي

تاريخ النشر

17 نوفمبر 2013

التصنيف

إضافات بلوجر
الخطوة 1 : إضافة نموذج الإتصال إلى قالب المدونة
- من لوحة التحكم إضغط على Layout ثم Add a Gadget
- ستظهر لك نافذة تحتوي على إضافات بلوجر الرسمية، اضغط على More Gadjets ثم قم بإضافة Contact Form
- إختر إسما لهذه الإضافة ثم إضغط Save
الخطوة 2 : إخفاء نموذج الإتصال من قالب المدونة

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

- من لوحة التحكم إضغط على Template ثم اختر Edit HTML
- ابحث عن ]]></b:skin> وضف قبلها مباشرة الكود التالي : 


 #ContactForm1
     {
         display: none ! important;
     }
الخطوة 3 : إنشاء صفحة جديدة (راسلنا)

- من لوحة التحكم إضغط على Pages ثم New page وبعدها اختر Blank page
- إختر إسما لهذه الصفحة وليكن Contact us

الخطوة 4 : إضافة نموذج الإتصال إلى محتوى الصفحة
- اختر محرر كود HTML
- إضغط على Options وتأكد من اختيار Press "Enter" for line breaks في Line breaks
- انسخ الكود التالي ثم ضعه في محتوى الصفحة


  <form name="contact-form">
      <p> </p>
      Name
      <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
      
      Email *
      <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
      <p> </p>
      Message *
      <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
      <p> </p>
      <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
      <p> </p>
      <div style="text-align: center; max-width: 222px; width: 100%">
            <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </p>
            <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
      </div>
  </form>
- تم إنشاء صفحة ثابتة تحتوي على نموذج الإتصال الخاص بمدونات بلوجر، فقط إضغط Publish لنشرها على المدونة.

ما الذي يمكن إرساله في هذا النموذج ؟

حتى الآن لا يسمح بدمج الملفات أو إرسال أي شيء آخر غير نص كتابي.

كيف أتحكم في كود CSS الخاص بهذا الفورم ؟

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

الأحد، 27 أكتوبر 2013

10 أسباب تدفعك لاختيار منصة بلوجر

By  at 5:40 م    6 comments

الكاتب

عصام محيمي

تاريخ النشر

27 أكتوبر 2013

التصنيف

نصائح وخدع بلوجر

المستوى

مبتدئ
1بلوجر تمتلكه جوجل وهو مجاني %100

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

2الحماية

سيرفرات بلوجر محمية بالكامل، فما عليك سوى الحفاظ على بيانات حسابك من السرقة.

3سهولة الإستعمال

يمكنك نشر تدويناتك في بلوجر بضغطة زر واحدة وأيضا تغيير شكل المدونة دون خبرة مسبقة في لغتي HTML و CSS بالنسبة للمبتدئين.

Blogger-Template-Designer
4استخدام اسم دومين خاص

يمكنك شراء اسم نطاق (ex : .com, .info) لمدونتك من شركة GoDaddy عن طريق بلوجر بسعر 10 دولار للسنة.

5السيو

محرك البحث جوجل يقوم بفهرسة محتوى مدونتك بسرعة، لذلك فمدونات بلوجر لديها فرصة أكبر للظهور في الصفحات الأولى من نتائج البحث.
كما يمكنك التحكم في العديد من خصائص المدونة المتعلقة بالسيو (عنوان المدونة، وصف المدونة، robot.txt، صفحة الخطأ 404 ...) بسهولة تامة من خلال لوحة التحكم.

6التكامل مع باقي خدمات جوجل

بما أن بلوجر تابعة لشركة جوجل فيمكنك ربط مدونتك مع باقي خدمات جوجل (Google+, Youtube, Drive, Google news, Picasa, Webmaster tools, Adsense ...) دون مشاكل.

10 أسباب تدفعك لاختيار منصة بلوجر
7التدوين الجماعي

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

8النسخ الإحتياطي للمدونة

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

9إضافات مجانية

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

10قوالب مجانية غير محدودة
توجد عدة مواقع عربية وأجنبية لتحميل قوالب بلوجر إحترافية مجانا، ومن أشهر تلك المواقع :
  • arbtemplates.com
  • designcart.org
  • btemplates.com

هل منصة بلوجر موجهة فقط للمبتدين ؟

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

ماذا عن منصة الووردبريس ؟

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