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

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

اكتب ونمط توصيف الشريط الجانبي

1

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

float:left; 

}

10

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

أدخل الشريط الجانبي في سمة Tumblr الخاصة بك

1

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

2

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

3

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

4

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

5

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