كيفية إنشاء صندوق ملاحظات ملون على مدونة

 كيفية إنشاء صندوق ملاحظات ملون على مدونة

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

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

مع المظهر الرائع لصندوق الملاحظات، أنا متأكد من أن القراء أو الزوار سيقبلون ويفهمون النقاط المهمة التي تكتبها في الملاحظة بسهولة أكبر.

يعد إنشاء مربع ملاحظات باستخدام تأثير Css المطوي أمرًا سهلاً للغاية، ما عليك سوى إدخال كود Css الذي قمت بإعداده، ثم عندما تريد إضافة ملاحظات، ما عليك سوى إضافة القليل من كود HTML لاستدعاء كود Css الذي تم تثبيته سابقًا.

يرجى تذكر أنه إذا قمت بتغيير قالب المدونة، فمن المحتمل أن يختفي تأثير الطي الموجود على مربع الملاحظات ولونه. إذا كنت تريد ظهوره مرة أخرى، فيجب عليك إضافة كود Css مرة أخرى إلى القالب الجديد.

تركيب صندوق ملاحظات بتأثير طي الورق

قم بتسجيل الدخول إلى بلوجر  انقر فوق السمات > تحرير HTML

ابحث عن الكود ]]></b:skin> أو </style>

 يرجى نسخ كود Css هذا، ثم لصقه قبل الكود ]]></b:skin> أو </style>

/* CSS Note */
.note-0{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note-0.yellow{background:#f1c40f}
.note-0.red{background:#e74c3c}
.note-0.blue{background:#3498db}
.note-0:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note-0.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f}
.note-0.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c}
.note-0.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}

يحتوي كود Css أعلاه على 4 ألوان لمربع الملاحظات كما ترون في العرض التوضيحي أعلاه.

لتطبيقه على مدونة أو منشور، ما عليك سوى إضافة أحد أكواد HTML الموجودة أدناه إلى منشور مدونتك في وضع HTML بدلاً من الإنشاء:

صندوق الملاحظات الأخضر

HTML 1

<div class='note-0'>...املأ بالملاحظات...</div>

معاينة 2

...املأ بالملاحظات...

صندوق الملاحظات الأصفر

HTML 1

<div class='note-0 yellow'>...املأ بالملاحظات...</div>

معاينة 2

...املأ بالملاحظات...

صندوق الملاحظات الاحمر

HTML 1

<div class='note-0 red'>...املأ بالملاحظات...</div>

معاينة 2

...املأ بالملاحظات...

صندوق الملاحظات الازرق

HTML 1

<div class='note-0 blue'>...املأ بالملاحظات...</div>

معاينة 2

...املأ بالملاحظات...

هذه مقالة حول كيفية إنشاء مربع ملاحظات ملون على مدونة، وآمل أن تكون مفيدة.

تركيب صندوق ملاحظات للملاحظات والتحذيرات مع صورة

قم بتسجيل الدخول إلى بلوجر  انقر فوق السمات > تحرير HTML

ابحث عن الكود ]]></b:skin> أو </style>

 يرجى نسخ كود Css هذا، ثم لصقه قبل الكود ]]></b:skin> أو </style>

.note-5
{
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     background-color: #f0f7fb;
     background-image: url(../Images/icons/Pencil-48.png);
     background-position: 9px 0px;
     background-repeat: no-repeat;
     border: solid 1px #3498db;
     border-radius: 6px;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 60px;
}
.noteAlt
{
     background-color: #f0f7fb;
     background-image: url(../Images/icons/Pencil-48.png);
     background-position: 9px 0px;
     background-repeat: no-repeat;
     border-left: solid 4px #3498db;
     line-height: 18px;
     overflow: hidden;
     padding: 15px 60px;
}

صندوق الملاحظات مع صورة

HTML 1

<div class="note-5">...املأ بالملاحظات...</div>
<p class="noteAlt">...املأ بالملاحظات...</p

معاينة 2

...املأ بالملاحظات...

...املأ بالملاحظات...

---

صندوق ملاحظات مربعات ألوان

قم بتسجيل الدخول إلى بلوجر  انقر فوق السمات > تحرير HTML

ابحث عن الكود ]]></b:skin> أو </style>

 يرجى نسخ كود Css هذا، ثم لصقه قبل الكود ]]></b:skin> أو </style>

/* Material Design Color Boxes by bloggersstand.com*/
.bsdcolorboxes{overflow:hidden;position:relative;margin:.6rem 0 1rem;transition:box-shadow .26s;border-radius:3px;color:#fff;box-shadow:0 3px 6px 0 rgba(0,0,0,0.16),0 3px 10px 0 rgba(0,0,0,0.12);padding:21px;font-size:15px}
.bsdcolorboxes.blue{background:#449d48}
.bsdcolorboxes.green{background:#4CAF50}
.bsdcolorboxes.red{background:#f5554a}
.bsdcolorboxes.orange{background:#ffa219}
.bsdcolorboxes.purple{background:#7446c4}

صندوق ألوان بتصميم أرجواني

HTML 1

<div class="bsdcolorboxes purple">
Material design color box purple.
</div>

معاينة 2

Material design color box purple.

صندوق ألوان بتصميم احمر

HTML 1

 <div class="bsdcolorboxes red">
Material design color box red.
</div>

معاينة 2

Material design color box red.

صندوق ألوان بتصميم برتقالي

HTML 1

<div class="bsdcolorboxes orange">
Material design color box orange.
</div>

معاينة 2

Material design color box orange.

صندوق ألوان بتصميم ازرق

HTML 1

<div class="bsdcolorboxes blue">
Material design color box blue.
</div>

معاينة 2

Material design color box blue.

صندوق ألوان بتصميم اخضر

HTML 1

<div class="bsdcolorboxes green">
Material design color box green.
</div>

معاينة 2

Material design color box green.