الثلاثاء، 19 مارس 2019

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

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

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

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


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

  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>

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


إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *