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

السلام عليكم

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

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

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
وهناك موقع للألوان وكل لون له كود خاص به لتختار اللون الذي يعجبك ورابطه
background-color هو المسؤول عن الخلفية وتغير اللون بنفس الطريقة السابقة
الفكرة من كل هذا أنه يجب أن يكون نصك الذي سيكون بداخل الصندوق بين 
<div class="islamink">
وبين
</div>
فإذا لم تفهم فقد شرحت كل ما في المقال في فيديو على اليوتيوب ورابطه

مواضيع ذات صلة

إرسال تعليق