كيفية إنشاء شريط جانبي ثابت على Tumblr

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

قم بزيارة لوحة تحكم Tumblr الخاصة بك ، ثم انقر فوق رمز الإعدادات واسم المدونة التي تريد تحديثها. إذا كان لديك مدونة واحدة فقط ، فانقر فوق اسمها.

انقر فوق "تخصيص" متبوعًا بـ "تمت إضافة HTML". يفتح Tumblr قالبك ويعرض كود HTML الخاص به.

انقر في أي مكان داخل الكود واضغط على "Ctrl-A" متبوعًا بـ "Ctrl-C" لنسخ الكود إلى حافظة Windows. افتح مستند Notepad جديد والصق الرمز في المستند. تضمن هذه الخطوات أن لديك نسخة احتياطية من القالب الأصلي.

ارجع إلى رمز HTML في Tumblr واضغط على "Ctrl-F" لفتح مربع بحث. اكتب "الشريط الجانبي" في مربع البحث هذا ، ثم اضغط على "إدخال". يعثر Tumblr على أول ظهور لـ "الشريط الجانبي" ويعرض قسم الكود الذي يحتوي على تلك الكلمة. يجب أن يبدو الرمز الذي يعثر عليه مشابهًا لما يلي:

غلاف #sidebar {color: {color: Background}؛ }

يحتوي السطر الأول من التعليمات البرمجية على الكلمات # غلاف # شريط جانبي. قوس أيسر يتبع تلك الكلمات.

الصق الكود التالي مباشرة أسفل السطر الأول من الكود:

الموقف: ثابت ؛ اليمين: 100 بكسل ؛

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

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

نصائح

قد ترغب في تجربة قيم مختلفة للسمة الصحيحة إذا كنت تريد ضبط الموضع الأفقي للشريط الجانبي. على سبيل المثال ، إذا قمت بتغيير القيمة من 100 بكسل إلى 50 بكسل ، فإن الشريط الجانبي يتحرك بعيدًا إلى اليمين بمقدار 50 بكسل.

تحذيرات

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