إنشاء محتويات عائمة في ووردبرس

يتيح ووردبرس لمستخدميه إمكانية كتابة تعليمات CSS في محتوى التدوينات و الصفحات و الصناديق الجانبية، و هذه ميزة رائعة فهي تمكن المستخدم من القيام بالكثير من التعديلات في مدونته.
لا أريد أن أطيل، سأتحدث عن كيفية إنشاء صندوق عائم في المدونة كالذي أضفته اليوم على اليسار و هو يحوي روابط كصور تقود إلى حساباتي في فلكر و تويتر و خلاصات المدونة بالإضافة إلى الابتسامة التي تؤدي إلي هذه التدوينة.
لإنشاء محتوى عائم في الصفحة نستخدم تعليمة position في CSS بالإضافة لـ left, right, top, bottom تأخذ الخاصية position القيم relative, absolute, fixed ، لجعل المحتوى في موضع مطلق بالنسبة للصفحة ثم نتحكم بهذا الموضع نستخدم absolute و لجعل المحتوى مثبت نستخدم fixed ثم نحدد المكان بالضبط من خلال left, right, top, bottom

مثال:

<div style="position:absolute;top:10px;right:10px;">
Hello
</div>

مثال 2:
<div style="position:fixed;top:300px;left:0;color:white;
width:100px;height:100px;background-color:red;">
Hello 2
</div>

نكتب هذه التعليمات في صندوق من نوع نص في لوحة تحكم ووردبرس، يمكن القيام بالكثير من الأشياء المشابهة، يمكن مثلا إنشاء شيء مشابه يظهر في تدوينة معينة فقط (قد أكتب تفصيلات أكثر لاحقا) كتبت الآن موجزا سريعا.

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

Advertisements

الأوسمة: , , , , , ,

9 تعليقات to “إنشاء محتويات عائمة في ووردبرس”

  1. دعدوشة Says:

    معلومات حلوة
    هممم هلا سلام لاتزعل مني بس هالصناديق العائمة الي حاططها بمدونتك بتعمل تشويش للقارئ ..

  2. salam Says:

    اهلين دعدوشة، شو المتصفح اللي بتستخدميه؟ أنا عم ظن أنو عالانترنت اكسبلورر صاير مجازر

  3. lightred Says:

    حاولت وماطلع شي يمكن مافهمت عليك ..!! :p

    ماعرفت وين بدي ضيف المحتوى داخل لوحة التحكم

    • salam Says:

      عندك في لوحة التحكم قسم المظهر ثم مربعات القائمة الجانبية، تضيف صندوق نوع نص (نص Arbitrary أو HTML ) ثم تكتب ضمنه.

  4. benetat Says:

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

  5. samar Says:

    لم أفهم المقصود بالمحتوى العائم؟؟؟

    • salam Says:

      محتوى يتم وضعه في الصفحة بشكل عائم و ثابت أي له خواص CSS مثل float و position كما هو الحال مع المحتويات على اليسار في الأعلى في الصفحة الرئيسية لهذه المدونة.

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: