طريقة إنشاء صندوق لإختصار طول أكواد HTML لمدونات بلوجر

الكثير من المدونات المهتمة بشروحات لغات البرمجة , كمثال لغة HTML يستخدمون كمية أكواد كبيرة جدا داخل كل موضوع وبالتالى يحتاجون لإضافة تختصر طول الكود داخل الصفحات. سنشرح طريقتين لإنشاء صندوق لإضافة أكواد HTML داخله بطريقة أكثر تناسقا وتقليل طول الموضوع.

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

     <div style="font-family:georgia; font-size: 16px; height: 150px; overflow: scroll; width: 550px;border:2px solid black;"> الصق الكود هنا</div> <div style="font-family: verdana,arial,sans-serif; font-size: 10px;"> <a href="http://ashwaq1.blogspot.com/">أشواق وحنين</a></div>

أشواق وحنين

معاينة الكود

     <div style="font-family:georgia; font-size: 16px; height: 150px; overflow: scroll; width: 550px;border:2px solid black;"> الصق الكود هنا</div> <div style="font-family: verdana,arial,sans-serif; font-size: 10px;"> <a href="http://ashwaq1.blogspot.com/">أشواق وحنين</a></div>

أشواق وحنين

ثانيا: صندوق له نفس الخصائص ولكن بدون إطار خارجى

<div style="font-family:georgia; font-size: 16px; height: 150px; overflow: scroll; width: 550px;">
الصق الكود هنا</div>
<div style="font-family: verdana,arial,sans-serif; font-size: 10px;">
<a href="http://ashwaq1.blogspot.com/">أشواق وحنين</a></div>

معاينة
 

#13b0b2

; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: #ffffff; border-image: initial; border-style: dashed; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px; box-shadow: #13B0B2 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; color: white; font-size: 21px; line-height: 1.3em; margin: 10px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: center; text-shadow: #13B0B2 -1px -1px;">اكتب هنا الموضوع او الجملة التى تريد كتابتها

أشواق وحنين

انتهى شكرا لكم