كيفية وضع نص بداخل صندوق في بلوجر؟

السلام عليكم

كيف تضع نص معين في صندوق لإعطاء موقعك لمسة جميلة مثل الذي بالصورة؟

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

]]></b:skin>

تنسخ الكود الآتي وتضعه فوق الوسم

div.islamink{
  font-size: 22px;
  border-right: 5px solid #4285F4; 
  border-left: 5px solid #4285F4;
  white-space: pre-line;
  padding: 8px 10px;
  background-color: #f1f5f9;
} 

فيصبح شكله هكذا

2- الآن ستذهب إلى إنشاء منشور جديد وعلى سبيل المثال كتبنا في المنشور كلمة (بلوجر) ونريد وضعها في صندوق فهنا نحدد كلمة (بلوجر) ونجعلها خط عادي كما في الصورة

3- وبعدها نضغط على زر القلم كما في الصورة

ونختار عرض HTML وسترى في هذا الوضع كلمة بلوجر بين أكواد على هذا الشكل

<div style="text-align: right;">&nbsp;بلوجر</div>

فتضيف هذا الكود

class="islamink"

بين كلمة style وdiv أو بعد div فيصبح الكود النهائي

<div class="islamink" style="text-align: right;">&nbsp;بلوجر</div>

4- اضغط نشر وسيظهر هكذا للناس كما في الصورة

بالنسبة لحجم الخط بداخل هذا الصندوق ولون الخلفية وأيضا لون العامودين على اليمين وعلى اليسار فنعود إلى هذا الكود الذي في الخطوة الأولى

div.islamink{
  font-size: 22px;
  border-right: 5px solid #4285F4; 
  border-left: 5px solid #4285F4;
  white-space: pre-line;
  padding: 8px 10px;
  background-color: #f1f5f9;
} 

font-size هو حجم الخط فإذا غيرتها وجعلتها مثلا 23 أو 24 فسيزداد حجم الخط والعكس صحيح

border-right هو العامود الأزرق على اليمين فإذا غيرت قيمة 5 وجعلتها 6 أو 7 سيزداد سمك العامود والعكس صحيح وإذا أردت تغير لونه فغير

#4285F4

وهناك موقع للألوان وكل لون له كود خاص به لتختار اللون الذي يعجبك ورابطه

https://www.color-hex.com/

background-color هو المسؤول عن الخلفية وتغير اللون بنفس الطريقة السابقة

الفكرة من كل هذا أنه يجب أن يكون نصك الذي سيكون بداخل الصندوق بين 

<div class="islamink">

وبين

</div>

فإذا لم تفهم فقد شرحت كل ما في المقال في فيديو على اليوتيوب ورابطه

https://youtu.be/Pz17fqIz6jQ