مربعات لكتابة ملاحظة او تحذير لمدونات بلوجر

الاضافة بسيطة جدا فقط ركز وتابع معى خطوة بخطوة 

(1)     اذهب الى لوحة التحكم

 ثم اختر  القالب  ثم تحرير Html

 (2) ابحث عن    ]]></b:skin>

ثم اضف قبله مباشرة هذا الكود

<style type="text/css"> /* Shortcode - AA9.SA */ /* ملاحظة */ .note { padding: 5px; color: #666; border: 1px solid #e6c555; direction: rtl; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 60%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; background: #ffffcc url('http://static.tumblr.com/zjltkmo/aHomducon/note.png') no-repeat 99% center; } .note p { padding-right: 50px; padding-top: 8px; text-shadow:1px 1px 0px #ffffde; color: #cdaf4b; } /* تحذير */ .warning { padding: 5px; color: #c31b00; border: 1px solid #ff9999; direction: rtl; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 60%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; background: #ffcccc url('http://static.tumblr.com/zjltkmo/blvmdud1n/warning.png') no-repeat 99% center; } .warning p { padding-right: 50px; padding-top: 10px; color: #a26060; text-shadow:1px 1px 0px #ffdddd; } /* معلومات */ .info { padding: 5px; color: #00aeff; border: 1px solid #68a2cf; direction: rtl; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 60%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; background: #bfe4f9 url('http://static.tumblr.com/zjltkmo/oQamdud2b/info.png') no-repeat 99% center; } .info p { padding-right: 50px; color: #5487a4; padding-top: 8px; text-shadow:1px 1px 0px #d8f0fe; } /* جديد */ .new { padding: 5px; color: #00aeff; border: 1px solid #dadada; direction: rtl; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 60%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; background: #f7f7f7 url('http://static.tumblr.com/zjltkmo/yrAmdud2z/new.png') no-repeat 99% center; } .new p { padding-right: 50px; color: #5487a4; padding-top: 8px; text-shadow:1px 1px 0px #d8f0fe; } /* تحميل */ .download { padding: 5px; color: #666; border: 1px solid #c2d7a1; direction: rtl; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; width: 60%; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; background: #e6f6cc url('http://static.tumblr.com/zjltkmo/7Lpmdud3k/download.png') no-repeat 99% center; } .download p { padding-right: 50px; color: #4a60b7; text-shadow:1px 1px 0px white; padding-top: 5px; } .download p a { color: #70983f; text-shadow:1px 1px 0px #efffdc; text-decoration: none; } .download p a:hover { color: #486623; text-shadow:1px 1px 0px #efffdc; } </style>

(3) ثم اذهب للتخطيط اضغط اضافة اداة

 Html/Javascript 

لعمل ملاحظــــــــــــة 

اضف الكود التالى فى أداة الـ  Html/Javascript

<div class="info"><p>ضع الكلام هنا</p></div>

-----------------------------------------------------------------

لعمل تنبيه

اضف الكود التالى فى أداة الـ  Html/Javascript 

<div class="warning"><p> ضع الكلام هنا </p></div>

-----------------------------------------------------------------

لعمل اقتراح لتحميل برنامج أو ما شابه ذلك

اضف الكود التالى فى أداة الـ  Html/Javascript 

<div class="download"><p>ضع الكلام هنا</p></div>