إضافة صناديق التنبية لبلوجر الأنيقة

بسم الله الرحمن الرحيم

أضف صناديق التنبية الإحترافية لمدونتك بشكل جزاب وجميل وهذة المربعات هى هامة لانها تسمح للزائر بقراءة رسالة الإدارة بطريقة ما إذا كان تنوية - أو إخطار - او إشعار هذة الصناديق يمكنك إستخدامها فى أى مكان ما فى مدونتك وايضا فى التدوينات والآن دعنا نشرح لك طريقة التركيب .

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

@font-face {

    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {

    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

.message_box {
text-align:right;
    margin:15px 0;
}

.note {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2sdpA9t3JEhkKWvY79030iGbcMyzgIKhz0y2NmbSlpVXpjSdy6VzlQSR-mfdArt9hnKFCF37S2OjMk-sAN6ZIpmLPVLQBOagwqYfYTNw6TflbjyX42h6nj5p0jQAboRUHmdjaEndgwCSh/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
}

.announce {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrhbjFpKjRfCFPd-2RorGJjWxPjeBMFyUgWkLsNeApRD7ciVpDCBfARo-YtY9vZbTcMJEnDRQdFTZ39t7pdOpbK7F7Uk2ndtysu9bcox5eD9Z6a_1bPIc-8626yxV_o-g7cB1OejsdLGZi/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
}

.success {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUElaSWXiOsDUIWHYMpAsm4SbO3OjRt6k0F4iLWUkWxVayeRpP7TnjWFbApQg7EGVivlVxlG1z29gkybptQdbyqCL5mWUFVMkOFm5NIPCAkHOuiog-wUZuFd7GrGsNb5C0N5YD56janH1c/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
}

.warning {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPNBFWwI1r4nNQ9obMjFdwPbO4gzozlNweSz16tZdoZfLR1dccQu01rAsETLvG7GE9zXgh4Gal6beUZQtPDcz2LWE6Xcm51tp1rOLJ8C7VyBuZIJWKjJTuOvUSql60RO7g7D3K9TpIIh-j/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
}

* ثم قم بحفظ القالب / ولإستخدام الصناديق إستخدم أحد الأكواد التالية حسب رسالتك

<div class="message_box note">
Hi, I am Mr.Noter. I'll notify your readers about the news.
</div>
إعلان
<div class="message_box announce">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>
رسالة عمل ناجح
<div class="message_box success">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>
رسالة تحذير
<div class="message_box warning">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>