إضافة صناديق الملاحظات بشكل مميز

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

الدخول على بلوجر 

المظهر 

تعديل THML 

 ابحث عن هذا الكود 

]]></b:skin>

والان سوف تقوم بنسخ الكود الذي بالأسفل  ومن ثم وضعه

  فوق الكلمة التي بالأعلى

/*alert Box By haku */

body{

font-family:Arial, Helvetica, sans-serif;

font-size:13px;

}

.info, .success, .warning, .error, .helo, .dark, .light {

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

}

.info {

color: #00529B;

background-color: #BDE5F8;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFVTZDlXK8LrbskZiXPjIn7I6bCioKMywWsEJMg3vZAtCnPgmHztBasVhauKHLsu8JbsETUTuUoCSeeGeWWQFEl_XrS7I3e97cn6oxEf8suVfj_40DS8uJ7AL2FmZNs1TWnq4U8IKz1Sq/s32/info-147927_640+%25281%2529+%25281%2529.png');

}

.success {

color: #4F8A10;

background-color: #DFF2BF;

background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9WWuDNi2EBN8ps6BwZyw5eE8ApZ5Lds3DuH0NxbzB9nXSuSAywrcR94HRckn8ps05GPZZxfkDvaRXqONtjZNM9-i628iShKUhsQy7tyoaBvxmSRHRK8TOkFiOnhKd7cpMdCDd0JX64y3Q/s32/success.png');

}

.warning {

color: #9F6000;

background-color: #FEEFB3;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6K_IKMSIS8YLIBaboXhRqPe2NsrZ6nvk8yd051n-JRMS0qrMWobk8WcOAjboE9h7quTYSY5EdWtEOVLbJUk81j1fk2uIWBqvf9i6py95VWIpgjoTpgEjbETDzIaS9CT11j_-D-gMTb2O/s32/warning.png');

}

.error {

color: #D8000C;

background-color: #FFBABA;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8ozTMCOEh_YNMQTpb12y94azOKr8q47g9WvdX4VH1PVv5VDEQukkh1SDBpEUuDdmXOnKVPIuZMBBcoU48NakToPk6Pilp79XrWV26Qu8BYqrI_ZA0sfjEEQrnOP8ac3L8rNWUNAiandc/s32/error+-haku.png');

}

.helo {

color: #5b5f69;

background:#848a96;

background-repeat: no-repeat;

background-position: 10px center;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XuKtvG8F6x0jnu8vnMtbHGvXKQKNAfM3JZkLUU8PdbjcqNMT3fJXz_Jd2YOaLjVel7MHS6MkX1BguMK-4k-PRD-xE5-2YeqOzDfavdrIo93EE8YT7HK5Bc3UxtmqJRdnqp3ZvZHD40HK/s32/helo.png');

}

.dark {

color:#1b1e21;

background:#d6d8d9;

background-repeat: no-repeat;

background-position: 10px center;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oAvTze2fX23OyJrz8rKNcE44PO2TiDRu6aMoJr1oYSbJdfhOuiPUt_sqdyuOcTj0FJA7VlCuJ_kaY6veGNJuuynDw1Tw83sv9ZWZejbKr6nhocEMCxZ4AUwFV9xeywKIX-AbHgNmG2To/s32/dark.png');

}

.light {

color: #818182;

background:#fefefe;

background-repeat: no-repeat;

background-position: 10px center;

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfHAlDxfTHJzfYCr3gn-qI7X9b1Kwm8y6AFeSVPFBGUctQqlJhgHxf4CdXmIFIMnDhhbT57mJbqWuTitGgJ6mvyGRb20FsavgEunnnQKw1wxot7NP3FIuuJqHP5VBrAy24CZht-IM0g4h/s32/light.png');

}

طريقة الاستخدام في المقال كالاتي 

أولا الدخول على المقال الذي تريد وبعد ذلك الضغط على 

       علامة القلم

ومن ثم 

عرض HTML 

قم بوضع الكود الذي بالأسفل بالمكان  الذي ترغب به 

<div class="info"> put here </div>

<div class="success">put here</div>

<div class="warning">put here</div>

<div class="error">put here</div>

<div class="helo">put here</div>

<div class="dark">put here</div>

<div class="light">put here</div>

يمكنك تغيير put here 
الى النص الذي تريده 
معرفة النوع الذي تريد يكون كالاتي 
بعد كلمة class يأتي النوع مثل info او error
وقد وصلنا الى نهاية المقال في امان الله