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

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

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

معاينة

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

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>

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

1/06/2016

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 1/06/2016 19 تعليقات