الصفحة الرئيسية
إضافات
افكار

كيفية إضافة صندوق تصميم مادي إلى قالب بلوجر (Materialize)

هل تبحث عن صندوق تصميم مادي لـ Blogger؟ ستعلمك هذه المقالة كيفية إضافة صندوق تصميم مادي بألوان متدرجة إلى قالب Blogger الخاص بك.
جمال الحزازي
Split Post - Split Article Into Several Pages
كيفية إضافة صندوق تصميم مادي إلى قالب بلوجر (Materialize)

السلام عليكم ورحمة الله وبركات

يعد صندوق التصميم المادي وسيلة رائعة لتجزئة أقسام منشورات مدونتك. هناك نوعان من صناديق التصميم المادي التي يمكنك استخدامها: الأول هو صندوق بتدرجات لونية، والآخر هو صندوق بلون ثابت.

في هذه المقالة، سأوضح لك كيفية استخدام كل من صندوق التصميم المادي بالألوان المتدرجة وصندوق التصميم المادي بالألوان الثابتة في Blogger.

ما هو صندوق التصميم المادي؟

تعتبر صناديق التصميم المادي وسيلة رائعة لإضافة جاذبية بصرية إلى منشورات مدونتك، مما يجعلها أكثر تفاعلاً مع قرائك. يمكن استخدامها لتسليط الضوء على المعلومات الهامة، أو أزرار الدعوة إلى العمل، أو لإضفاء لمسة جمالية على مدونتك.

معاينة في UnPlug

فوائد صناديق التصميم المادي

تقدم صناديق التصميم المادي عدة فوائد لمستخدمي Blogger، منها:

  • تحسين الجاذبية البصرية: يمكن أن تجعل صناديق التصميم المادي منشورات مدونتك أكثر جاذبية وتشويقاً لقرائك. كما يمكنها تقسيم النص وجعله أسهل في القراءة.
  • مرونة أكبر: يمكن استخدام صناديق التصميم المادي لإنشاء تأثيرات متعددة، من صناديق النصوص البسيطة إلى التخطيطات المعقدة، مما يمنحك مرونة أكبر عند تصميم منشوراتك.
  • زيادة التحويلات: يمكن استخدام صناديق التصميم المادي لتسليط الضوء على المعلومات الهامة، مثل أزرار الدعوة إلى العمل أو العروض الخاصة، مما قد يساعد في زيادة التحويلات وتحسين أداء مدونتك بشكل عام.

إليك بعض الأمثلة عن كيفية استخدام صناديق التصميم المادي لتحسين مدونتك على Blogger:

  • تسليط الضوء على الإعلانات الهامة أو الأخبار: استخدم صندوق التصميم المادي لتسليط الضوء على الإعلانات أو الأخبار الهامة على الصفحة الرئيسية لمدونتك، لضمان وصول القراء إلى المعلومات الأساسية أولاً.
  • الترويج للعروض الخاصة أو الخصومات: استخدم صندوق التصميم المادي للترويج للعروض الخاصة أو الخصومات في منشورات مدونتك، مما قد يساعد في زيادة المبيعات وتحقيق إيرادات إضافية لنشاطك التجاري.
  • تشجيع القراء على الاشتراك في النشرة الإخبارية: استخدم صندوق التصميم المادي لتشجيع قرائك على الاشتراك في النشرة الإخبارية، مما يمكن أن يساعد في بناء قائمتك البريدية وزيادة التفاعل مع مدونتك.
  • عرض محفظة الأعمال أو نماذج العمل: إذا كنت مستقلاً أو صاحب عمل، يمكنك استخدام صناديق التصميم المادي لعرض محفظة أعمالك أو نماذج من عملك على مدونتك، مما يجذب عملاء جدد ويعزز من خدماتك.

بشكل عام، تُعتبر صناديق التصميم المادي أداة متعددة الاستخدامات وقوية يمكن استخدامها لتحسين مدونتك على Blogger بعدة طرق. باستخدام هذه الصناديق، يمكنك جعل مدونتك أكثر جاذبية بصرياً وفعالة.

نصائح إضافية لتصميم صناديق مميزة

  • تنسيق النصوص داخل الصندوق: استخدم خطوطاً وألواناً تتناسب مع تصميم الصندوق لتعزيز جاذبية المظهر.
  • استخدام الصور والأيقونات: أضف صوراً أو أيقونات داخل الصندوق لجعله أكثر تفاعلاً.
  • التجاوب مع الأجهزة المختلفة: تأكد من أن الصناديق تبدو جيدة على جميع الأجهزة والشاشات.

كيفية إضافة صندوق تصميم مادي إلى منشور مدونتك على Blogger باستخدام كود CSS و HTML مخصص

تعتبر صناديق التصميم المادي وسيلة رائعة لإضافة جاذبية بصرية وأسلوب مميز إلى منشورات مدونتك على Blogger. باستخدام صناديق التصميم المادي، يمكنك جعل مدونتك أكثر جاذبية بصريًا وفعالة، مما يزيد من تفاعل القراء وتحسين تجربة المستخدم.جمال الحزازي

شيفرة CSS

(قبل كل شئ احتاج الى تذكريك على اخذ نسخة احتياطية لقالب مدونتك) و ايضا اضف تعليقات توضيحية لكل شيفرة تقوم باضافتها التعليق المناسب لاكواد CSS /*... addons ...*/

/* wiki box */
.wikibox {
	background:#fff;
	position:relative;
	margin:40px 2px;
	padding:40px 15px 15px;
	border:1px solid rgba(230,230,230,1);
	border-radius:5px;
	box-shadow:0 10px 20px 0 rgba(30,30,30,0.07)
}
.drK .wikibox {
	box-shadow:none;
	background:#2d2d30
}
.wikibox h2 {
	border-radius:3px;
	padding:8px 20px !important;
	position:absolute;
	margin:0 !important;
	font-size:17px !important;
	color:#fff;
	top:-20px;
	font-weight:bold;
	left:30px;
	text-transform:uppercase
}
.wikibox.box-red h2 {
	background:#ff3333
}
.wikibox.box-yellow h2 {
	background:#e2d301
}
.wikibox.box-blue h2 {
	background:#2a86d2
}
.wikibox.box-green h2 {
	background:#02d07a
}
.wikibox.box-redSG h2 {
	background:linear-gradient(to right,#ff0033,#ff6633)
}
.wikibox.box-blueSG h2 {
	background:linear-gradient(90deg,#7e04ff,#02fbff)
}
.wikibox.box-yellowSG h2 {
	background:linear-gradient(to right,#f12711,#f5af19)
}
.wikibox.box-greenSG h2 {
	background:linear-gradient(to right,#11998e,#38ef7d)
}
[dir="rtl"] .wikibox h2 {
	right:30px;
	left:auto
}
[dir="rtl"] .wikibox.box-red h2 {
	background:#ff3333
}
[dir="rtl"] .wikibox.box-yellow h2 {
	background:#e2d301
}
[dir="rtl"] .wikibox.box-blue h2 {
	background:#2a86d2
}
[dir="rtl"] .wikibox.box-green h2 {
	background:#02d07a
}
[dir="rtl"] .wikibox.box-redSG h2 {
	background:linear-gradient(to left,#ff0033,#ff6633)
}
[dir="rtl"] .wikibox.box-blueSG h2 {
	background:linear-gradient(270deg,#7e04ff,#02fbff)
}
[dir="rtl"] .wikibox.box-yellowSG h2 {
	background:linear-gradient(to left,#f12711,#f5af19)
}
[dir="rtl"] .wikibox.box-greenSG h2 {
	background:linear-gradient(to left,#11998e,#38ef7d)
}

هذا الكود CSS مخصص لتنسيق عنصر يحتوي على صناديق (wikibox) في صفحة الويب. سأشرح جميع العناصر والخصائص والمتغيرات فيه:

  • .wikibox: هذه هي الفئة الرئيسية للصندوق. الخصائص المحددة لها هي:
    - background: #fff; يجعل خلفية الصندوق بيضاء.
    - position: relative; يجعل موضع الصندوق بالنسبة لمكانه الطبيعي.
    - margin: 40px 2px; يحدد الهامش الخارجي للصندوق (40 بكسل في الأعلى والأسفل و2 بكسل على الجانبين).
    - padding: 40px 15px 15px; يحدد الحشو الداخلي للصندوق (40 بكسل في الأعلى و15 بكسل على الجانبين وفي الأسفل).
    - border: 1px solid rgba(230,230,230,1); يضيف حد للصندوق بلون رمادي خفيف.
    - border-radius: 5px; يجعل حواف الصندوق مستديرة.
    - box-shadow: 0 10px 20px 0 rgba(30,30,30,0.07); يضيف ظل للصندوق.
  • .drK .wikibox: هذه الفئة الفرعية تغير مظهر الصندوق عندما يكون داخل عنصر يحتوي على الفئة drK.
    - box-shadow: none; يزيل الظل.
    - background: #2d2d30; يغير خلفية الصندوق إلى اللون الرمادي الداكن.

    • يمكنك استبدال اسم المعلمة المستخدمو لتفعيل الوضع الداكن حسب القالب الذي تستخدمه. على سبيل المثال، يستخدم قالب "سيو بلاس" المعلمة dark-mode، بينما يستخدم قالب "سكويز" المعلمة dm.

  • .wikibox h2: هذه الفئة تتحكم في تنسيق العناوين داخل الصندوق.
    - border-radius: 3px; يجعل حواف العنوان مستديرة.
    - padding: 8px 20px !important; يضيف حشواً داخلياً للعنوان.
    - position: absolute; يجعل موضع العنوان مطلقاً بالنسبة للصندوق.
    - margin: 0 !important; يزيل الهامش الخارجي.
    - font-size: 17px !important; يحدد حجم الخط.
    - color: #fff; يجعل لون النص أبيض.
    - top: -20px; يحدد موضع العنوان 20 بكسل فوق موضعه الطبيعي.
    - font-weight: bold; يجعل النص عريضاً.
    - left: 30px; يحدد موضع العنوان من الجهة اليسرى.
    - text-transform: uppercase; يجعل النص كله بأحرف كبيرة.
  • ألوان الفئات المختلفة:
    - .wikibox.box-red h2: يجعل خلفية العنوان أحمر.
    - .wikibox.box-yellow h2: يجعل خلفية العنوان أصفر.
    - .wikibox.box-blue h2: يجعل خلفية العنوان أزرق.
    - .wikibox.box-green h2: يجعل خلفية العنوان أخضر.
    - .wikibox.box-redSG h2: يضيف تدرج لوني من الأحمر إلى البرتقالي.
    - .wikibox.box-blueSG h2: يضيف تدرج لوني من الأرجواني إلى الأزرق الفاتح.
    - .wikibox.box-yellowSG h2: يضيف تدرج لوني من الأحمر إلى البرتقالي.
    - .wikibox.box-greenSG h2: يضيف تدرج لوني من الأخضر إلى الأخضر الفاتح.
  • تعديل الفئات حسب اتجاه النص:
    - [dir="rtl"] .wikibox h2: عند الاتجاه من اليمين إلى اليسار، يغير موضع العنوان ليكون من الجهة اليمنى (right: 30px; left: auto).
    - ألوان الفئات المختلفة عند الاتجاه من اليمين إلى اليسار:
    - .wikibox.box-red h2: خلفية حمراء.
    - .wikibox.box-yellow h2: خلفية صفراء.
    - .wikibox.box-blue h2: خلفية زرقاء.
    - .wikibox.box-green h2: خلفية خضراء.
    - .wikibox.box-redSG h2: تدرج لوني من الأحمر إلى البرتقالي (باتجاه اليسار).
    - .wikibox.box-blueSG h2: تدرج لوني من الأرجواني إلى الأزرق الفاتح (270 درجة).
    - .wikibox.box-yellowSG h2: تدرج لوني من الأحمر إلى البرتقالي (باتجاه اليسار).
    - .wikibox.box-greenSG h2: تدرج لوني من الأخضر إلى الأخضر الفاتح (باتجاه اليسار).

هذه هي العناصر والخصائص المختلفة في الكود، وأيضًا التعديلات على الألوان والاتجاهات النصية داخل الصناديق.

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

لإضافة صندوق تصميم مادي إلى منشور مدونتك على Blogger باستخدام كود CSS و HTML مخصص، اتبع الخطوات التالية:

الخطوة 1: قم بتسجيل الدخول إلى لوحة التحكم بلوجر وانتقل إلى المظهر ثم تخصيص انقر على السهم ثم اختر تعديل HTML.

الخطوة 2: ابحث عن ]]></b:skin> والصق الكود CSS فوقه. إدا كنت تستخدم الحاسوب او كيبورد احترافي على الجوا انقر على Ctrl + F في بعض الحالات يعبر عن زر Ctrl بهدا الرمز ⌘ عنه هكدا ⌘ + F

الخطوة 3: بمجرد لصق الكود، احفظ التغييرات بالنقر فوق هذا الرمز

الخطوة 4: إذا كنت تستخدم قالب Blogger آخر كقالب سيو بلاس او سكويز او اي قالب غير Plus UI أو Median UI أو Lantro أو Fletro Pro أو قالب مشابه، فانسخ والصق الكود أدناه أيضًا.

.Blog table.tr-caption-container{min-width:inherit;width:auto;margin:0 auto;border:0;position:relative}.Blog table.tr-caption-container tr td{background-color:transparent;border:0;padding:0}.Blog table.tr-caption-container tr:nth-child(2n+1) td,.Blog table.tr-caption-container tr:nth-child(2n+1) td:first-child{border:0;background:transparent}.Blog table.tr-caption-container .tr-caption{display:block;font-size:12px;font-style:italic;color:#767676;background-color:transparent;border:0}.Blog table{width:100%;margin:20px 0;border:1px solid rgba(230,230,230,1);border-radius:7px;overflow:hidden;font-size:14px}.Blog table th{background-color:transparent;padding:15px 20px;border:1px solid #ddd;border-left:0;font-family:Noto Sans;font-size:13px}.Blog table th:last-child,.Blog table tr td:last-child,.Blog table tr:nth-child(2n) td:last-child{border-right:0}.Blog table td{padding:15px 20px;border:1px solid #ddd;border-left:0;border-top:0;vertical-align:middle}.Blog table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.025)}.Blog .table{display:block;overflow-y:hidden;overflow-x:auto;border-radius:3px;scroll-behavior:smooth}

الشيفرة هي عبارة عن تصميم لجدول html على بلوجر.

سبق و نطرقنا في مقال سابق عن استخدام جداول بتصميم احترافي على بلوجر. (يمكنك العودة الى هذا المقال للقراءة و الفهم الشيفرة الاضافية ) المقال تحت عنوان [استخدام الجداول في بلوجر (Tables HTML)]

اذا كنت تستخم الهاتف انصحك بتنزيل نسخة للقالب و كرر النسخ لنسختين بعدها افتح محرر النصوص انصحك بتطبيق [Quick Editor+] واضف التعديلات اما اذا كنت تريد تطبيق التعديلات مباشرة من لوحة التحكم انصحك بتنزيل تطبيق [Hacker's Keyboard] نظرا لوجود جميع الاختصارات الموجودة في لوحة مفاتيح الحاسوب كاختصار البث و النسخ و اللصق و التحديد...

كيفية استخدام صندوق التصميم المادي في منشور مدونتك على Blogger

بعد إضافة صندوق التصميم المادي CSS إلى قالب Blogger، حان الوقت لاستخدام الصندوق في منشور مدونتك. اتبع الخطوات التالية لاستخدام صندوق التصميم المادي HTML:

شيفرة HTML

<div class="wikibox box-red">
  <h2>هذا هو العنوان</h2>
  <p>وهنا بعض الفقرة</p>
  <!--[يمكنك اضافة اي تخصيص شرك ان يكون ضمن كلاس الجدول]-->
</div>
  • <div class="wikibox box-red">:
    - <div>: عنصر HTML عام يستخدم كحاوية لتجميع العناصر الأخرى.
    - class="wikibox box-red":
    - wikibox: فئة (class) CSS تعرف مجموعة من الأنماط الخاصة بالصندوق (box).
    - box-red: فئة إضافية تضيف أنماطًا خاصة لجعل الصندوق بلون أحمر.
  • <h2>هذا هو العنوان</h2>:
    - <h2&ht;: عنصر HTML يستخدم لتعريف عنوان مستوى 2. يعتبر العنوان أقل أهمية من <h1> ولكنه أعلى من عناوين المستويات الأخرى.
    - النص داخل <h2>l;: "هذا هو العنوان"، هو النص الذي سيظهر كعنوان داخل الصندوق.
  • <p>وهنا بعض الفقرة</p>:
    - <p>: عنصر HTML يستخدم لتعريف فقرة من النص.
    - النص داخل <p&ht;: "وهنا بعض الفقرة"، هو النص الذي سيظهر كفقرة داخل الصندوق.

باستخدام هذه الشيفرة، يمكنك إنشاء صناديق بمظهر منظم وجذاب يتضمن عناوين ملونة ومحتوى منسق داخل صفحة الويب.

الخطوة 1: اكتب أولاً منشور مدونتك أو القسم المراد ثم انتقل إلى وضع العرض النصي (Text mode) في محرر المشاركة غير من وضع الانشاء الذي رمزه () الى وضع التكويد الذي رمزه () والصق الشيفرة HML التي قمت بنسخها لتنشرها.

الخطوة 2: قم بلف الجزء من منشور مدونتك الذي تريد إضافة صندوق مادي إليه باستخدام علامة <div> والفئة المناسبة "class" للون. انظر المثال أدناه لفهمه بشكل صحيح.

هذا كل شيء! إليك قائمة بأسماء الفئات للألوان الأخرى لصندوق التصميم المادي:

  1. للأزرق: box-blue
  2. للأصفر: box-yellow
  3. للأخضر: box-green
  4. للأحمر (التدرج): box-redSG
  5. للأزرق (التدرج): box-blue-SG
  6. للأخضر (التدرج): box-greenSG
  7. للأصفر (التدرج): box-yellowSG

نصائح لاستخدام صناديق التصميم المادي في منشورات مدونتك على Blogger

إليك بعض النصائح الإضافية لاستخدام صناديق التصميم المادي في منشورات مدونتك:

  • استخدم صناديق التصميم المادي لتسليط الضوء على المعلومات الهامة، مثل الإعلانات، العروض الخاصة، أو أزرار الدعوة إلى العمل.
  • استخدم صناديق التصميم المادي لتجزئة منشورات مدونتك وجعلها أكثر جاذبية بصريًا.
  • استخدم صناديق التصميم المادي لإضافة لمسة جمالية إلى منشورات مدونتك.
  • تجنب الإفراط في استخدام صناديق التصميم المادي لتجنب التشتيت البصري.

أمثلة تطبيقية وتحليل حالات دراسية

إليك بعض الأمثلة التطبيقية لصناديق تصميم مادي فعّالة من مدونات ناجحة، بالإضافة إلى تحليل لحالات دراسية تظهر كيف ساهمت صناديق التصميم المادي في تحسين تجربة المستخدم وزيادة التفاعل:

  • مدونة صِوان محور XYZ: استخدمت صناديق التصميم المادي لتسليط الضوء على النصوص الهامة والإعلانات، مما ساعد في زيادة معدل النقرات بنسبة 20٪.
  • مدونة صِوان محور XYZ: استخدمت صناديق التصميم المادي لتقديم محتوى متجاوب وجذاب، مما أدى إلى تحسين تجربة المستخدم وزيادة وقت البقاء على الموقع بنسبة 15٪.
سؤال: ما هي صناديق التصميم المادي؟

✦ جواب: صناديق التصميم المادي هي عناصر بصرية تستخدم في المدونات لإضافة جاذبية وتفاعل بصري إلى المحتوى. يمكن استخدامها لتسليط الضوء على المعلومات الهامة، أزرار الدعوة إلى العمل، أو لإضفاء لمسة جمالية على المدونة.

سؤال: ما هي الفوائد التي تقدمها صناديق التصميم المادي لمستخدمي Blogger؟

✦ جواب: تقدم صناديق التصميم المادي عدة فوائد، منها تحسين الجاذبية البصرية، زيادة مرونة التصميم، وزيادة معدلات التحويل من خلال تسليط الضوء على المعلومات الهامة والعروض الخاصة.

سؤال: كيف يمكن إضافة صندوق تصميم مادي إلى منشور مدونة على Blogger؟

✦ جواب: لإضافة صندوق تصميم مادي إلى منشور مدونة على Blogger، يجب أولاً تسجيل الدخول إلى لوحة تحكم Blogger، ثم الانتقال إلى "المظهر" > "تخصيص" > "تعديل HTML"، ثم لصق كود CSS وHTML المخصص أعلى الكود ]]></b:skin>. بعد ذلك، يمكن استخدام الصندوق في المنشور عن طريق وضع الجزء المراد تمييزه داخل علامة <div> مع الفئة المناسبة للون.

سؤال: ما هي بعض النصائح لاستخدام صناديق التصميم المادي بفعالية في منشورات المدونة؟

✦ جواب: بعض النصائح تشمل استخدام صناديق التصميم المادي لتسليط الضوء على المعلومات الهامة مثل الإعلانات والعروض الخاصة، تقسيم النصوص لجعلها أسهل في القراءة، وإضافة لمسة جمالية إلى المنشورات. يجب تجنب الإفراط في استخدامها لتجنب التشتيت البصري.

الخاتمة

تعتبر صناديق التصميم المادي وسيلة رائعة لإضافة جاذبية بصرية وأسلوب مميز إلى منشورات مدونتك على Blogger. باتباع الخطوات والنصائح المذكورة أعلاه، يمكنك بسهولة إضافة صناديق تصميم مادي إلى مدونتك، سواء كنت تستخدم قالب تصميم مادي جاهز أو قالب مخصص. تذكر دائماً استخدام صناديق التصميم المادي بشكل مناسب لتحقيق أقصى استفادة منها دون الإفراط في استخدامها لتجنب التشتيت البصري.

المشاركات ذات الصلة

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
siwaneSiwaneXYZ©
https://www.siwane.xyz/2024/07/how-to-add-material-design-box-to.html

عن المؤلف

جمال الحزازي
مرحبا انا منشئ محتوى رقمي (صِوانˣʸᶻ) مهتم بالتصميم ui/ux، مدون في مجال التقنية و العلوم تعرف على المزيد.
اشتري لي كوب قهوة ☕

إرسال تعليق

اكتب تعليقك 🤗، لكن تيقن ان كلماتك تعبر عن من انت.
"لا يقال قف لاراك بل تكلم لأعرفك"