إضافة اليوم على مدونة عالم المدون هى إضافة تهم كل المدونين فى مجال بلوجر وهى الإضافة التى تخص الأكواد التى يستخدمها المصممو فى مجال بلوجر لوضع الأكواد داخل مواضع بلوجر بشكل انيق واحترافى ويوجد من هذا الصناديق ثلاث أشكال سوف نقوم بتوفيرها لكم لتتمكون من وضع اكواد بلوجر داخل المواضيع بشكل جميل ومن هذه الصناديق تسخدم مدونة عالم المدون احدهم ، ويمكنك معاينة الثلاث صناديق من الروابط التالية .
تركيب الصناديق
اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة .
الشكل الأول
1- قم بالبحث عن الوسم ]]> ثم قم بوضع فوقه الكود التالى ( قبله )
/* CSS Prism Syntax Highlighter */
pre {padding: 50px 10px 10px 10px;margin: .5em 0;white-space: pre;word-wrap: break-word;overflow: auto;background-color: #2c323c;position: relative;border-radius: 4px;max-height: 500px;}
pre::before {font-size: 16px;content: attr(title);position: absolute;top: 0;background-color: #eee;padding: 10px;left: 0;right: 0;color: #fff;text-transform: uppercase;display: block;margin: 0 0 15px 0;font-weight: bold;}
pre::after {content: 'انقر مرتين لنسخ الكود';padding: 2px 10px;width: auto;height: auto;position: absolute;right: 8px;top: 8px;color: #fff;line-height: 20px;transition: all 0.3s ease-in-out; font-family: 'Droid Arabic Kufi',serif;width: 145px;}
pre:hover::after {opacity: 0;top: -8px;visibility: visible;}
code {font-family: Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height: 16px;color: #88a9ad;background-color: transparent;padding: 1px 2px;font-size: 12px;}
pre code {display: block;background: none;border: none;color: #e9e9e9;direction: ltr;text-align: left;word-spacing: normal;padding: 0 0;font-weight: bold;}
code .token.punctuation {color: #ccc;}
pre code .token.punctuation {color: #fafafa;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
color: #777;}
code .namespace {opacity: .8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color: #e5dc56;}
code .token.selector,code .token.attr-name,code .token.string {color: #88a9ad;}
pre code .token.selector,pre code .token.attr-name {color: #fafafa;}
pre code .token.string {color: #40ee46;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color: #ccc;}
code .token.operator {color: #1887dd;}
code .token.atrule,code .token.attr-value {color: #009999;}
pre code .token.atrule,pre code .token.attr-value {color: #1baeb0;}
code .token.keyword {color: #e13200;font-style: italic;}
code .token.comment {font-style: italic;}
code .token.regex {color: #ccc;}
code .token.important {font-weight: bold;}
code .token.entity {cursor: help;}
pre mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}
code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}
pre code mark {background-color: #ea4f4e!important;color: #fff!important;padding: 2px;border-radius: 2px;}
.comments pre {padding: 10px 10px 15px 10px;background: #2c323c;}
.comments pre::before {content: 'Code';font-size: 13px;position: relative;top: 0;background-color: #f56954;padding: 3px 10px;left: 0;right: 0;color: #fff;text-transform: uppercase;display: inline-block;margin: 0 0 10px 0;font-weight: bold;border-radius: 4px;border: none;}
.comments pre::after {font-size: 11px;}
.comments pre code {color: #eee;}
.comments pre.line-numbers {padding-left: 10px;}
pre.line-numbers {position: relative;padding-left: 3.0em;counter-reset: linenumber;}
pre.line-numbers > code {position: relative;}
.line-numbers .line-numbers-rows {height: 100%;position: absolute;pointer-events: none;top: 0;font-size: 100%;left: -3.5em;width: 3em;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;padding: 0;}
.line-numbers-rows > span {pointer-events: none;display: block;counter-increment: linenumber;}
.line-numbers-rows > span:before {content: counter(linenumber);color: #999;display: block;padding-right: 0.8em;text-align: right;transition: 350ms;}
pre[data-codetype='CSSku']:before {background-color: #3B5998;}
pre[data-codetype='HTMLku']:before {background-color: #3cc888;}
pre[data-codetype='JavaScriptku']:before {background-color: #19BFE5;}
pre[data-codetype='JQueryku']:before {background-color: #D64136;}