إدراج شريط جانبي في موضوع على Tumblr

إضافة شريط جانبي إلى عملك يفيد Tumblr الموضوع من خلال توفير معلومات إضافية عن عملك ، أو روابط خارجية للمنظمات الشريكة أو مواقع الويب ذات الصلة أو حقل بحث للعثور على محتوى معين في الموقع. تم تصميم العديد من المظاهر لدعم شريط جانبي ، ولكن يمكنك أيضًا إدراج سمة في السمة الخاصة بك باستخدام محرر HTML الخاص بـ Tumblr. يتيح لك إنشاء الشريط الجانبي الخاص بك باستخدام محرر نصوص وتصميمه باستخدام CSS التحكم الكامل في وظائفه ومظهره ، مما يسمح لك بمطابقة مظهره بهوية شركتك بشكل أكثر دقة.

اكتب نمط علامة الشريط الجانبي

1.

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

2.

أنشئ مستند HTML جديدًا به علامات لتحديد التصميم باستخدام تطبيق تحرير النص. يجب أن تبدو بنية صفحة HTML5 كما يلي:

3.

أدرج علامة جانباً مع "الشريط الجانبي" للمعرف في نص مستند HTML5. يجب أن تبدو العلامة جانبا كالتالي:

4.

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

5.

استخدم الترميز المتوافق مع المعايير لتحويل محتوى الشريط الجانبي إلى HTML5. على سبيل المثال ، قم بتضمين الرؤوس داخل علامات الرأس ، ومحتوى الفقرة داخل علامات الفقرات ، وقم بتضمين نص الارتباط في علامات الربط مع مراجع الارتباط التشعبي. راجع دليل مرجع HTML إذا كنت غير متأكد من كيفية عمل ذلك (راجع الموارد).

6.

احفظ الملف كمستند HTML على سطح المكتب

7.

افتح متصفح الويب الخاص بك ، واختر "ملف" ، وانقر فوق "فتح" وحدد مستند HTML الذي قمت بحفظه على سطح المكتب. المتصفح الخاص بك يعرض الشريط الجانبي غير المتوازن.

8.

ارجع إلى محرر النص ، وضع المؤشر بين علامات النمط ونمط الترميز الخاص بك بالاعتماد على محدد "#sidebar" لاستهداف الشريط الجانبي الخاص بك. تعتمد طريقة تصميم الشريط الجانبي إلى حد كبير على أذواقك وتصميم مظهر Tumblr الحالي والترميز في الشريط الجانبي. استخدم دليل مرجع CSS3 للتأكد من إنشاء الخصائص وقيمها بشكل صحيح (راجع الموارد).

9.

قرر ما إذا كنت تريد الشريط الجانبي الخاص بك على اليسار أو اليمين وتعيين خاصية عائم وفقًا لذلك. على سبيل المثال ، إذا كنت تريد أن يظهر الشريط الجانبي على يمين المحتوى الأساسي ، سيبدو "#sidebarbar" المحدّد ، وعميتك وقيمته كالتالي:

الشريط الجانبي {

float:left; 

}

10.

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

إدراج الشريط الجانبي في موضوع Tumblr الخاص بك

1.

سجّل الدخول إلى لوحة معلومات Tumblr ، وانقر على عنوان المدونة في الشريط الجانبي الأيسر ، وانقر على "تخصيص" وانقر على "تعديل HTML" لفتح محرر Tumblr التعليمات البرمجية المصدر.

2.

انسخ CSS من مستند HTML المفتوح الخاص بك وقم بلصقه في نهاية نمط النمط الخاص بك في Tumblr.

3.

ابحث عن محدد CSS الخاص بمنطقة المحتوى الأساسي في محرر Tumblr ، ثم ضع المؤشر بعد الحافة المجعدة وقم بتعيين الخاصية العائمة والقيمة مثل الشريط الجانبي. على سبيل المثال ، إذا كان الغرض من الشريط الجانبي الخاص بك هو الظهور على اليمين ، قم بتعيين خاصية عائمة بقيمة "right" إلى الحاوية المحددة.

4.

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

5.

انقر على "تحديث المعاينة" ، وانقر على "المظهر" وانقر على زر "حفظ" لإنهاء التغييرات التي أجريتها على مظهرك.

الأشياء المطلوبة

  • تطبيق تحرير النص

تلميح

  • ارجع إلى قائمة المتغيرات الأساسية في Tumblr لإدراج محتوى ديناميكي في الشريط الجانبي (انظر الموارد).

موصى به