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

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

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

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

 اهم خصائص صندوق اكواد بلوجر في مدونتك

  1. سهولة الاستخدام للمستخدم المبتدئ
  2. يتم توليد الكود ضمن الصندوق بحسب لغة البرمجة
  3. يستجيب الى جميع الشاشات
  4. تم إنشاء الشفرة – بواسطة Google
 

 طريقة تركيب صندوق اكواد بلوجر

الخطوة الأولى:

 
  1. توجه الى لوحة تحكم بلوجر >>> المظهر >>> تحرير HTML
  2.   ثم ضع هذا الكود فوق وسم <body>
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

الخطوة الثانية:

  1. انسخ هذا الكود وضعه فوق وسم <head/> وبعض المدونات يكون بهذا الشكل </head> معكوسة
<!-- ITHEIRC CODBOX THEME 1 -->
<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> 
• استبدال جملة ” YOUR CODE HERE” بالكود الذي تريد أضافته او وضعة في الصندوق ولكن يجب تحويل الكود قبل وضعه باستخدام محول الأكواد.
• اذا اردت تغيير نوع لغة الكود المستخدم فقم بتغيير “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
” تغير نوع اللغة” يفيد في تغير لون الكود داخل الصندوق فقط لكنه ليس شرط اساسي

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *