السلام عليكم عزيزاتي أعزائي قراء مدونة ستارتايم للربح عبر الأنترنت في الدرس السادس من دورة بلوجر، و الذي سنتعلم عبره كيفية رفع قالب احترافي بدون حقوق و تركيبه في الموقع الإلكتروني، بالإضافة إلى كيفية التعديل على مظهر الموقع سواء مظهر جميع فروع الصفحة الرئيسية أو مظهر صفحة المواضيع.
تقنيات تساعدكم في التعديل على موقعكم
تقنية النسخ الإحتياطي
قبل فعل أي إجراء في موقعكم كالتعديل في أكواد ملف HTML أو تركيب قالب جديد، يجب دائما أخد نسخة احتياطية لقالب موقعكم، و ذلك بالنقر على 'نسخ احتياطي / استعادة' في قسم 'المظهر'، ثم في الإنبثاق يجب النقر على 'تنزيل المظهر' ليُحمَّل ملف القالب على جهازكم، حيث إذا لم ينجح معكم الأمر في التعديل أو التركيب، ستجدون النسخة الإحتياطية لملف القالب موجودة، و لتحميلها يجب الذهاب إلى قسم 'المظهر' ثم النقر على 'نسخ احتياطي / استعادة' ثم النقر على زر 'Choisissez un fichier' بالفرنسية أو 'Choose File' بالإنجليزية -حسب لغة المتصفح- ثم اختيار ملف القالب بالنقر عليه مرتين بزر الفأرة الأيسر، ثم النقر على 'تحميل' ليُرفع من جهازكم.
تقنية Inspect Element
جميع المتصفحات الكبرى تتوفر على الخاصية Inspect Element، تعتبر هذه الأخيرة كمختبر تجارب تصميمات الويب في المواقع الإلكترونية على جميع الشاشات، بحيث إذا أردتم التعديل على مظهر أي عنصر في الموقع، ما عليكم سوى النقر عليه بزر الفأرة الأيمن، ثم النقر على 'Inspecter' بالفرنسية أو 'Inspect Element' بالإنجليزية -حسب لغة المتصفح- ليظهر مُعدِّل الخاصية حيث ينقسم إلى قسمان، القسم الأيمن يُظهِر أكواد CSS للعنصر من أجل التعديل على مظهره في الموقع الإلكتروني، أما القسم الأيسر فيظهر أكواد HTML و JavaScript للعنصر من أجل التعديل على بنيته التوضيفية، لكن التعديل لا يُطبّق سوى في المتصفح، بحيث إذا أعدنا تدوير الصفحة بعد التعديل عليها بالخاصية، سيرجع العنصر إلى طبيعته، لذلك يجب أخذ أكواد العنصر المعدَّلة إلى ملف HTML للموقع و استبدالها بأكواد العنصر القديمة، لأن خاصية Inspect Element ليس إلا مختبر نختبر فيه إمكانيات التعديل على عناصر الويب للمواقع الإلكترونية.
تركيب قالب احترافي بدون حقوق في الموقع
تقديم القالب
لقد اخترت لكم قالب جد احترافي يحتوي على كل المواصفات لدراسة مجال تصميم المواقع Web Design بحيث أنه مصمم باللغة الحديثة HTML5، و هو قالب من تصميم منتدى Sora Template الغربي، و من تعريب و تعديل مدونة ستارتايم للربح عبر الأنترنت، و يعتبر من أحسن القوالب التي صادفتها شخصياً بحيث يتوفر على مواصفات مميزة كثيراً جاعلة منه أكثر القوالب الحديثة احترافاً أذكر منها :
- قالب بدون حقوق.
- قالب متوافق مع جميع الشاشات.
- قالب مجلة يصلح للمواقع التقنية و الإخبارية و الرياضية و الطبخ..
- لا يتوفر على أكواد مشفرة.
- قالب سريع.
- يتوفر على قائمة منسدلة و تبقى بارزة دائماً حين تصفح الصفحة بأكملها.
- يتوفر على إضافة فيديو اليوم.
- يتوفر على ثلاث أقسام في القائمة الجانبية.
- شريط آخر الأخبار.
- يتوفر على سلايدر شو.
- يتوفر على فوتر بثلاث أعمدة.
- يتوفر على خاصية المواضيع المشابهة.
- يتوفر على خاصية الموضوع التالي و الموضوع السابق.
- يتوفر على أزرار مشاركة المواضيع.
- يتوفر على مربع بحث احترافي.
- يتوفر على تاريخ في الهيدر مثل المنتديات.
- يتوفر على خاصية 'نبذة عن المدون أو الموقع'.
كيفية تركيب القالب
قبل الإستغناء على القالب القديم، يجب حفظ كل الأكواد التي لا يجب الإستغناء عنها مثل أكواد إثبات ملكية الموقع في أدوات مشرفي المواقع، و كود شفرة التتبع لـ Google Analytics، إلى حين تركيب القالب الجديد، و بالتالي وضعها داخله من أجل إعادة الإستفادة من خدماتها، و هناك طريقتان لرفع و تركيب قوالب بلوجر :
* الطريقة الروتينية : عبر الذهاب إلى قسم 'المظهر' ثم النقر على 'نسخ احتياطي / استعادة' ثم في الإنبثاق يجب النقر على زر 'Choisissez un fichier' بالفرنسية أو 'Choose File' بالإنجليزية -حسب لغة المتصفح- ثم اختيار ملف القالب بالنقر عليه مرتين بزر الفأرة الأيسر، ثم النقر على 'تحميل' ليُرفع من جهازكم.
* الطريقة الموصى بها : هي الطريقة التي سنستعملها لرفع و تركيب هذا القالب حيث تحتاج إلى برنامج ++Notpad، يجب النقر على 'تعديل HTML' في قسم 'المظهر' ثم حذف جميع أكواد التي في معدل الأكواد، ثم الذهاب إلى قالب التنظيف و فتحه ببرنامج ++Notpad، ثم نسخ محتواه، ثم لصق المحتوى المنسوخ داخل معدل الأكواد ثم النقر على 'حفظ المظهر' لتنظيف الموقع من أكواد القالب القديم، ثم بعدها يجب استبدال أكواد قالب التنظيف بأكواد ملف 'قالب احترافي من ستارتايم' في معدل الأكواد مستعملين نفس الطريقة ببرنامج ++Notpad، ثم النقر على 'حفظ المظهر'.
الفيديو التوضيحي للدرس
شرح التعديل على مظهر الموقع بالقالب الجديد
قبل التعديل على الموقع يجب معرفة مناطق صفحات الويب :
- Header : هي منطقة رأس الصفحة، و تكون في أعلى الموقع، و غالبا ما تحتوي على الصفحات.
- Navigation Bar : هي القائمة الرئيسية، و تحتوي على تسميات الموقع، غالباً ما تكون أسفل لوجو الموقع.
- Main Body : هي منطقة المحتوى، بحيث تحتوي في الصفحة الرئيسية على أحدث المواضيع، و تحتوي في صفحة المواضيع على محتوى الموضوع.
- Side Bar : هي القائمة الجانبية، بحيث تحتوي على إضافات الموقع كإضافة القائمة البريدية، و تكون بجانب Main Body.
- Footer : هي المنطقة السفلى في الموقع، و تحتوي على إضافات الموقع و الحقوق.
إدخال معلومات الميطاتاج
توجد أكواد الميطاتاج في أكواد HEAD لجميع المواقع الإلكترونية، حيث تساعد المتصفحات و عناكب البحث للتعرف على المواقع، يمكنكم تفقدها بعد تركيب القالب الجديد ثم إدخال المعلومات اللازمة في كل كود، و لقد وضعت كل ما يراد الإدلاء به في المكان المناسب لكل كود.
إنشاء الصفحات
تعتبر الصفحات من أهم ما يتوفر عليه الموقع كصفحة 'إتصل بنا' و 'سياسة الخصوصية' و 'إتفاقية الإستخدام'، و لإنشائها يجب الذهاب إلى قسم 'الصفحات' ثم النقر على 'صفحة جديدة' ثم كتابة في خانة عنوان الصفحة عنوان بحروف لاثينية، ثم النقر على 'نشر'، و ذلك للحصول على رابط صديق للسيو، بعدها يجب النقر على 'تعديل' ثم استبدال العنوان القديم بالعنوان الجديد، ثم إضافة موضوع الصفحة، ثم النقر على 'تحديث'.
و لكي تظهر في الموقع، يجب الذهاب إلى قسم 'التخطيط' ثم النقر على 'تعديل' في آداة 'التسميات' الموجودة في حيز 'navtop'، ثم تفعيل الصفحة في النافذة المنبثقة، ثم النقر على 'حفظ' لتظهر في Header.
إنشاء التسميات و ربطها بالقائمة الرئيسية
تعتبر التسميات أو ما تعرف بالأقسام من أهم ما يتوفر عليه الموقع، لأنها تعطيه تنظيماً لمواضيعه، حيث تتوفر كل تسمية على مجموعة مواضيع في نفس المجال.
إنشاء التسميات
لإنشاء تسمية يجب إنشاء موضوع أولاً، و ذلك بالنقر على 'مشاركة جديدة' في قسم 'المشاركات' ثم يجب النقر على قسم 'التسميات' في العمود الجانبي لمحرر المواضيع، ثم كتابة إسم القسم مع تجنب الغلط في كتابته، ثم النقر على 'تم'، ثم النقر على 'نشر'، بعد ذلك يجب التوجه إلى قسم 'التخطيط' ثم إنشاء إضافة 'التسميات' في أي مكان في الموقع، ثم ستجدون التسمية داخل الإضافة في مظهر الموقع، يجب النقر عليها للتوجه إلى صفحتها الخاصة من أجل أخد الرابط الخاص بها و إضافته في كود القائمة الرئيسية لكي تظهر التسمية بشكل رسمي في الموقع، بعد ذلك يمكنكم الإستغناء على الموضوع المنشأ و إضافة التسميات المنشأة أيضاً لهذا الغرض.
ربط التسميات بالقائمة الرئيسية
لربط تسمية بالقائمة الرئيسية، يجب نسخ رابط التسمية، ثم عثور على كود HTML للقائمة الرئيسية في ملف HTML لموقعكم، و ذلك بتقنية Inspect Element، ثم لصق رابط التسمية مكان '#' و كتابة إسم التسمية مكان 'قسم' في كود قسم من أقسام القائمة الرئيسية داخل ملف HTML لموقعكم.
التعديل على السلايدر شو
يوجد السلايدر شو في أعلى Main Body للصفحة الرئيسية، و هو مخصص ليظهر مواضيع تسمية معينة من اختياركم، و للتعديل عليه يجب الذهاب إلى قسم 'التخطيط' ثم النقر على 'تعديل' في آداة 'HTML/JavaScript' الموجودة في حيز 'my-slider' لتنبثق نافدة التعديل على السلايدر شو مكوَّنة من خانتين، يجب إضافة إسم التسمية بجانب الكود '[style1]' في خانة 'العنوان'، و إضافة إسم التسمية في خانة 'المحتوى'، ثم النقر على 'حفظ'.
لتعطيل السلايدر شو يجب إفراغ خانتي نافدة التعديل ما عدا الكود، ثم النقر على 'حفظ'، و المرجو عدم النقر على 'حذف' تفادياً لمسح السلايدر شو نهائياً من الموقع.
التعديل على إضافات الأقسام
توجد إضافات الأقسام أسفل السلايدر شو في Main Body للصفحة الرئيسية، و كل واحدة مخصصة لتُظهر مواضيع تسمية معينة من اختياركم بنسق معين، و للتعديل عليها يجب الذهاب إلى قسم 'التخطيط' ثم النقر على 'تعديل' في آداة 'HTML/JavaScript' الموجودة في الأحياز 'slim'، 'cols-2'، 'lastcolumn2'، 'lists' و 'sli1' لتنبثق نافدة التعديل تحتوي على خانتين، يجب إضافة إسم التسمية في خانة 'المحتوى'، و إضافة إسم التسمية في خانة 'العنوان' في حالة إذا كانت خانة 'العنوان' لاتحتوي على كود بين معقوفتين كخانة عنوان السلايدر شو، أما إذا كانت تحتوي عليه، فيجب إضافة إسم التسمية بجانب الكود، بعد ذلك يجب النقر على 'حفظ'.
لتعطيل إضافة القسم يجب إفراغ خانتي نافدة التعديل لديها ما عدا الكود -إذا كانت تحتويه طبعاً- ثم النقر على 'حفظ'، و المرجو عدم النقر على 'حذف' تفادياً لمسح إضافة القسم نهائياً من الموقع.
إضافة صفحات مواقع التواصل الإجتماعي للموقع في الموقع
توجد أزرار صفحات مواقع التواصل الإجتماعي للموقع في أيسر شريط الأخبار للموقع، و لإضافة صفحات مواقع التواصل الإجتماعي للموقع في الموقع، يجب العثور على كود HTML لأزرار صفحات مواقع التواصل الإجتماعي للموقع في ملف HTML لموقعكم، و ذلك بتقنية Inspect Element، ثم لصق روابط صفحات مواقع التواصل الإجتماعي للموقع مكان روابط مواقع التواصل الإجتماعي في الأكواد المخصصة لها داخل ملف HTML لموقعكم.
التعديل على القائمة الجانبية Sidebar
إضافة و حذف إضافات في القائمة الجانبية
هناك طريقتان لإضافة الإضافات في القائمة الجانبية :
- إضافة الإضافات عبر الذهاب إلى قسم 'التخطيط' ثم النقر على 'إضافة آداة' في الحيِّزان 'sidebar-top1' و 'sidebar-bot1'، لتنبثق نافذة اختيار الأدوات حيث تختارون الآداة -مثلاً آداة المتابعة بالبريد الإلكتروني- لتظهر نافذة التعديل حيث يجب تسميتها و التعديل عليها -مثلاً في التعديل على آداة المتابعة بالبريد الإلكتروني يجب إدخال رابط خلاصة الموقع في خانة 'عنوان URL لـ FeedBurner'- ثم النقر على 'حفظ'، و لحذف آداة من القائمة الجانبية يجب دائما النقر على 'تعديل' لتلك الآداة من أجل انبثاق نافذة التعديل لتلك الآداة حيث يجب النقر على 'حذف' ثم النقر على 'حفظ الترتيب'.
- إضافة الإضافات عبر الذهاب إلى قسم 'المظهر' ثم النقر على 'تعديل HTML' ثم إدخال الأكواد المخصصة للإضافات في ملف HTML لموقعكم ثم النقر على 'حفظ المظهر'، و لحذف تلك الإضافات ما عليكم سوى حذف الأكواد الخاصة بها من ملف HTML لموقعكم مُطبِّقين نفس العملية.
التعديل على أقسام القائمة الجانبية
يتوفر هذا القالب على ثلاث أقسام في قائمته الجانبية لا تتوفر عليها القوالب الأخرى إلى جانب Sidebar العادية، و هم 'الشائعة'، 'يوتيوب' و 'الأقسام' حيث يمكنكم التعديل على كل قسم من أقسام القائمة الجانبية لموقعكم.
قسم 'الشائعة'
هو قسم يُظهر المشاركات التي حصدت أكثر نسبة من المشاهدات، و التي تعرف بالمشاركات الشائعة، و لحذفه يمكنكم الذهاب إلى قسم 'التخطيط' ثم النقر على 'تعديل' في آداة 'المشاركات الشائعة' للحيِّز 'tab1-popular-posts'، ستنبثق نافذة التعديل حيث يجب النقر على 'حذف'، ثم يمكنكم إضافة أي آداة مكانها، و ذلك بالنقر في نفس الحيز على 'إضافة آداة' لتنبثق نافذة اختيار الأدوات حيث تختارون الآداة لتظهر نافذة التعديل حيث يجب تسميتها و التعديل عليها ثم النقر على 'حفظ'.
قسم 'يوتيوب'
هو قسم يُظهر فيديو يوتيوب، و لتغيير الفيديو يجب الذهاب إلى قسم 'التخطيط' ثم النقر على 'تعديل' في آداة 'فيديو اليوم' للحيِّز 'tab2-recent-posts'، ستنبثق نافذة التعديل تحتوي على كود في خانة 'المحتوى' حيث يجب إدخال مُعرَّف فيديو اليوتيوب مباشرة بعد '/embed' ثم النقر على 'حفظ'.
قسم 'الأقسام'
هو قسم يُظهر كل التسميات في الموقع، و لحذفه أو استبداله يمكنكم فعل نفس طريقة قسم 'الشائعة'.
التعديل على الفوتر Footer
يمكنكم إضافة و حذف الأدوات في الفوتر بنفس طريقة إضافة و حذف الأدوات في القائمة الجانبية، إلا أن الأحياز المخصصة في الفوتر هم 'footer-seconde'، 'footer-first' و 'footer-third' في قسم 'التخطيط'.
التعديل على 'نبذة عن' في صفحات المواضيع
يمكّن مكان 'نبذة عن' الزوار من أخذ فكرة حول الموقع أو حولكم أنتم كمنشئي محتوى، و يتوفر على صورة و نص، حيث يمكنكم التعديل على الصورة في ملفكم الشخصى على منصة موقعكم في بلوجر، و التعديل على النص بمعرفة مكانه في ملف HTML لموقعكم عبر تقنية Inspect Element، ثم التعديل عليه هناك في معدِّل الأكواد، ثم النقر على 'حفظ المظهر'.
أتمنى أن تستفيدوا من الدرس، في رعاية الله