الأربعاء، 3 أبريل 2019

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

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

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

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


  • سهل الإستخدام 
  • يتم تلويد الكود ضمن الصندوق بحسب لغة البرمجة 
  • مستجيب مع جميع الشاشات
  • تم إنشاء الشفرة - بواسطة 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-htmlhtmlHTML
language-cshCSS
language-jsjsJavascript
language-xmlxmlXML
language-xhtml xhtmlXHTML
language-c cC
language-cppcppC++
language-cscsC#
Language-phpphpPHP
language-pypyPython
language-java javaJava
language-rb rbRuby
language-perl perlPerl

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

مدونة هاشتاغ التقنية,أفق لاسقف له

مرحبا بكم لاتترد في الاستفسار نحن بخدمتك.
تعبيراتتعبيرات