حصريا اضافة اداة ملاحظات بشكل احترافي جدا

السلام عليكم و رحمة الله تعالى و بركاته

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

صورة عن الاضافة:

طريقة التركيب:

اولا ابحث في قالب مدونتك على الوسم ]]></b:skin> و ضع الكود التالي فوقه:

.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>

و مبروووووووك الاضافة الجديدة

شارك المقال

شاركه على فيسبوك