تحدثنا في الدرس الأول من دورة بلوجر عن طريقة إنشاء مدونة بلوجر إحترافية وقد كانت أهم النقاط في هذا الدرس هي الهدف من مدونات بلوجر وأهميتها وطريقة إنشائها وظبط سيو المدونة.
 |
| إنشاء قائمة تبويبات بلوجر منسدلة إحترافية |
كما تعرفنا على طريقة كتابة المقالات على مدونات بلوجر بشكل صحيح بنسبة 100% بل وكيفية تصدر نتائج البحث من خلالها بسهولة والسبب في تفضيلنا لمدونات بلوجر على الوردبريس.
راجع الدرس الأول: إنشاء مدونة بلوجر إحترافية.
واليوم وبعد أن قمنا بإنشاء مدوناتنا وإتباع جميع الخطوات السابقة حرفياً وقمنا بإضافة 5 مواضيع أو أكثر تطبيقاً لعملنا بهذه الدورة سنقوم بتوضيح طريقة إنشاء أقسام لمدونة بلوجر ووضعها بداخل المدونة على هيئة قائمة منسدلة إحترافية وجميلة المظهر بسهولة.
من المؤكد أن الكثيرين لاحظوا اننا تحدثنا في الدرس الأول في طريقة كتابة المواضيع عن الكلمات المفتاحية Labels ونوضح هنا عنها مرة أخرى أن هذه الكلمات المفتاحية لها أكثر من إستخدام , فعلى سبيل المثال وليس الحصر:
أولاً: تساعد موضوعك على القفز عدة نتائج إلى الأفضل في محركات البحث.
ثانياً: تساعد على تصنيف موضوعك ضمن أقسام في مدونتك.
ثالثاً: تساعد على تصنيف المواضيع المشابهة لموضوعك داخل المدونة نفسها.
وغيرها الكثير من المميزات الهامة ولكننا اليوم سنتكلم عنها كوسيلة مساعدة لتقسيم مدونات بلوجر إلى أقسام وكذلك إنشاء قائمة منسدلة إحترافية بإستخدام بعض الأكواد التي سنقول لكم كيف وأين تضعوها بل وكيف تقوم بإنشائها أصلاً وعلى أي أساس تختار هذه الكلمات.
هل لاحظتم مدونتنا هذه من قبل؟ قم بفتح الصفحة الرئيسية أو أي صفحة من روميسيا للخدمات الإلكترونية أو حتى أثناء قرائتك لهذه التدوينة أنظر للأعلى , ستجد ان هناك مجموعة مفاتيح غريبة مثل: الرئيسية - تصميم المواقع - سيو - أخبار تقنية وغيرها , هذه القائمة تسمى قائمة تبويبات المدونة , ويوجد منها أنواع .. فمنها العادية الأفقية ومنها الرأسية الجانبية ومنها الأفقية المنسدلة وغيرها من الأنواع التي تناسب مختلف الأذواق , ومعنى كلمة منسدلة أنك بمرورك بالفأرة على أحد التبويبات تظهر قائمة منبثقة منها تسمى قائمة منسدلة وقد تكون هناك قائمة منسدلة لقسم واحد أو تبويب واحد فقط أو عدة قوائم كما ستلاحظ معنا في المدونة بالأعلى .. فمثلاً قسم سيو لو وقفت عليه بالفأرة ستجد أنه إنبثق منه قسمين : سيو داخلي - سيو خارجي , ولكن قسم أخبار تقنية فلا توجد له فروع , وعند النقر والدخول على أي قسم من هذه الأقسام تظهر المقالات الخاصة بهذا القسم .. فكيف أضفناها بهذا الشكل ألأوتوماتيكي لتظهر أي مواضيع قديمة أو جديدة قبل أو بعد تركيب الإضافة في صفحات الأقسام؟
الإجابة بسيطة للغاية: الكلمات المفتاحية Labels التي تقوم بإنشائها بداخل المواضيع.
كمثال: أنا أقوم بإنشاء درس اليوم عن إنشاء قائمة تبويبات منسدلة , فمن الطبيعي أن تكون كلماته المفتاحية هي: بلوجر, دروس بلوجر, دورة بلوجر أو ما شابه ذلك .. هذه الكلمات المفتاحية هي لوضع هذا الدرس في الأقسام المذكورة , ويمكنني إضافة كلمات مفتاحية أخرى عليها لتقوية موضوعي في محركات البحث مثل: قائمة بلوجر منسدلة, وقائمة بلوجر إحترافية وهكذا.
بعد ذلك وبعد حفظ مقالي ونشره بالكلمات المفتاحية الجديدة سيظهر هذا الموضوع بأي أقسام قمت بإضافاتها في التبويبات أي أن هذا الموضوع ستجده في تبويب بلوجر الرئيسي وتبويب دروس بلوجر الفرعي ولن تجده في أقسام أخرى من الأعلى لإني لم أنشئ قسماً مثلاً عن قائمة بلوجر إحترافية أو قسماً عن قائمة بلوجر منسدلة (أي لم أضع هذه الجمل الأخيرة ضمن Labels لهذا الموضوع).
الأن وقد تعرفت على بداية إنشاء هذه القائمة ومنها نفهم أنه لتظهر مجموعة مقالات في قسم واحد يجب أن تكون جميعها يوجد في كلماتها المفتاحية Labels التي قمنا بإضافاتها من داخل المواضيع نفس إسم القسم بنفس الحروف بالظبط بدون أي تغيير لا في همزة ولا شرطة ولا خلافه.
مع العلم اننا أثناء إنشائنا لهذه الكلمات المفتاحية يجب أن نضيف بين كل كلمة وأخرى علامة الفاصلة (,) ويمكننا إنشاء الكلمة لتكون كلمة واحدة مثل (بلوجر) أو عدة كلمات مثل (دروس بلوجر).
كمثال الكلمات المفتاحية لموضوعنا هذا تكون بالشكل: بلوجر, دروس بلوجر, دورة بلوجر, قائمة بلوجرإحترافية, قائمة بلوجر منسدلة
ولاحظ أن علامة الفاصلة المستخدمة في الكلمات المفتاحية هي ( , ).
ملحوظة: إثناء كتابتك للكلمات المفتاحية وعند نشر الموضوع قد يرفض بلوجر نشره , يعود السبب في ذلك أن عدد حروف كلمة معينة أكبر من اللازم أو أن عدد الكلمات نفسها أكثر مما ينبغي وضعه في مقال واحد.
وبمثالي السابق أنا وضعت 5 كلمات مفتاحية الحد الأقصى للكلمة (جملة من 3 كلمات).
كمثال الكلمات المفتاحية لموضوعنا هذا تكون بالشكل: بلوجر, دروس بلوجر, دورة بلوجر, قائمة بلوجرإحترافية, قائمة بلوجر منسدلة
ولاحظ أن علامة الفاصلة المستخدمة في الكلمات المفتاحية هي ( , ).
ملحوظة: إثناء كتابتك للكلمات المفتاحية وعند نشر الموضوع قد يرفض بلوجر نشره , يعود السبب في ذلك أن عدد حروف كلمة معينة أكبر من اللازم أو أن عدد الكلمات نفسها أكثر مما ينبغي وضعه في مقال واحد.
وبمثالي السابق أنا وضعت 5 كلمات مفتاحية الحد الأقصى للكلمة (جملة من 3 كلمات).
ننتقل إلى النقطة التالية : كيف أضيف هذه التبويبات الأن في مدونتنا؟
يجب عليك أولاً أن تحضر ورقة وقلماً وتكتب الأقسام التي ترغب بإنشائها في مدونتك , إذا كان المجال شائع فقم بالدخول على الإنترنت وإبحث عن المواقع والمدونات المنافسة لتعلم ما يقومون بتقسيم مواقعهم ومدوناتهم إليه , وبعد الإنتهاء يمكنك العودة إلى مواضيعك أولاً لتضيف أو تقوم بتعديل بعض أسماء الكلمات المفتاحية الدلالية Labels أو تتركها كما هي لو كنت ترى إنك على الخطى السليم.
بعد ان قمت بكتابة الأقسام التي ترغب بإنشائها على ورقة وأنشأت مجموعة مواضيع لكل قسم منها "وهو أمر ضروري" عليك الأن بجلب روابط هذه الأٌقسام وذلك بإتباع إحدى الطريقتين الأتيتين:
الطريقة الأولى لجلب روابط الكلمات المفتاحية والاقسام على بلوجر:
من خلال ويدجيت الكلمات المفتاحية الذي يظهر بمدونات بلوجر إفتراضياً وذلك في حال لم تكن قد قمت بحذفه بالفعل , إذا رأيته ورأيت الكلمات التي قمت بإنشائها بالفعل فقم بالوقوف على كل كلمة وأنقر عليها بزر الفأرة الأيمن لتظهر لك قائمة إختر منها Copy Link Address وذلك إذا كنت تستخدم متصفح جوجل كروم.
هناك مثال على هذه الإضافة (Gadget) في روميسيا للخدمات الإلكترونية في الفوتر (الجزء السفلي من المدونة) و هي لدينا تحت مسمى (مقالات عن).
ملحوظة: نحن من أطلق عليها إسم (مقالات عن) ويمكنك تغيير إسم إضافتك كيفما تشاء وعادة يكون إسمها الإفتراضي Labels أو أقسام المدونة أو Keywords أو غيرها من الأسامي , بل وقد يتلف شكلها لتكون سحابة بمعنى أن تظهر الكلمات بجانب بعضها أو لا يظهر عدد المقالات عن كل كلمة والي يظهر بجانبها كما هو بمثالنا المتواضع.
في حالة لم تجد هذه الإضافة يمكنك إنشائها بنفسك بإتباع من خلال لوحة تحكم بلوجر Blogger.com قم بالضغط على التخطيط Layout ومن ثم قم بالضغط على Add Gadget ثم الضغط على Labels والتي عادة يكون إسمها الإفتراضي كما ذكرنا (التسميات) أو أقسام المدونة.
الطريقة الأولى لجلب روابط الكلمات المفتاحية والاقسام على بلوجر:
من خلال ويدجيت الكلمات المفتاحية الذي يظهر بمدونات بلوجر إفتراضياً وذلك في حال لم تكن قد قمت بحذفه بالفعل , إذا رأيته ورأيت الكلمات التي قمت بإنشائها بالفعل فقم بالوقوف على كل كلمة وأنقر عليها بزر الفأرة الأيمن لتظهر لك قائمة إختر منها Copy Link Address وذلك إذا كنت تستخدم متصفح جوجل كروم.
هناك مثال على هذه الإضافة (Gadget) في روميسيا للخدمات الإلكترونية في الفوتر (الجزء السفلي من المدونة) و هي لدينا تحت مسمى (مقالات عن).
ملحوظة: نحن من أطلق عليها إسم (مقالات عن) ويمكنك تغيير إسم إضافتك كيفما تشاء وعادة يكون إسمها الإفتراضي Labels أو أقسام المدونة أو Keywords أو غيرها من الأسامي , بل وقد يتلف شكلها لتكون سحابة بمعنى أن تظهر الكلمات بجانب بعضها أو لا يظهر عدد المقالات عن كل كلمة والي يظهر بجانبها كما هو بمثالنا المتواضع.
في حالة لم تجد هذه الإضافة يمكنك إنشائها بنفسك بإتباع من خلال لوحة تحكم بلوجر Blogger.com قم بالضغط على التخطيط Layout ومن ثم قم بالضغط على Add Gadget ثم الضغط على Labels والتي عادة يكون إسمها الإفتراضي كما ذكرنا (التسميات) أو أقسام المدونة.
ستظهر لك نافذة تخصيص هذه الأداة الجديدة , فيها العنوان Title تضع به الإسم المناسب لهذه الأداة بالنسبة لك , ويمكنك إظهار جميع الكلمات لجميع مواضيعك Show All Labels أو إختيار كلمات معينة Selected Labels , بل ويمكنك تحديد طريقة عرضهم وترتيبهم وإختيار إظهار عدد المواضيع المتعلقة بكل كلمة منهم بجانب الكلمة أو لا من خلال وضع علامة أمام جملة Show number of posts per label.
بعد الإنتهاء إضغط على حفظ Save.
الأن قم بسحب هذه الأداة للمكان المناسب في تخطيط مدونتك ومن الجهة العليا اليمنى قم بالضغط على حفظ Save مرة أخرى لحفظ مكانها وقم الأن بمعاينة مدونتك من خلال الضغط على View Blog من الجهة العليا قبل اليسرى.
وبعدها تطبيق خطوات معرفة الرابط بالوقوف على كل كلمة من الأداة بعد ظهورها بمدونتك ونسخ رابطها إلى ملف تحرير نصوص عادي على الويندوز لإستخدامها فيما بعد.
الطريقة الثانية لجلب روابط أقسام بلوجر:
هذه الطريقة أسهل مبدئياً وأصعب عملياً فلن تحتاج فيها لإنشاء شئ , فمن داخل كل موضوع وبشكل إفتراضي يظهر بجانب أو أسفل عنوانه أو حتى في نهاية الموضوع الكلمات الدلالية التي قمت أنت بكتابتها وتم إنشاء رابطها تلقائياً بواسطة بلوجر , قم بنسخ رابط هذه الكلمات ولكن في هذه الحالة ستحتاج للدخول إلى جميع مواضيعك وهو أمر صعب للغاية في حالة كانوا كثرة.
بعد الإنتهاء إضغط على حفظ Save.
الأن قم بسحب هذه الأداة للمكان المناسب في تخطيط مدونتك ومن الجهة العليا اليمنى قم بالضغط على حفظ Save مرة أخرى لحفظ مكانها وقم الأن بمعاينة مدونتك من خلال الضغط على View Blog من الجهة العليا قبل اليسرى.
وبعدها تطبيق خطوات معرفة الرابط بالوقوف على كل كلمة من الأداة بعد ظهورها بمدونتك ونسخ رابطها إلى ملف تحرير نصوص عادي على الويندوز لإستخدامها فيما بعد.
الطريقة الثانية لجلب روابط أقسام بلوجر:
هذه الطريقة أسهل مبدئياً وأصعب عملياً فلن تحتاج فيها لإنشاء شئ , فمن داخل كل موضوع وبشكل إفتراضي يظهر بجانب أو أسفل عنوانه أو حتى في نهاية الموضوع الكلمات الدلالية التي قمت أنت بكتابتها وتم إنشاء رابطها تلقائياً بواسطة بلوجر , قم بنسخ رابط هذه الكلمات ولكن في هذه الحالة ستحتاج للدخول إلى جميع مواضيعك وهو أمر صعب للغاية في حالة كانوا كثرة.
الأن إجلس لحظات لترتيب أفكارك:
1 - أنشأنا الكلمات الدلالية التي سنحولها لأقسام من داخل مواضيع بلوجر.
2 - تعرفنا على أكثر من طريقة لجلب روابطهم وحفظناها.
3 - كيف نضع أقسام الأن في مدوناتنا؟
لنبدأ معاً بإجابة وتطبيق الفكرة الثالثة.
تعتمد الفكرة الثالثة إلى حد ما على مدى علمك بلغات برمجة المواقع وحتى في حالة جهلك التام بها فهي ما تزال سهلة للغاية بل بالعكس ستكون محترفاً للغاية بها أيضاً بعد تطبيق هذا المثال.
لتعلم أولاً أن أي موقع يتكون من شكل ومضمون , الشكل حتى يظهر بتنسيق يعجب الزوار ويسهل عليهم التعامل معه , والمضمون يتلخص في العمليات التي تؤديها الأكواد البرمجية للموقع.
في مثالنا سيكون الشكل هو أكواد CSS الخاصة بطريقة وشكل ظهور هذه التبويبات والأقسام , أما المضمون فسيكون إنشاء هذه القائمة سواء أفقية عادية أو منسدلة , وسنضع بين أيديكم الإثنين لمعرفة الفرق وحتى لتطبيق ما يلائم مدوناتكم الإحترافية بإذن الله تعالى.
1 - أنشأنا الكلمات الدلالية التي سنحولها لأقسام من داخل مواضيع بلوجر.
2 - تعرفنا على أكثر من طريقة لجلب روابطهم وحفظناها.
3 - كيف نضع أقسام الأن في مدوناتنا؟
لنبدأ معاً بإجابة وتطبيق الفكرة الثالثة.
تعتمد الفكرة الثالثة إلى حد ما على مدى علمك بلغات برمجة المواقع وحتى في حالة جهلك التام بها فهي ما تزال سهلة للغاية بل بالعكس ستكون محترفاً للغاية بها أيضاً بعد تطبيق هذا المثال.
لتعلم أولاً أن أي موقع يتكون من شكل ومضمون , الشكل حتى يظهر بتنسيق يعجب الزوار ويسهل عليهم التعامل معه , والمضمون يتلخص في العمليات التي تؤديها الأكواد البرمجية للموقع.
في مثالنا سيكون الشكل هو أكواد CSS الخاصة بطريقة وشكل ظهور هذه التبويبات والأقسام , أما المضمون فسيكون إنشاء هذه القائمة سواء أفقية عادية أو منسدلة , وسنضع بين أيديكم الإثنين لمعرفة الفرق وحتى لتطبيق ما يلائم مدوناتكم الإحترافية بإذن الله تعالى.
سنبدأ بالمضمون لأنه الجزء الذي يهمنا الأن .. المضمون سيكون وضع أكواد تدل على أن الكلمة (كذا) رابطها هو (كذا كذا) ونكرر هذه العملية عدة مرات مع وضع أكواد لتظهر الكلمة كذا كتبويب رئيسي وكلمات مثل كذا 1 وكذا 2 كتبويبات منبثقة وهكذا.
هذه الفكرة والأن للتطبيق بشكل أوضح
كمثال: لن نضع مجموعة تبويبات بل تبويب واحد فقط عادي وليس منبثق وهو تبويب العودة للصفحة الرئيسية للمدونة , في هذه الحالة سيكون المطلوب الإفتراضي المطلوب هو:
هذه الفكرة والأن للتطبيق بشكل أوضح
كمثال: لن نضع مجموعة تبويبات بل تبويب واحد فقط عادي وليس منبثق وهو تبويب العودة للصفحة الرئيسية للمدونة , في هذه الحالة سيكون المطلوب الإفتراضي المطلوب هو:
<ul><li><a href='#'><span>aaa</span></a></li></ul>
سنشرح أين تضعه في مدونتك وكيفية تعديله فلا تقلق
في الكود السابق تلاحظ ان كل علامة تنتهي بشبيهة لها ولكن قبلها رمز /
مثلاً: أولاً: علامة <li> تعني أننا نقوم بإنشاء مفتاح من ضمن قائمة سواء كانت هذه القائمة أفقية أو رأسية , لا فارق في هذا الجزء من الاكواد.
وينتهي هذا الكود بنفس العلامة ولكن بإضافة الرمز / لتصبح </li> وبدون إغلاق أي وسم مثل ذلك سيكون الكود خاطئ وإن وجدت بعض الوسوم تنتهي بإغلاقات مختلفة كما سنعلم من واقع خبرتنا والمستقبل فيما بعد إن أعطانا الله وإياكم العمر.
ثانياً: الوسم
مثلاً: أولاً: علامة <li> تعني أننا نقوم بإنشاء مفتاح من ضمن قائمة سواء كانت هذه القائمة أفقية أو رأسية , لا فارق في هذا الجزء من الاكواد.
وينتهي هذا الكود بنفس العلامة ولكن بإضافة الرمز / لتصبح </li> وبدون إغلاق أي وسم مثل ذلك سيكون الكود خاطئ وإن وجدت بعض الوسوم تنتهي بإغلاقات مختلفة كما سنعلم من واقع خبرتنا والمستقبل فيما بعد إن أعطانا الله وإياكم العمر.
ثانياً: الوسم
<a href="#">يعني أننا بصدد إنشاء رابط ويجب أن نضع نهايته الوسم
</a>
وفي المنتصف بين الوسمين نضع إسم هذا الرابط مع تغيير علامة # بالرابط المحفوظ لدينا.
كمثال على الكود السابق:
كمثال على الكود السابق:
<ul><li><a href='http://www.romisya.com'><span>الرئيسية</span></a></li></ul>
تلاحظون إنني لم أغير سوى علامة الشباك # بالرابط الخاص بالصفحة الرئيسية لمدونتي وكذلك قمت بتغيير حروف aaa بإسم هذه الصفحة (الرئيسية).
جيد , الأن نرغب بإنشاء تبويب أخر بجانب هذا التبويب كمثال أن علمت أن الكلمة المفتاحية هي الربح من الإنترنت على مدونتنا روميسيا للخدمات الإلكترونية وقمنا بإيجاد رابطها الذي ولدته لنا بلوجر تلقائياً من جادجيت التسميات أو من داخل الموضوع كما ذكرنا وكان الرابط:
http://www.romisya.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA
نعم الرابط غريب إلى حد ما ولكن هذا شكل روابط بلوجر المولدة تلقائياً.
سنستخدم نفس الكود السابق:
<ul><li><a href='#'><span>aaa</span></a></li></ul>
وبعد الإنتهاء من التعديلات سيكون كود قسم الربح من الإنترنت هو:
<ul><li><a href='http://www.romisya.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA'><span>الربح من الإنترنت</span></a></li></ul>
حسناً , الأن لدينا كود تبويب قسم الرئيسية وكود تبويب قسم الربح من الإنترنت لذا فسنضعهم بجانب بعضهم البعض بالترتيب كالتالي:
إلى هذا الحد لا توجد صعوبة ويمكننا إضافة المزيد من التبويبات بنفس الشكل , فقط عليك تغيير علامات # و aaa من الكود التالي مثلاً وحذف الأسطر الإضافية لإنشاء قائمة بلوجر عادية
هذا الكود كما ترون يكفي حتى 7 تبويبات نقوم فيه كما ذكرنا فقط بتغيير إسم التبويب ورابط القسم #.
ولكن ماذا عن إنشاء قائمة منسدلة؟
بفرق أننا أردنا إنشاء قائمة منسدلة من التبويب الثاني , إذا عليناً أن نقوم بإضافة وسوم جديدة بإستخدام
وبشكل عام فإن كود التبويب الإضافي وحده يكون مثل التبويب العادي
وقد وضعنا بالأعلى تبويبين فرعيين وليس واحداً ويمكنك إضافة ما تشاء من عدد التبويبات الفرعية أو حذف سطر من السطرين السابقين وجعله تبويب فرعي واحد فقط.
الأن مثال أخر ضمن التبويب الرئيسي الثاني بإضافة الوسم ul وكود تبويب فرعي واحد فقط هذه المرة:
حاول دراسة وفهم الأكواد السابقة جيداً لإنها أساس التعامل مع تبويبات مدونات بلوجر وبعد فهمها قم بالتعديل عليها بما يتناسب مع مدونتك في ملف تحرير نصوص مثل Notepad وإحفظه على جهازك في مجلد عملك.
هل إنتهى عملنا بهذا الشكل؟ لا يا سيدي ليس بعد , هل نسيت النصف الثاني من الكود والخاص بشكل هذه التبويبات؟ ألم تسأل نفسك لماذا التبويبات في بعض المواقع تكون بألوان مختلفة وخطوط وأحجام وخلفيات مختلفة؟ بل وحتى عند مرور الفأرة عليها تتغير كثيراً عن بعضها البعض؟
بشكل عام وحتى لا نبتعد عن موضوعنا كثيراً ولأن دراسة الأكواد الخاصة بالإستايلات تحتاج لكورس كامل وحدها فسنقوم بالإكمال بأمثلة تطبيقية تساعد على الفهم والإدراك لما نفعله وإنشاء قائمتنا الإحترافية بسهولة.
لنبدأ الجزء الممتع من عملنا الأن ,
قم بالدخول إلى لوحة تحكم بلوجر Blogger.com ومن أمام مدونتك ستجد سهم لأسفل بجانب المستطيل البرتقالي ذو القلم .. إضغط على السهم الذي يشير للأسفل ومنه قم بفتح التخطيط Layout.
نعم هذا هو شكل مدونتك الحالي , تظهر مقالاتك في ما يسمى صندوق الرسائل الإلكترونية في منتصف التصميم تقريباً , وبالأعلى الهيدر أي الجزء العلوي من المدونة والذي يتم وضع عنوان ووصف المدونة فيه ويمكنك أيضاً إضافة بانر إليه , وبالنسبة لل Fav Icon فهي رمز المدونة الذي يظهر بأعلى متصفح الإنترنت عند فتح مدونتك من قبل أي شخص.
من الطبيعي أن توجد التبويبات بالجزء العلوي من المدونة لذا فهي سيتم إدراجها اسفل الهيدر مباشرة.
لتقوم بهذه الخطوة قم بالضغط على Add a Gadget من أي مكان من التخطيط Layout ومنه قم بإختيار HTML/JavaScriptAdd
حالياً أنت لديك كود التبويبات الإفتراضي ولكن بدون أي تأثيرات أو شكل جيد وتنسيق لهذه التبويبات , لإضافة شكل عليك أولاً أن تطلق لهذه الأكواد أسماء وكلاسات , كمثال الكود السابق الذي قمنا بإعداده كان:
ولكننا سنضيف تأثير محدد على التبويبات الرئيسية ويختلف هذا التأثير عن التبويبات الفرعية وهناك أكواد لتأثيرات إن تركناها لن تعمل الإضافة بشكل جيد مثلاً: تأثير المرور بالفأرة على أحد التبويبات Hover إذا لم نضعه فستظهر التبويبات الفرعية أصلاً بدون حتى المرور على التبويبات الرئيسية لن تكون مخفية ولذلك شكل سيئ للغاية , سنقوم بوضع أسماء ونغير الكود السابق للتالي:
يتضح في الكود السابق أننا أطلقنا على هذه القائمة إسم cssmenu وأطلقنا على التبويب الرئيسي الذي يرتبط بالصفحة الرئيسية لمدونتنا إسم الكلاس active وذلك ما يعني أنه تبويب نشيط وشكله مختلف عن باقي التبويبات , وقمنا بتسمية التبويبات الرئيسية التي لها تبويبات فرعية إسم الكلاس has-sub , وحددنا التبويب الفرعي الأخير في كل قائمة منسدلة بإسم الكلاس last وكررنا ذلك في بعض أجزاء الأكواد بما يتناسب مع ما نرغب به من عدد تبويبات.
ونلاحظ أنه تم إستبدال رابط الصفحة الرئيسية بدلاً من إسم موقعنا بالكود البرمجي index.html وهذا الكود يعني بلغة الويب رابط الصفحة الرئيسية , فيمكنك تغييره برابط مدونتك أو تركه وسيؤدي نفس العمل كما لو كنت قد غيرته برابط مدونتك , ونحن نفضل أن نستخدمه بهذا الشكل نظراً لأنك في هذه الحالة لو قمت مستقبلاً بتغيير رابط مدونتك أو شراء نطاق مخصص لها فلن تحتاج لتعديله , ولكن هذه الخطوة لا تنطبق سوى على التبويب الرئيسي فقط.
بعد تسمية كل جزء من أكواد القائمة المنسدلة بإسم وكلاس مختلفين لتحديد كل منهم بميزة ننتقل الأن لإضافة الميزات , ولأن شرحها يصعب الكتابة عنه في مقال واحد فسنقوم بالتطبيق الأن ومعاينة النتيجة وفيما بعد إنتهاء دورة بلوجر وأخذنا فكرة أثناء دروسها عن بعض الأكواد الأخرى نعود لدراسة أكواد CSS و HTML5 كاملة.
أكواد التنسيق:
(القسم الذي تحت الكود)
والأن ونظراً لإني قمت بإقتباس كود CSS الخاص بشكل هذه التبويبات من موقع أجنبي فإذا قمت بحفظ هذا الكود مباشرة Save ومعاينة قالبك فستجد التبويبات تأتي من اليسار لليمين وليس العكس . لذا عليك أن تبحث بداخل أكواد css نفسها عن الكود: float:left وتقوم بتغييره إلى float:right
وهذا هو كل ما سنقوم بتغييره في كود css لهذه التبويبات , وبالنسبة لشكل هذه التبويبات قبل التعديلات فقد كان:
ولكن بدلاً من مفتاح home باليسار ساجد كلمة الرئيسية باليمين وما بجانبها قمت أنت بإستبداله بالتبويب الثاني ومن اليمين أيضاً وهكذا لتكون قائمة عربية عادية.
بعد أن قتوم بحفظ Gadget الذي وضعت به هذه الأكود قم بالوقوف عليه بالفأرة وسحبه إلى أسفل الهيدر Header في لوحة تحكم التخطيط الخاصة بمدونتك , وبعدها قم بحفظ التخطيط Save من مفتاح الحفظ بأعلى الجهة اليمنى وعاين مدونتك على الطبيعة ومبروك بدأك إحتراف بلوجر الحقيقي وليس مجرد نقل الإضافات الجاهزة بدون القدرة على التعديل عليها.
وصدق أو لا تصدق , بعد أن قرأت أنت هذا الدرس وتعلمت المعلومات الاساسية عن أكواد القوائم المنسدلة لبلوجر يمكنك الأن تعديل أي تبويبات جاهزة تجد شكلها جذاب لك بسهولة ودون الحاجة لأي مبرمجين خاصين أو غيرهم ممن لن يلبون لك طلبك بشكل جيد.
يا إلهي , تعبت كثيراً من القراءه يا صديقي , أعلم إنك قد بذلت مجهود كبير لتظل مستيقظاً معي وتحاول تطبيق كل خطوة بنجاح وتخطئ أحياناً وتعيد النظر لإيجاد المشكلة حجتى تجدها ولكن أتعلم ما النتيجة؟ بقرائتك لهذه السطور شعرت أنا بالفخر إنك تمكنت من الوصول معي للنهاية وقمت بإصرار بإنهاء هذا الدرس الصعب والمتعب بنجاح , ولا تنسى يا صديقي تعب القراءة هذه وراءه الكثير من التعب لتدوين هذه الخطوات واحدة تلو الأخر وتجربة كل منها وتحضير هذا الدرس لوقت طويل ومتعب , وذلك من أجل هدف واحد , أن يكون في المستقبل هناك جيل قادر على تعليم غيره بعلمه وقدرته على الصبر والإحتمال وإكمال الطريق مهما بلغت الصعوبات , فهل أنت معنا؟
شاركنا بتعليقك أسفل هذه التدوينة المتواضعة أو راسلنا بإستفساراتك وتجاربك أو أية مشكلات قد تواجهك وحتى قم بالتواصل معنا على صفحة روميسيا للخدمات الإلكترونية على الفيسبوك , فجميع الخيارات لديك متاحة فقط لتكون أفضل وتستمر بالنجاح والإستزادة من العلم عن هذه الطريقة الساحرة والعالم المجهول للعمل عبر الإنترنت.
<ul><li><a href='http://www.romisya.com'><span>الرئيسية</span></a></li><li><a href='http://www.romisya.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA'><span>الربح من الإنترنت</span></a></li></ul>
إلى هذا الحد لا توجد صعوبة ويمكننا إضافة المزيد من التبويبات بنفس الشكل , فقط عليك تغيير علامات # و aaa من الكود التالي مثلاً وحذف الأسطر الإضافية لإنشاء قائمة بلوجر عادية
<ul><li><a href='#'><span>الرئيسية</span></a></li><li><a href='#'><span>التبويب الرئيسي الثاني</span></a></li><li><a href='#'><span>التبويب الرئيسي الثالث</span></a></li><li><a href='#'><span>التبويب الرئيسي الرابع</span></a></li><li><a href='#'><span>التبويب الرئيسي الخامس</span></a></li><li><a href='#'><span>التبويب الرئيسي السادس</span></a></li><li><a href='#'><span>التبويب الرئيسي السابع</span></a></li></ul>
هذا الكود كما ترون يكفي حتى 7 تبويبات نقوم فيه كما ذكرنا فقط بتغيير إسم التبويب ورابط القسم #.
ولكن ماذا عن إنشاء قائمة منسدلة؟
بفرق أننا أردنا إنشاء قائمة منسدلة من التبويب الثاني , إذا عليناً أن نقوم بإضافة وسوم جديدة بإستخدام
<ul>و
</ul>سنقوم بجلب الكود الأساسي للتبويبات الأفقية والذي سبق أن حضرناه بالأعلى ولكننا سنقوم بترك مسافة فارغة قبل وبعد سطر التبويب الثاني ليكون بهذا الشكل وستلاحظون ما قمنا بإضافته لنجعل التبويب الثاني له تبويب فرعي.
<ul><li><a href='#'><span>الرئيسية</span></a></li>
<li><a href='#'><span>التبويب الرئيسي الثاني</span></a><ul><li><a href='#'><span>تبويب فرعي أول</span></a></li><li><a href='#'><span>تبويب فرعي ثاني</span></a></li></ul></li>
<li><a href='#'><span>التبويب الرئيسي الثالث</span></a></li><li><a href='#'><span>التبويب الرئيسي الرابع</span></a></li><li><a href='#'><span>التبويب الرئيسي الخامس</span></a></li><li><a href='#'><span>التبويب الرئيسي السادس</span></a></li><li><a href='#'><span>التبويب الرئيسي السابع</span></a></li></ul>
كما لاحظتم قمنا لاحظتم قمنا بوضع أكواد التبويبات الفرعية الأول والثاني باللون الأزرق قبل وسم إغلاق التبويب الثاني:
</li>
وبشكل عام فإن كود التبويب الإضافي وحده يكون مثل التبويب العادي
<li><a href='#'><span>تبويب فرعي أول</span></a></li><li><a href='#'><span>تبويب فرعي ثاني</span></a></li>
الأن مثال أخر ضمن التبويب الرئيسي الثاني بإضافة الوسم ul وكود تبويب فرعي واحد فقط هذه المرة:
<li><a href='#'><span>الرئيسية</span></a></li>
<li><a href='#'><span>التبويب الرئيسي الثاني</span></a><ul><li><a href='#'><span>تبويب فرعي أول</span></a></li></ul></li>
<li><a href='#'><span>التبويب الرئيسي الثالث</span></a></li><li><a href='#'><span>التبويب الرئيسي الرابع</span></a></li><li><a href='#'><span>التبويب الرئيسي الخامس</span></a></li><li><a href='#'><span>التبويب الرئيسي السادس</span></a></li><li><a href='#'><span>التبويب الرئيسي السابع</span></a></li>
هل إنتهى عملنا بهذا الشكل؟ لا يا سيدي ليس بعد , هل نسيت النصف الثاني من الكود والخاص بشكل هذه التبويبات؟ ألم تسأل نفسك لماذا التبويبات في بعض المواقع تكون بألوان مختلفة وخطوط وأحجام وخلفيات مختلفة؟ بل وحتى عند مرور الفأرة عليها تتغير كثيراً عن بعضها البعض؟
بشكل عام وحتى لا نبتعد عن موضوعنا كثيراً ولأن دراسة الأكواد الخاصة بالإستايلات تحتاج لكورس كامل وحدها فسنقوم بالإكمال بأمثلة تطبيقية تساعد على الفهم والإدراك لما نفعله وإنشاء قائمتنا الإحترافية بسهولة.
لنبدأ الجزء الممتع من عملنا الأن ,
قم بالدخول إلى لوحة تحكم بلوجر Blogger.com ومن أمام مدونتك ستجد سهم لأسفل بجانب المستطيل البرتقالي ذو القلم .. إضغط على السهم الذي يشير للأسفل ومنه قم بفتح التخطيط Layout.
نعم هذا هو شكل مدونتك الحالي , تظهر مقالاتك في ما يسمى صندوق الرسائل الإلكترونية في منتصف التصميم تقريباً , وبالأعلى الهيدر أي الجزء العلوي من المدونة والذي يتم وضع عنوان ووصف المدونة فيه ويمكنك أيضاً إضافة بانر إليه , وبالنسبة لل Fav Icon فهي رمز المدونة الذي يظهر بأعلى متصفح الإنترنت عند فتح مدونتك من قبل أي شخص.
من الطبيعي أن توجد التبويبات بالجزء العلوي من المدونة لذا فهي سيتم إدراجها اسفل الهيدر مباشرة.
لتقوم بهذه الخطوة قم بالضغط على Add a Gadget من أي مكان من التخطيط Layout ومنه قم بإختيار HTML/JavaScriptAdd
حالياً أنت لديك كود التبويبات الإفتراضي ولكن بدون أي تأثيرات أو شكل جيد وتنسيق لهذه التبويبات , لإضافة شكل عليك أولاً أن تطلق لهذه الأكواد أسماء وكلاسات , كمثال الكود السابق الذي قمنا بإعداده كان:
<li><a href='#'><span>الرئيسية</span></a></li><li><a href='#'><span>التبويب الرئيسي الثاني</span></a><ul><li><a href='#'><span>تبويب فرعي أول</span></a></li></ul></li><li><a href='#'><span>التبويب الرئيسي الثالث</span></a></li><li><a href='#'><span>التبويب الرئيسي الرابع</span></a></li><li><a href='#'><span>التبويب الرئيسي الخامس</span></a></li><li><a href='#'><span>التبويب الرئيسي السادس</span></a></li><li><a href='#'><span>التبويب الرئيسي السابع</span></a></li>
ولكننا سنضيف تأثير محدد على التبويبات الرئيسية ويختلف هذا التأثير عن التبويبات الفرعية وهناك أكواد لتأثيرات إن تركناها لن تعمل الإضافة بشكل جيد مثلاً: تأثير المرور بالفأرة على أحد التبويبات Hover إذا لم نضعه فستظهر التبويبات الفرعية أصلاً بدون حتى المرور على التبويبات الرئيسية لن تكون مخفية ولذلك شكل سيئ للغاية , سنقوم بوضع أسماء ونغير الكود السابق للتالي:
<div id='cssmenu'><ul><li class='active'><a href='index.html'><span>Home</span></a></li><li class='has-sub'><a href='#'><span>Products</span></a><ul><li><a href='#'><span>Widgets</span></a></li><li><a href='#'><span>Menus</span></a></li><li class='last'><a href='#'><span>Products</span></a></li></ul></li><li class='has-sub'><a href='#'><span>Company</span></a><ul><li><a href='#'><span>About</span></a></li><li class='last'><a href='#'><span>Location</span></a></li></ul></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>
يتضح في الكود السابق أننا أطلقنا على هذه القائمة إسم cssmenu وأطلقنا على التبويب الرئيسي الذي يرتبط بالصفحة الرئيسية لمدونتنا إسم الكلاس active وذلك ما يعني أنه تبويب نشيط وشكله مختلف عن باقي التبويبات , وقمنا بتسمية التبويبات الرئيسية التي لها تبويبات فرعية إسم الكلاس has-sub , وحددنا التبويب الفرعي الأخير في كل قائمة منسدلة بإسم الكلاس last وكررنا ذلك في بعض أجزاء الأكواد بما يتناسب مع ما نرغب به من عدد تبويبات.
ونلاحظ أنه تم إستبدال رابط الصفحة الرئيسية بدلاً من إسم موقعنا بالكود البرمجي index.html وهذا الكود يعني بلغة الويب رابط الصفحة الرئيسية , فيمكنك تغييره برابط مدونتك أو تركه وسيؤدي نفس العمل كما لو كنت قد غيرته برابط مدونتك , ونحن نفضل أن نستخدمه بهذا الشكل نظراً لأنك في هذه الحالة لو قمت مستقبلاً بتغيير رابط مدونتك أو شراء نطاق مخصص لها فلن تحتاج لتعديله , ولكن هذه الخطوة لا تنطبق سوى على التبويب الرئيسي فقط.
بعد تسمية كل جزء من أكواد القائمة المنسدلة بإسم وكلاس مختلفين لتحديد كل منهم بميزة ننتقل الأن لإضافة الميزات , ولأن شرحها يصعب الكتابة عنه في مقال واحد فسنقوم بالتطبيق الأن ومعاينة النتيجة وفيما بعد إنتهاء دورة بلوجر وأخذنا فكرة أثناء دروسها عن بعض الأكواد الأخرى نعود لدراسة أكواد CSS و HTML5 كاملة.
أكواد التنسيق:
هذه الأكواد بها جزء واضح وجزء أخر مرفوع على سيرفرات مواقع أخرى وكل ذلك سنشرحه فيما بعد بإذن الله , والأن لنضع أكواد التبويبات وأكواد التنسيق معاً في مربع HTML/JavaScriptAdd الذي قمنا بفتحه سابقاً بهذا الشكل:<style type='text/css'>#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #eee}#cssmenu ul{list-style:none}#cssmenu > ul > li{float:left}#cssmenu > ul > li.active > a{background:#d9d9d9 url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-moz-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-webkit-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;filter:none}#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);filter:none}#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;background:#bfbfbf url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left top;background:-moz-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#e5e5e5),color-stop(51%,#d7d7d7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-o-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-ms-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:linear-gradient(to bottom,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);border-bottom:1px solid #d2d2d2;border-top:1px solid #d2d2d2;border-right:1px solid #d2d2d2;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul > li a:hover{background:#fff url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(50%,#bfbfbf),color-stop(51%,#b0b0b0),color-stop(100%,#c7c7c7));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);filter:none}#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #d2d2d2}#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;*width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #d2d2d2;display:block;font-size:12px;line-height:120%;padding:9px 5px;text-align:center}</style><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Drop Down Menus'><img src='https://bitly.com/24workpng1' alt='Drop Down Menus' border='0' style='position: fixed; bottom: 10%; right: 0%; top: 0px;' /></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='CSS Drop Down Menu'><img src='https://bitly.com/24workpng1' alt='CSS Drop Down Menu' border='0' style='position: fixed; bottom: 10%; right: 0%;' /></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Pure CSS Dropdown Menu'><img src='https://bitly.com/24workpng1' alt='Pure CSS Dropdown Menu' border='0' style='position: fixed; bottom: 10%; left: 0%;' /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
ويمكنك تعديل القسم السفلي من هذا الكود<style type='text/css'>#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #eee}#cssmenu ul{list-style:none}#cssmenu > ul > li{float:left}#cssmenu > ul > li.active > a{background:#d9d9d9 url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-moz-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-webkit-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;filter:none}#cssmenu > ul > li.active a:hover{background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);filter:none}#cssmenu > ul > li a{box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;background:#bfbfbf url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left top;background:-moz-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#e5e5e5),color-stop(51%,#d7d7d7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-o-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-ms-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:linear-gradient(to bottom,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);border-bottom:1px solid #d2d2d2;border-top:1px solid #d2d2d2;border-right:1px solid #d2d2d2;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul > li a:hover{background:#fff url(http://3.bp.blogspot.com/-hUEjyzLtF9M/UjqUfVn3aFI/AAAAAAAABdk/xqPLg9zburs/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(50%,#bfbfbf),color-stop(51%,#b0b0b0),color-stop(100%,#c7c7c7));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);filter:none}#cssmenu > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #d2d2d2}#cssmenu > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;*width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0 none;border-left:1px solid #d2d2d2;display:block;font-size:12px;line-height:120%;padding:9px 5px;text-align:center}</style><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Drop Down Menus'><img src='https://bitly.com/24workpng1' alt='Drop Down Menus' border='0' style='position: fixed; bottom: 10%; right: 0%; top: 0px;' /></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='CSS Drop Down Menu'><img src='https://bitly.com/24workpng1' alt='CSS Drop Down Menu' border='0' style='position: fixed; bottom: 10%; right: 0%;' /></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Pure CSS Dropdown Menu'><img src='https://bitly.com/24workpng1' alt='Pure CSS Dropdown Menu' border='0' style='position: fixed; bottom: 10%; left: 0%;' /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --><!-- customize your menus Links --><div id='cssmenu'><ul><li class='active'><a href='index.html'><span>الرئيسية</span></a></li><li class='has-sub'><a href='#'><span>التبويب الرئيسي الثاني</span></a><ul><li><a href='#'><span>تبويب فرعي أول</span></a></li><li><a href='#'><span>تبويب فرعي ثاني</span></a></li><li class='last'><a href='#'><span>تبويب فرعي ثالث</span></a></li></ul></li><li class='has-sub'><a href='#'><span>التبويب الرئيسي الثالث</span></a><ul><li><a href='#'><span>تبويب فرعي أول</span></a></li><li class='last'><a href='#'><span>تبويب فرعي ثاني</span></a></li></ul></li><li class='last'><a href='#'><span>التبويب الرئيسي الرابع</span></a></li></ul></div>
(القسم الذي تحت الكود)
<!-- customize your menus Links -->كيفما تشاء لتضع عدد وأسماء التبويبات الرئيسية والمنسدلة الذي ترغب به.
والأن ونظراً لإني قمت بإقتباس كود CSS الخاص بشكل هذه التبويبات من موقع أجنبي فإذا قمت بحفظ هذا الكود مباشرة Save ومعاينة قالبك فستجد التبويبات تأتي من اليسار لليمين وليس العكس . لذا عليك أن تبحث بداخل أكواد css نفسها عن الكود: float:left وتقوم بتغييره إلى float:right
وهذا هو كل ما سنقوم بتغييره في كود css لهذه التبويبات , وبالنسبة لشكل هذه التبويبات قبل التعديلات فقد كان:
 |
| قائمة تبويبات بلوجر منسدلة إحترافية |
بعد أن قتوم بحفظ Gadget الذي وضعت به هذه الأكود قم بالوقوف عليه بالفأرة وسحبه إلى أسفل الهيدر Header في لوحة تحكم التخطيط الخاصة بمدونتك , وبعدها قم بحفظ التخطيط Save من مفتاح الحفظ بأعلى الجهة اليمنى وعاين مدونتك على الطبيعة ومبروك بدأك إحتراف بلوجر الحقيقي وليس مجرد نقل الإضافات الجاهزة بدون القدرة على التعديل عليها.
وصدق أو لا تصدق , بعد أن قرأت أنت هذا الدرس وتعلمت المعلومات الاساسية عن أكواد القوائم المنسدلة لبلوجر يمكنك الأن تعديل أي تبويبات جاهزة تجد شكلها جذاب لك بسهولة ودون الحاجة لأي مبرمجين خاصين أو غيرهم ممن لن يلبون لك طلبك بشكل جيد.
يا إلهي , تعبت كثيراً من القراءه يا صديقي , أعلم إنك قد بذلت مجهود كبير لتظل مستيقظاً معي وتحاول تطبيق كل خطوة بنجاح وتخطئ أحياناً وتعيد النظر لإيجاد المشكلة حجتى تجدها ولكن أتعلم ما النتيجة؟ بقرائتك لهذه السطور شعرت أنا بالفخر إنك تمكنت من الوصول معي للنهاية وقمت بإصرار بإنهاء هذا الدرس الصعب والمتعب بنجاح , ولا تنسى يا صديقي تعب القراءة هذه وراءه الكثير من التعب لتدوين هذه الخطوات واحدة تلو الأخر وتجربة كل منها وتحضير هذا الدرس لوقت طويل ومتعب , وذلك من أجل هدف واحد , أن يكون في المستقبل هناك جيل قادر على تعليم غيره بعلمه وقدرته على الصبر والإحتمال وإكمال الطريق مهما بلغت الصعوبات , فهل أنت معنا؟
شاركنا بتعليقك أسفل هذه التدوينة المتواضعة أو راسلنا بإستفساراتك وتجاربك أو أية مشكلات قد تواجهك وحتى قم بالتواصل معنا على صفحة روميسيا للخدمات الإلكترونية على الفيسبوك , فجميع الخيارات لديك متاحة فقط لتكون أفضل وتستمر بالنجاح والإستزادة من العلم عن هذه الطريقة الساحرة والعالم المجهول للعمل عبر الإنترنت.
مع تحيات .. روميسيا للخدمات الإلكترونية