إضافة صندوق عرض الأكواد على بلوجر Code Box Blogger
صندوق عرض الاكواد عبارة عن اداة تقوم بعرض الاكواد البرمجية بشكل منسق داخل المشاركات والمواضيع على بلوجر، فكثيرا مانود ان نقوم بعرض كود معين للشروحات خصوصا للمدونات التقنية فتحتاج الى ان تتوفر على صندوق يقوم بعرض الاكواد.
لهذا اتيتكم بهذا الشرح الجميل والبسيط حيث سنقوم بشرح طريقة اضافة صندوق الاكواد على بلوجر بشكل مميز واحترافي كما انه يمكنك التعديل عليه من حيث الالوان وتنسيقه لكي يناسب موقعك او مدونتك الخاصة، دون ان اطسل عليكم دعون ننتقل الى كيفية اضافة صندوق الاكواد جيست ويب على بلوجر خطوة بحطوة.
طبعا هذه الأكواد تهم فقط من يقوم بنشر مقالات عن البرمجة. إذا كنت تبحث عن اكواد جاهزة لصندوق عرض الأكواد على بلوجر شاهد هذا الشرح البسيط حتى تتمكن من عرض صندوق الاكواد على بلوجر في أي قالب على Blogger.
شرح طريقة تركيب صندوق عرض الاكواد على بلوجر
قبل كل شيء قم بعمل نسخة احتياطية لقالبك الحالي
لتبسيط الشرح سنقوم بتقسيم الشرح الى جزئين أساسيين:
الجزء الاول من شرح إضافة صندوق الاكواد:
أولا تقوم باتباع الخطوات التالية :
- التوجه الى واجهة تحكم بلوجر
- الذهاب الى قسم المظهر
- الضغط على قائمة منسدلة بجانب التخصيص
- الضغط على تعديل html
- الآن تضغط في اي مكان داخل الاكواد
- في لوحة المفاتيح تضغط على Ctrl + F
تظهر لك خانة البحث وتقوم بلصق الكود التالي
]]></b:skin>
نسخ
تضغط على Enter فوق الكود السابق (b:skin) تقوم بلصق الكود التالي :
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2B303B;position:relative;max-height:500px;text-align:left;direction:ltr;}
pre::after{content:'اضغط مرتين للنسخ';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#ffffff;line-height:20px;background: red;font-family: 'Tajawal';}
pre:hover::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:-8px;visibility:visible;}
pre code{display:block;background:none;border:none;color:#C0C5CE;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;font:14px 'Consolas','Monaco',monospace,Courier,Courier New;}
pre code .token.prolog{color:#b1b1b1;}
pre code .token.doctype{color:#b1b1b1;}
pre code .token.cdata{color:#b1b1b1;}
pre code .token.url{color:#ccc;}
pre .language-css .token.string{color:#ccc;}
pre .style .token.string{color:#ccc;}
pre code .token.atrule{color:#009999;}
pre code .token.atrule{color:#1baeb0;}
pre code .token.regex{color:#ccc;}
pre code .token.important{font-weight:bold;}
pre code .token.entity{color:#759bb9;cursor:help;}
pre code .namespace{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:.8;}
pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;}
pre code .token.attr-name{color:#C0C5CE;}
pre code .token.selector{color:#759bb9;}
pre code .token.property{color:#759bb9;}
pre code .token.comment{color:#8c919a;font-style:italic;}
pre code .token.punctuation{color:#8FA1B3;}
pre code .token.operator{color:#4d9bd8;}
pre code .token.number,pre code .token.boolean{color:#cec768;}
pre code .token.attr-value{color:#f79029;}
pre code .token.string{color:#A3BE8C;}
pre code .token.keyword{color:#94719c;font-style:italic;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
/*======comments pre======*/
.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:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
/*=======line numbers========*/
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='HTMLku']:before{color:#f79029;}
pre[data-codetype='CSSku']:before{color:#759bb9;}
pre[data-codetype='JavaScriptku']:before{color:#d4b447;}
pre[data-codetype='JQueryku']:before{color:#94719c;}
/*=======transition=======*/
pre::after{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/*=======border radius=======*/
pre,.comments pre::before{border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}نسخ
تتوجه الى خانة البحث مرة اخرى وتبحث عن الكود التالي :
</body>
نسخ
تضغط على Enter وفوق الكود السابق وسم اغلاق Body تقوم بلصق الكود التالي : لتحميل الكواد من هنا
الجزء الثاني من شرح إضافة صندوق الاكواد:
الآن نأتي الى المقالة الذي تريد أن تقوم بعرض الاكواد فيه وشرح كيف تقوم بعرضها بسهولة فاتبع الخطوات جيدا.
أولا تقوم بتحويل الكود الذي تريد عرضه باستخدام محول الاكواد. بعد تحويل الكود تقوم بوضعه داخل هذا الكود في المكان المخصص له :
<pre><code class="language-markup">
<!--ضع الاكواد بعد تحويلها هنا-->
</code></pre>نسخ
بعد أن تضع الكود المحول داخل هذا الكود تقوم بنسخ جميع الأكواد وتتوجه الى واجهة كتابة المقالة. تضغط على القلم الموجود على اليمين وتختار عرض html وتقوم بلصق الكود كاملا في المكان المناسب لك حسب الشرح. تضغط على حفظ مباشرة ويمكنك معاينة الكود وترى كيف يبدوا للزوار، هذا الكود استخدمه شخصيا واحببت ان اشاركه معكم اخواني الكرام.
لماذا يجب تحويل الكود قبل عرضه في المقال؟
إذا لم تقم بتحويل الكود سوف يتم تشغيل الكود. فكما تعلم أن صفحة بلوجر تدعم تشغيل أكواد html و css و js. بمعنى أنه أي كود تقوم بإضافته من تعديل html على المقال، سوف يتم تشغيله. ولكي يتم إظهار الكود يجب تحويل الكود حتى لايتم تشغيل الكود بل يتم إظهاره للمستخدم حتى يقوم بنسخه والعمل به.
ملاحظة : الجزء الأول تقوم به مرة واحدة فقط أما الجزء الثاني فتقوم به كلما تحتاج لوضع الاكواد داخل المقالة أما الجزء الثاني فيجب إضافته في كل مرة تريد إضافة أوعرض الأكواد على مقالة معينة.
تم والحمد لله رب العاليمين، ولاتنسونا من حسن دعائكم لنا ولوالدينا ولكم ولجميع المسلمين الاحياء منهم والاموات.