كيف تضع نص معين في صندوق لإعطاء موقعك لمسة جميلة مثل الذي بالصورة؟
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;}
فيصبح شكله هكذا
![كيفية وضع نص بداخل صندوق في بلوجر كيفية وضع نص بداخل صندوق في بلوجر](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHBJOjyqEp-FzND07Gmy1Hn2RS-qvJfigIv4iQDXwJfCaFb5v3ac_NzQMY7TtkjjnoyHj_RiedhIdmEmiB0Gng-aAoaGiraEQBBledY2xkSTxUMEKfDsfYzkbvRdQg8cr4oaANAw4tnssI/s16000/Capture.webp)
2- الآن ستذهب إلى إنشاء منشور جديد وعلى سبيل المثال كتبنا في المنشور كلمة (بلوجر) ونريد وضعها في صندوق فهنا نحدد كلمة (بلوجر) ونجعلها خط عادي كما في الصورة
![كيفية وضع نص بداخل صندوق في بلوجر كيفية وضع نص بداخل صندوق في بلوجر](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_L0qBlIpwUhaYeRnjTdZBipdsGd7euLHkKDHK0RcGBm-zr0_0ewIDs5PvVmWpALzACpOLxikTuv6-_t1lQfzI4nH0PztEZmYAgC6v0EhDkGp6aHoaEREZhB523BRPRcNXjrgpU8LLmllJ/s16000/Capture.webp)
3- وبعدها نضغط على زر القلم كما في الصورة
![كيفية وضع نص بداخل صندوق في بلوجر كيفية وضع نص بداخل صندوق في بلوجر](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4Zlgvtqq5jv-5ISAC_avnR8hLR4fbShmY2BC4GPuGAoXKar09rdYdN1Snqgq7X7WmRvvaJ2Dr1Pd2ZHX0JP_b7HnM3jQftAeb9K4OvpNrn34UEEH4TCi0lPdD566zyitY2ce7r9G7R_Q/s16000/Capture.webp)
ونختار عرض HTML وسترى في هذا الوضع كلمة بلوجر بين أكواد على هذا الشكل
<div style="text-align: right;"> بلوجر</div>
فتضيف هذا الكود
class="islamink"
بين كلمة style وdiv أو بعد div فيصبح الكود النهائي
<div class="islamink" style="text-align: right;"> بلوجر</div>
4- اضغط نشر وسيظهر هكذا للناس كما في الصورة
![كيفية وضع نص بداخل صندوق في بلوجر كيفية وضع نص بداخل صندوق في بلوجر](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGjP7xZ4IgzY1Z7yHXEZt_33oKrCgtVe2ZS2DDZZlOpltdkMj15gd5J2LLoBuyF3QKZlaxsb5IDa2b838hZcaSIp24oJ2cj2C6rqM8Xrx3KqNjmohfiGsDQ37BRmKcEIM8WNOJ8raI7Mm/s16000/Capture.webp)
بالنسبة لحجم الخط بداخل هذا الصندوق ولون الخلفية وأيضا لون العامودين على اليمين وعلى اليسار فنعود إلى هذا الكود الذي في الخطوة الأولى
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
وهناك موقع للألوان وكل لون له كود خاص به لتختار اللون الذي يعجبك ورابطه
background-color هو المسؤول عن الخلفية وتغير اللون بنفس الطريقة السابقة
الفكرة من كل هذا أنه يجب أن يكون نصك الذي سيكون بداخل الصندوق بين
<div class="islamink">
وبين
</div>
فإذا لم تفهم فقد شرحت كل ما في المقال في فيديو على اليوتيوب ورابطه