السلام عليكم ورحمة الله وبركاته، من أهم المهارات التي يجب أن تتعلمها وسوف تفيدك هي تعلم إنشاء موقع إلكتروني بنفسك. وفي هذا الموضوع سوف نعرض لكم خطوات إنشاء موقع إلكتروني باستخدام أشهر منصات إنشاء مواقع الإنترنت والمدونات بشكل مجاني وهي منصة بلوجر الشهيرة.
الخطوات الأولية لإنشاء الموقع
1 – قم بالدخول إلى موقع بلوجر من خلال https://www.blogger.com
2 – اضغط على (إنشاء مدونة جديدة)
3 – قم بكتابة اسم الموقع الذي تريد إنشائه ثم اضغط على (التالي)
4 – اختار عنوان الموقع الذي ينتهي بـ (.blogspot.com) وتأكد أن العنوان الذي اختارته لم يكن موجود في المنصة مسبقًا (ستخبرك المنصة بذلك) ثم اضغط على (حفظ)ش
تهانينا، هكذا تكون قد قمت بإنشاء أول موقع لك على منصة بلوجر، وانت الآن جاهز لبدء نشر أولى منشوراتك على الموقع. بعد أن قمت بإنشاء الموقع الإلكتروني الخاص بك، بكل تأكيد إنك تريد مشاهدة هذا الموقع صحيح؟ يمكنك مشاهدة موقعك الإلكتروني من خلال الضغط على (مشاهدة المدونة) في جانب المتصفح. بعد ذلك سيظهر لك الموقع الذي قمت بإنشائه.
بعد أن شاهدت الموقع الذي تم إنشائه ستجد أن الموقع الخاص بك فارغ ولا يحتوي على أي محتوى، وحتى مظهر الموقع ليس جمالي؛ لذلك ستحتاج إلى تخصيص مظهر الموقع وتحسينه.
تخصيص مظهر الموقع
لتقوم بتغيير قالب الموقع أو تحسين مظهره اذهب إلى (المظهر) في جانب المنصة، ستظهر لك صفحة بها عدة قوالب مختلفة الشكل ومتعددة الاستخدام. اختر الشكل الذي يناسبك اضغط (تطبيق).
بعد ذلك يمكنك التعديل على القالب وتخصيص اللون الخاص بالموقع والخلفية ...إلخ وذلك من خلال الضغط على زر (تخصيص) في صفحة المظهر.
بعد الضغط على زر (تخصيص) سوف تظهر لك صفحة بها عدة خيارات لتخصيص الموقع.
فمثلًا لتغيير خلفية الموقع اضغط على (صورة الخلفية) وستظهر لك عدة صور يمكنك جعلها صورة الخلفية، ويمكنك تحميل صورة من جهازك وجعلها صورة الخلفية لموقعك الإلكتروني.
يوجد خيارات أخرى لتخصيص الموقع وذلك في قائمة (متقدم). ستجد في قسم (Body) خاصية (Body background color) تغيير لون خلفية الموقع، وخاصية (Font) لتغيير نوع الخط أو وزنه أو حجمه، وخاصية (Color) لتغيير لون النص، وخاصية (Button font) لتغيير نوع خط الأزرار أو وزنها أو حجمها، وخاصية (Button color) لتغيير لون النص في الأزرار.
بعد أن تقوم بعمل التعديلات وتخصيص القالب قم بالضغط على أيقونة الحفظ في أسفل الصفحة.
تخصيص عناصر الموقع
بعد أن قمت بتخصيص مظهر الموقع وتحسينه، ستحتاج إلى تخصيص عناصر الموقع نفسها مثل (Header, Body, Sidebar, Footer, …etc).
للقيام بتخصيص عناصر الموقع، قم باختيار (التخطيط) من جانب المنصة. ستظهر لك صفحة بها عدة عناصر. يمكنك تخصيص هذه العناصر من خلال رمز القلم بجانب كل عنصر.
على سبيل المثال، إذا اردت أن تقوم بتغيير عنوان الموقع الذي يظهر في الموقع تقوم بالضغط على رمز القلم بجانب (Header)، سيظهر لك مربع لتعديل اسم الموقع قم بكتابة الاسم الذي تريده في هذا المربع، ستلاحظ أن هناك مربع أخر أسفل المربع الأول، هذا المربع خاص بوصف الموقع أي أنك تقوم بكتابة وصف الموقع الخاص بك وشرحه في هذا المربع.
يمكنك أن تضع صورة كشعار للموقع أيضًا من خلال خاصية (Image) في عنصر (Header). بعد ذلك قم بالضغط على (Save) لحفظ التغييرات التي قمت بتعديلها.
نشر أول مقال على الموقع
بعد أن قمت بتخصيص مظهر الموقع وتعديل العناصر الموجودة به، ننتقل إلى الجزء المهم في الموقع بعد تخصيصه، وهو نشر أول مقال على الموقع.
لنشر مقال على الموقع في منصة بلوجر، قم بالذهاب إلى قسم (المنشورات) في المنصة، ثم اضغط على رمز (+). سيظهر لك الموقع صفحة كاملة لإنشاء مقال جديد في الموقع وخصائص عديدة لتساعدك في إنشاء منشور جديد في الموقع. قبل أن نبدأ في الشرح يجب أن تتأكد أنك في وضع (Compose View) وتكتشف ذلك من خلال أول رمز في شريط الأدوات في الصفحة.
لتقوم بكتابة عنوان المقال الذي سوف تنشره قم بالضغط على مربع الكتابة (Title) في أول الصفحة واكتب عنوان المقال.
الشريط الموجود في الأعلى هو شريط الأدوات، وهي الأدوات التي تساعدك في كتابة المقال مثل (تحديد لون النص، تحديد نوع الخط أو حجمه، إدراج صورة في المقال، ...إلخ).
المساحة البيضاء الموجودة في الصفحة هي المساحة التي تقوم بكتابة المقال فيها.
قم بكتابة المقال الخاص بك في المساحة البيضاء وقم بتخصيص النص من شريط الأدوات بالأعلى.
شرح شريط الأدوات
•يشير رمز (A) إلى (Font type)، وهي الخاصية الخاصة بتحديد نوع الخط في المقال
•يشير رمز (TT) إلى (Font size)، وهي الخاصية الخاصة بتحديد حجم النص الموجود في المقال
•الخاصية التي تأتي بعد خاصية (Font size)، هي الخاصة بتحديد كيفية الخط في المقال ودوره حيث أن هذه الخاصية تحتوي على عدة اختيارات لاختيار نوع النص
•يشير رمز (B) إلى (Bold)، وهذه الخاصية تقوم بجعل الخط ثقيل، وهذا مثال على هذه الخاصية (BOLD)، (BOLD) الكلمة الأولى هي المستخدم فيها خاصية (BOLD) أما الثانية فهي لم يُستخدم فيها خاصية (BOLD)
•يشير رمز (I) إلى (Italics)، وهذه الخاصية تقوم بجعل الخط بزاوية، مثال على الخاصية (ITALICS)، (ITALICS) الكلمة الأولى هي الكلمة المستخدم فيها خاصية (Italics)
•يشير رمز (U) إلى (Underline)، تقوم هذه الخاصية بعمل خط أسفل النص، مثال على الخاصية (UNDERLINE)، (UNDERLINE) الكلمة الأولى هي المُستخدم فيها خاصية (Underline).
•يشير رمز (T) إلى (Strikethrough)، هذه الخاصية تقوم بإدراج خط أو شيء في منتصف النص، مثال (STRIKETHROUGH)، (STRIKETHROUGH) الكلمة الأولى هي المُستخدم فيها خاصية (Strikethrough)
•يشير رمز (A) إلى (Text color)، وهذه الخاصية تقوم بتغيير لون النص في المقال.
•يشير رمز قلم التلوين إلى (Text background color)، تقوم هذه الخاصية بتغيير لون خلفية النص أو تضليله بلون مختلف، مثال (TEXT)، (TEXT) الكلمة الأول هي المُستخدم بها خاصية (Text background color)
•يشير رمز الرابط إلى (Insert or Edit Link)، تقوم هذه الخاصية بإدراج رابط داخل كلمة
•يشير رمز الصورة إلى (Insert image)، لا تحتاج هذه الخاصية إلى شرح لأنها موضحة من رمزها ومهمتها هي إدراج صورة في الموضوع
•يشير رمز الفيديو إلى (Insert video)، هذه الخاصية أيضًا لا تحتاج إلى شرح لأنها موضحة من رمزها ودورها إدراج مقطع فيديو في المقال
•يشير رمز الوجه إلى (Insert special characters)، وهذه الخاصية توفر مجموعة هائلة من الرموز والأرقام الخاصة التي يمكنك إدراجها في المقال
•تقوم خاصية المحاذاة بمحاذاة النصوص أو الصور أو الفيديوهات بالمنتصف أو اليمين أو اليسار
•يشير رمز المسافة البادئة إلى اليمين إلى (Increase indent)، تقوم هذه الخاصية بزيادة المسافة البادئة
•يشير رمز المسافة البادئة إلى اليسار إلى (Decrease indent)، عكس الخاصية السابقة، تقوم هذه الخاصية بنقص المسافة البادئة
•يشير رمز القائمة النقطية إلى (Bulleted list)، تقوم هذه الخاصية بإدراج نقطة قبل النص لعمل قائمة
•يشير رمز القائمة الرقمية إلى (Numbered list)، تقوم هذه الخاصية بإدراج رقم ترتيبي قبل النص لعمل قائمة مرقمة
•يشير رمز الاقتباس إلى (Quote text)، تُستخدم هذه الخاصية لعمل نص مقتبس
•يشير رمز الخط إلى (Insert jump break)، تقوم هذه الخاصية بإدراج خط أفقي فاصل
•يشير رمز (qT) إلى (Left to Right layout)، دور هذه الخاصية بسيط جدًا، وهو تحديد اتجاه النص من اليسار إلى اليمين، أي أن النص يبدأ من اليسار
•يشير رمز (qT) إلى (Right to Left layout)، عكس الخاصية السابقة، تقوم هذه الخاصية بتحديد اتجاه النص من اليمين إلى اليسار، أي أن النص يبدأ من اليمين
•يشير رمز الكرة الأرضية إلى (Input tools)، وظيفة هذه الخاصية هي تحديد لغة الإدخال التي تكتب بها
•يشير الرمز الأخير في شريط الأدوات إلى (Clear formatting)، تقوم هذه الخاصية بمسح أي تعديلات قمت بتطبيقها على النص مثل لون النص أو نوع الخط
بعد أن قمت بكتابة المقال الخاص بك وقمت بتخصيصه وتنسيقه، حان دور تحسين الـ SEO للمقال. لاحظ جملة (Post settings) في جانب الصفحة، ستحد أن هناك عدة أقسام في هذا الجانب، هذه الأقسام خاصة بإعدادات المقال.
إعدادات الـ SEO
Labels: في هذا القسم، تقوم بتعيين إلى أي قسم ينتمي هذا الموضوع مثل: أخبار، فن، تكنولوجيا، ...إلخ.
Published on: يقوم هذا القسم بتعيين تاريخ نشر المقال بشكل افتراضي، ويمكنك تعديل التاريخ يدويًا.
Permalink: في هذا القسم، يمكنك تعيين رابط المقال الذي ستنشره.
Location: يمكنك تحديد الموقع الذي تم نشر المقال منه في هذا القسم.
Options: في هذا القسم، يمكنك السماح بالتعليقات من قبل الزوار أو منعها.
بعد أن قمت بكتابة المقال وضبط إعدادات الـ SEO، الآن أنت جاهز لنشر المقال ولكن يمكنك أن تشاهد المقال أو تعاينه قبل نشره لترى كيف سيكون شكل المقال في الموقع. وذلك من خلال زر (Preview) في أعلى جانب الصفحة.
قمت بمشاهدة المقال؟ أعجبك؟ إذًا أنت تريد نشر المقال الخاص بك، قم بنشر المقال الخاص بك من خلال الضغط على زر (Publish) باللون البرتقالي في أعلى جانب الصفحة وسيتم نشر المقال على موقعك وسيشاهده أي شخص يزور الموقع الخاص بك.
الكلمات الأخيرة...
الآن أنت جاهز لبدء مشوارك في بناء موقع إلكتروني ناجح، وتعلمت الأساسيات التي تجعلك تنشر مقال بشكل احترافي على موقعك الإلكتروني. إذا اردت الاحتراف أكثر في منصة بلوجر، ابحث عن كورسات بلوجر على أي منصة كورسات أو اليوتيوب واختر كورس مناسب لك واحرص أن يكون الكورس كاملًا، وتابع الكورس جيدًا وستستفاد كثيرًا بإذن الله. في النهاية أتمنى أن تكون قد استفدت من هذا الموضوع، والسلام عليكم ورحمة الله وبركاته.
أفضل إضافات لموقعك على بلوجر لعام 2022
السلام عليكم ورحمة الله وبركاته، إذا كنت تملك موقع إلكتروني على منصة بلوجر فـأنت بالتأكيد تسعى لتحسين هذا الموقع وإضافة ميزات جديدة له؛ لذا سنعرض لكم في هذا الموضوع أفضل إضافات لموقعك على بلوجر لعام 2022.
ما هي إضافات بلوجر؟
إضافات بلوجر هي أكواد منسقة تعمل على إضافة ميزة جديدة للموقع. فالإضافة هي كود مكتوب بلغات برمجة معينة. تُضع هذه الأكواد في أماكن محددة في القالب الذي تستخدمه على منصة بلوجر.
1–إضافة صندوق دردشة واتساب
الإضافة الأولى في القائمة هي إضافة صندوق دردشة واتساب لمواقع بلوجر، وهذه الإضافة من أهم الإضافات لـبلوجر وتجعل الموقع أكثر جاذبية للزوار واحترافي أكثر. ومن ضمن مميزات هذه الإضافة إنها متعددة المدراء أي يمكنك إضافة أدمين أو أكثر لخدمة الدعم. وذلك بالإضافة إلى إمكانية إضافة رقم الدعم واتساب والعديد من الميزات الأخرى.
قم بمعاينة الإضافة من هنا
https://codepen.io/proarabic/pen/QWjadxy
شرح تركيب إضافة صندوق دردشة واتساب:
·1 – توجه إلى منصة بلوجر < المظهر < من ثم تعديل HTML
·2 – انسخ كود الـ CSS من هنا
https://codepen.io/proarabic/pen/QWjadxy
·3 – قم بالبحث عن وسم "]]></b:skin>" عن طريق "ctrl+f"
·4 – قم بلصق كود الـ CSS فوق الوسم السابق
·5 – بعد الانتهاء من كود الـ CSS قم بنسخ كود الـ JavaScript من نفس الصفحة
·6 – قم بالبحث عن وسم "</body>" بنفس الطريقة السابقة
·7 – قم بلصق كود الـ JavaScript أسفل الوسم السابق
·8 – قم بحفظ المظهر ثم توجه إلى التخطيط < ومن ثم إضافة أداة < ثم اختار HTML/JavaScript
·9 – بعد ذلك قم بإضافة هذا الكود
https://anotepad.com/note/read/j63bncbg
·10 – استمتع بالإضافة
2 – إضافة صندوق الاشتراك في القائمة البريدية
تعتبر القائمة البريدية من أهم العوامل التي تساعد في اكتساب متابعين لموقعك، ويمكنك صندوق الاشتراك من جمع المتابعين المستهدفين لموقعك الإلكتروني. حيث سيتم إرسال كل الجديد من مواضيع التي تنشرها على موقعك إلى المشتركين في القائمة البريدية بعد نشر المواضيع مباشرًا من خلال البريد الإلكتروني. تقوم بجمع المتابعين من خلال خاصية feedburner من شركة جوجل، لذا كل شخص يسجل البريد الإلكتروني الخاص به ستصله تلقائيًا جميع مقالاتك على بريده الإلكتروني.
قم بمعاينة الإضافة من هنا
https://codepen.io/ahmed-laazar/pen/poRmxMq
شرح تركيب إضافة صندوق الاشتراك في القائمة البريدية:
·1 – توجه إلى منصة بلوجر < المظهر < من ثم تعديل HTML
·2 – قم بنسخ كود الـ CSS من هنا
https://codepen.io/ahmed-laazar/pen/poRmxMq
·قم بوضع كود الـ CSS بين هذا الوسم "<style type='text/css'>" وهذا الوسم "</style>"
·3 – قم بلصق كود الـ CSS أسفل وسم "</head>"
·4 – قم بحفظ المظهر ثم توجه إلى التنسيق < من ثم إضافة أداة < ثم اختار HTML/JavaScript
·5 – ثم قم بنسخ كود الـ HTML من هنا
https://codepen.io/ahmed-laazar/pen/poRmxMq
·6 – قم بلصق كود الـ HTML
·7 – استمتع بالإضافة
3 – قالب تنظيف بلوجر
يعد قالب التنظيف من أهم الأشياء التي يجب استخدامها قبل تركيب أي قالب جديد لبلوجر. حيث يعمل هذا القالب على إزالة جميع إضافات وآثار القالب القديم مما يتيح لك تركيب قالبك الجديد بدون أي مشاكل.
قالب التنظيف من هنا
https://anotepad.com/note/read/c5iesk69
شرح تركيب قالب التنظيف:
·1 – توجه إلى منصة بلوجر < المظهر < تعديل HTML
·2 – قم بتحديد جميع الأكواد الموجودة في الصفحة ثم قم بمسحها
·3 – قم بنسخ قالب التنظيف من هنا
·4 – قم بلصق قالب التنظيف بدلًا من الأكواد القديمة
·5 – قم بحفظ المظهر
·6 – بعد حفظ المظهر قم بتحديد جميع الأكواد الموجودة في الصفحة ثم قم بوضع قالبك الجديد بدلًا من الأكواد الموجودة في الصفحة
·7 – استمتع بالقالب
4– إضافة صفحة اتصل بنا
تعتبر صفحة اتصل بنا من أهم الصفحات في موقعك على بلوجر ومن أكثر الصفحات الضرورية التي تساعد زوار موقعك على التواصل معك بسهولة وأيضًا هي صفحة مهمة لقبول موقعك في جوجل أدسنس.
شرح إضافة صفحة اتصل بنا:
·1 – توجه إلى منصة بلوجر < الصفحات < ثم اختار صفحة جديدة
·2 – ابحث عن رمز القلم في شريط الأدوات ثم قم بالضغط عليه ثم اختار HTML View
·3 – قم بنسخ كود الإضافة من هنا
https://anotepad.com/note/read/mygsfs2a
·4 – قم بلصق الكود في الصفحة
·5 – قم بالبحث عن "ضع id بلوجر هنا"
·6 – في نافذة جديدة، اذهب إلى منصة بلوجر
·7 – بعد تحميل الصفحة، ستجد في الرابط رقم طويل، قم بنسخ هذا الرقم لأن هذا الرقم هو الـ id الخاص بموقعك على بلوجر
·8 – ارجع إلى النافذة السابقة ثم قم بلصق الـ id الذي قمت بنسخه بدلًا من جملة "ضع id بلوجر هنا"
·9 – اكتب اسم للصفحة التي قمت بإنشائها ثم قم بنشر الصفحة
·10 – استمتع بالإضافة
في النهاية، نتمنى أن تكونوا قد استفدتم أقصى استفادة من الموضوع وفهمتم مفهوم الإضافات في بلوجر. هنالك العديد والعديد من الإضافات الأخرى لبلوجر ولكننا لم نتطرق لها في هذا الموضوع، والسلام عليكم ورحمة الله وبركاته.