طريقة إضافة صندوق الأكواد بشكل جذاب وأنيق الى مدونة بلوجر

اضافة صندوق الاكواد لمدونة بلوجر

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

خصائص الصندوق

سهل الإستخدام
يتم تلويد الكود ضمن الصندوق بحسب لغة البرمجة
مستجيب مع جميع الشاشات
تم إنشاء الشفرة - بواسطة Google

طريقة تركيب صندوق الأكواد في مدونتك

توجه الى لوحة تحكم بلوجر > المظهر> تحرير html
ثم ضع هذا الكود فوق وسم <body>

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

ثم انسخ هذا الكود وضعه فوق وسم <head/>

<!-- 7ASHTA5 CODBOX THEME -->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>

طريقة الاستخدام

1- عندما تريد وضع الكود في التدوينة أنتقل الى تبويب html الذي بجوار "تأليف" أثنائ التدوين,ضع الكود التالي داخله

<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>

2- استبدل " YOUR CODE HERE" بالكود الذي تود وضعه في الصندوق ولكن يجب تحويل الكود قبل وضعه باستخدام محول الأكواد .

محول الاكواد

3- الآن اذا اردت تغيير نوع لغة الكود فقم بتغيير Language-html بالكود في الاعلى برمز اللغة كما في الجدول التالي

الرمز	القيمه	لغة البرمجه
language-html	html	HTML
language-	csh	CSS
language-js	js	Javascript
language-xml	xml	XML
language-xhtml	xhtml	XHTML
language-c	c	C
language-cpp	cpp	C++
language-cs	cs	C#
Language-php	php	PHP
language-py	py	Python
language-java	java	Java
language-rb	rb	Ruby
language-perl	perl	Perl

لكنه ليس شرط اساسي " تغير نوع اللغة" تغير نوع اللغة يفيد في تغير لون الكود داخل الصندوق ممايزيد من الجمالية ليس الا كان لايهمك هذا الأمر فقط تجاهل الخطوة الثالثة .