اضافة ملاحظات رائعة مع تاثير الطي

اضافة ملاحظات رائعة  مع تاثير الطي - ربما اغلب المدونين واصحاب المواقع يريدون ان يكتبو ملاحظة لزوارهم يوصلون فيها فكرة ما لزوارهم، وكما نعلم اي ملاحظة يجب انت تكون ملفتة وجميلة للنظر لحتى ينتبه لها الزائر وينتبه للمحتوى الذي في الملاحظة، لذالك علينا القول بان هذه الاضافة الخفيفة مهمه للكثير من المدونين واصحاب المواقع 

• معاينة

طريقة التركيب
1- قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم ]]></b:skin> واضف الكود التالي فوقة / قبلة

/* CSS Note by qaisi web */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{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}

2- قم بحفظ القالب

لأضافة الملاحظة

الملاحظة متوفرة باربع الوان يمكنك ببساطة اضافة احداهم باضافة كود HTML الخاص بها

1. ملاحظة باللون الاخضر

<div class='note'>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة...</div>

2. ملاحظة باللون البرتقالي

<div class='note orange'>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة...</div>

3. ملاحظة باللون الازرق

<div class='note river'>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة...</div>

1. ملاحظة باللون الاحمر

<div class='note crusta'>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة...</div>

إقرأ أيضًا
دمج ثلاث أنظمة التعليقات بلوجر فيسبوك Disqus

ان واجهت اي مشاكل فباب التعليقات مفتوح . . . بالتوفيق 😍

اضافة ملاحظات رائعة  مع تاثير الطي - ربما اغلب المدونين واصحاب المواقع يريدون ان يكتبو ملاحظة لزوارهم يوصلون فيها فكرة ما لزوارهم، وكما...