صناديق تحذيريه وتنبيه بتقنية css3 حصريا

صناديق تحذيريه وتنبيه بتقنية css3 حصريا

mohamed-alaa

الجمعة، 30 مايو 2014

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

عندما إنتهيت من تكويد هذه الإضافة أحببت أن أشارك معكم هي إضافة فريدة من نوعها وهي صناديق تحذيريه وتنبيهيه أتمنا أن تنال إعجابكم .

مثال مباشر

اقرأ ايضا

• كيف تحمي محتويات مدونتك من السرقة
• صناديق تحذيريه وتنبيه بتقنية css3 حصريا
• كود رمضان أسفل المدونة

يمكنك تغيير هذا النص بما تريده !!

يمكنك تغيير هذا النص بما تريده !!

يمكنك تغيير هذا النص بما تريده !!

طريقة إضافتها إلى مدونتكم :

1- الذهاب إلى قالب .

2- ثم إبحت عن /head .

3- وأضف الكود التالي  فوقه. 

 الكود :

<style>/*Blok*/ .note,.alert,.instruction {position:relative;width:220px; display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:13px;border-bottom:2px solid rgba(0,0,0,.1)} .note p,.alert p,.instruction p {margin:0px} .note {background-color:#FCD683} .alert {background-color:#db6161} .alert a,.alert code {color:#FFC0A7} .instruction {background-color:#58C99D} .instruction a,.instruction code {color:#C4FCE5} .note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,);font-size:22px;line-height:1} .note:before {content:"\f040"} .alert:before {content:"\f071"} .instruction:before {content:"\f05a"} </style><link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

4- ثم أضف الكود التالي في أي مكان تريد .

<div class="note"> يمكنك تغيير هذا النص بما تريده !! </div> <div class="instruction"> يمكنك تغيير هذا النص بما تريده !! </div> <div class="alert"> يمكنك تغيير هذا النص بما تريده !! </div>

أريد طلب واحد هو ترك التعليق