كيفية كتابة كود HTML داخل إطار جميل في بلوجر

السلام عليكم
هناك مدونات كثيرة تهتم باضافات البلوجر وتطوير المدونات وعند شرح الاضافات يضعون أكواد للبحث عليها لكن لا يعرفون كيف يضعونها داخل اطار جميل ،ولذلك سأقوم بشرح كيف تضع النص أو الكود داخل اطار بطريقة سهلة.
شرح طريقة تركيب الإضافة :
 1- عند كتابة الكود قم بالضغط على اشارة HTML كما في الصورة:

2- ثم ضع الكود التالي فيه:

       <div style="background: #F9A39A url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh72Hvk_tdYPJRG0wWvYVFUrekIM-Ldjj5o5J5M5vF0XUJMNK7MHKsMgJ9JFvpf_vWhhnysL6Tdv6tpGLyQll7z8cyhw_42fj3TPTe1wPj1rVKV-KPllYsTEYG64m0DxvoJA5lCYxmYGBY/s1600/hanafi.png) no-repeat bottom center; border-bottom: 1px solid #E74C3C; border-left: 1px solid #E74C3C; border-right: 1px solid #E74C3C; border-top: 1px solid #E74C3C; box-shadow: 0px 0px 10px; margin: 0 20px; overflow: auto; padding: 10px 20px 40px 20px; word-wrap: break-word;">
<div dir="ltr" style="text-align: left;">
<div style="text-align: center;">
<b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;اكتب الكود الذي تريده هنا</b></div>
</div>
<div dir="ltr" style="text-align: left;">
</div>

3- قم بتغيير ما باللون الأخضر  برابط الصورة.
وما باللون الأحمر بلون الحدود الجانبية.

نهاية الدرس بالتوفيق و إلى قادم الدروس إن شاء الله