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

عدد مشاهدات الموضوع:

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

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

<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://www.abu-iyad.com/">مدونة أبو إياد</a></div>

معاينة: 

 /* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU22G8dUKUf2GxbeAKg6T3K258IyswghBTwc9v6YJQIQ_0O-j0qW0KO70aV53RUQc-c76vieZWk8stdjxPaJ-E9-bjWdZE08y8Zk6TktJqAdeiptoEd5lId8Pg9yV-9PbM6W8-7D5NUQI/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
} 

مدونة أبو إياد

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

<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://abu-iyad.com/">مدونة أبو إياد</a></div>

معاينة:

 /* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU22G8dUKUf2GxbeAKg6T3K258IyswghBTwc9v6YJQIQ_0O-j0qW0KO70aV53RUQc-c76vieZWk8stdjxPaJ-E9-bjWdZE08y8Zk6TktJqAdeiptoEd5lId8Pg9yV-9PbM6W8-7D5NUQI/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
} 

مدونة أبو إياد

شكرا جزيلا للمدون الرائع Durodola Ridwan  على نشر الاضافة.