[

القائمة الرئيسية

الصفحات

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

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

في درس اليوم سوف اعلمك كيفية تركيب صندوق اكواد بلوجر داخل المدونة بطريقة بسطيه جدا مع طريقة تغير ألوان الصندوق عند اضافة لغة عن اخرى مثلا إذا كنت تريد وضع كود 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


" تغير نوع اللغة" يفيد في تغير لون الكود داخل الصندوق فقط لكنه ليس شرط اساسي 


هل اعجبك الموضوع :

تعليقات

التنقل السريع