6 يناير 2016

مدون محترف اضافات بلوجر CSS إضافة الملاحظات داخل ورقة مطوية في بلوجر

إضافة الملاحظات داخل ورقة مطوية في بلوجر

إضافة الملاحظات داخل ورقة مطوية في بلوجر - من منا لم يحتاج يوماً إلى إضافة مُلاحظات داخل مواضيع او رسائل تنبيهية في مقاله من أجل تنبيه الزوار او التركيز على فقرة معينة داخل المقال، على ما أظن الجميع.

من منا لم يحتاج يوماً إلى إضافة مُلاحظات داخل مواضيع او رسائل تنبيهية في مقاله من أجل تنبيه الزوار او التركيز على فقرة معينة داخل المقال

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


تركيب الإضافة

  1. ندخل إلى لوحة تحكم بلوجر
  2. نضغط على تبويب قالب
  3. ثم نضغط على تحرير HTML


ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Note */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71; direction: rtl;overflow:hidden}
.note.orange{direction: rtl;background:#f39c12}
.note.crusta{direction: rtl;background:#F2784B}
.note.river{direction: rtl;background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

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

<div class='note'>...هنا اكتب ما تشاء...</div>
<div class='note orange'>...هنا اكتب ما تشاء...</div>
<div class='note river'>...هنا اكتب ما تشاء...</div>
<div class='note crusta'>...هنا اكتب ما تشاء...</div>

اتمنى ان يكون الموضوع اعجبكم
ولا تنسوا مشاركته مع اصدقائكم عبر الأزرار في الأسفل


مواضيع ذات صلة
إضافة الملاحظات داخل ورقة مطوية في بلوجر
4 / 5
بواسطة

هناك 19 تعليقًا :

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اعتذر لمسح التعليق صديقي بسبب الرابط
      ولكن عن اي اقسام تقصد

      حذف
    2. مثال المسافة الفاصلة بين السايد بار و شريط أخر الأخبار و غورها تلك الفراغات

      حذف
    3. صديقي انصحك بعدم تغيير المسافات لإن هذا قد يؤثر على تجاوب القالب

      حذف
  2. ما شاء الله منير كن، باركك الله على الإضافة الجميلة
    والله احترافية وبسيطة في نفس الوقت :) بالمناسبة.. أيمكن
    وضعها كملاحظةٍ داخلها في أداة بلوجر ع السايدبار يا ترى؟ :3

    ردحذف
    الردود
    1. مرورك الجميل صديقي
      تقريباً يُمكنك وضعها في السايدبار
      بواسطة اداة HTML\JavaScript
      ويُمكنك التحكم بالعرض من خلال Width

      حذف
  3. شكراً لك يامنير دائماً مواضيعك مميزة في انتظار جديدك.

    ردحذف
    الردود
    1. لا شكر على واجب صديقي
      يسعدني مرورك على مواضيعي =r

      حذف
  4. #حملة_شاركنا_لندعمك - تم نشر موضوع في مدونتي

    ردحذف
    الردود
    1. تم التعليق بمدونتك
      ولكن صديقي لا يتم نشر الهاشتاغ هنا
      اتمنى قراءة تعليمات الموضوع بعناية

      حذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر منك صديقي لا ننشر روابط إشهار

      حذف
  6. لا شكر على واجب صديقي

    ردحذف
  7. جزاك الله خيرا على هذه الإضافة
    الحقيقة انا استفيد كثيرا من مدونتك ربنا يبارلك فيها ويجازيك كل خير على عملك الجاد

    ردحذف
    الردود
    1. وجزالك الله خيرًا انت ايضًا صديقي
      شكرًا لك وأتمنى أنّ اكون عند حُسن ظنك دائمًا وأنّ تستفاد من المدونة

      حذف
  8. السلام عليكم أخي
    تدوينة رائعة ولكني سوف اخرج خارج الموضوع
    هذا الكود مسؤل عن ظهور الادوات اسفل او اعلي التدوينة انا اريد الكود المسؤل بوضع الادوات بالجانب اي بالسايدر بار

    ردحذف
    الردود
    1. وعليكم السلام
      قم بعمل الإضافة وجرب وضعها في الجانب ،السايدبار
      بعد فعل هذا تقريبًا يجب عليك التعديل على width ,hight

      حذف
    2. شكرا للاهتمامك هناك اضافة معلومات عن التدوينة الكود الخاص بها يوضع اسفل كل تدوينة انا اريد جعل الكود في السايدبار وحاولت وضعها من التخطيط ولكن اخذت تظهر في الرئيسية واصبحت لا تعرض بيانات التدوينة

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

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r