أخر المواضيع

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

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



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


قم بالدخول الى تحرير قالب مدونتك وابحث عن هذه الوسم ]]></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}

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



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


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


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

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

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

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

و الله الموفق 

ليست هناك تعليقات