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

الصفحات

الطريقة الصحيحة لإضافة اكواد Html وCss وJs داخل المشاركات في بلوجر

تضمين الاكواد البرمجية داخل المقالات في بلوجر

كنا قد طرحنا سابقا في مدونة الجعبة التقنية و في قسمها المخصص لإضافات بلوجر شرحا مبسطا و سهلا عن طريقة اضافة صندوق أكواد HTML و تضمينها داخل مشاركات بلوجر و يمكن الرجوع اليها من خلال هذا الرابط للاستفادة منها و تنسيق الاكواد البرمجية CSS و JS داخل التدوينة.
و اليوم سنضع بين ايديكم شرحا جديدا و بسيطا للطريقة الصحيحة التي تمكن المدون من إضافة صندوق اكواد Html وCss وJs داخل المشاركات في بلوجر لتنسيقها و اعطائها شكلا جماليا مميزا وتكون متوافقة مع جميع الاجهزة.

طريقة إضافة صندوق اكواد يدعم جميع لغات البرمجة في بلوجر

الطريقة سهلة و بسيطة لتركيب صندوق خاص بالاكواد البرمجية لتنظيمها و ترتيبها و تسهيل عملية نسخها و الاستفادة منها بالنسبة للزائر للمدونة كما أنه يدعم جميع لغات البرمجة ، وما عليك فعله لتركيب صندوق HTML داخل المقالة سوى اتباع هذه الخطوات البسيطة كما هو موضح في الصورة:

توجه الى لوحة تحكم بلوجرالمظهر تحرير Html  (خذ نسخة احتياطية تجنبا للخطأ)
❷ ابحث عن الوسم BODY بالضغط على CTRL+F
❸ وضع فوقه هذا الكود

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
ثم قم بالبحث عن هذا الوسم /head وضع فوقه هذا الكود
<!-- ITHEIRC CODBOX THEME 3 -->
<style type="text/css">
a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code 
.str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code 
.typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code 
.tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code 
.atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre
.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;
background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;
-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}
ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print
{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}
code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .
pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre 
.htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>

❺ ثم قم بحفظ القالب

طريقة استخدام صندوق اكواد HTML

إذا أردت تضمين اي كود برمجي سواء HTML أو CSS او JS داخل المقالة لتنسيقها و اعطائها شكلا جميلا عليك بوضع هذا الكود داخل القسم المخصص للتدوينة من التبويبHTML كما هو موضح في الصورة
❶ ثم تقوم بوضع هذا الكود
<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>

❷ وتقوم باستبدال كلمة YOUR CODE HRER بالكود الخاص بك
ℹ️ إخلاء المسؤولية ☟
ملاحظة مهمة جدا:
تبرئة للذمة أمام الله أولا ثم امام الجميع ثانيا ، فإننا نصرح بأننا قمنا بطرح هذا الموضوع ليستفيد منه الزوار الكرام من جانبه الايجابي فقط، لأننا لسنا على دراية بما تحتويه الملفات الاخرى من محتوى ضار او غير اخلاقي.
و لو تبين لنا الأمر فاننا سنقوم بحذف الموضوع و الاعتذار للجميع
كما نوصي أي شخص له دراية او ملاحظة بخصوص أي محتوى مسيئ بأن يقوم بتنبيهنا في صندوق التعليقات (كفاعل خير و ناصح جزاه الله)
كما أن موقع الجعبة التقنية غير مسؤول عن التطبيقات و لا على المحتوى الذي يتم عرضه داخلها و لا عن أي تغييرات قد تطرأ عليها مستقبلا بعد طرحها للزائر لتحميلها والإستفادة منها.
هدفنا هو نشر المعلومة لعامة الناس بالمجان ،كما حصلنا عليها بدورنا في مواقع أخرى
هل اعجبك الموضوع :

تعليقات

ملاحظة مهمة جدا
نحن لم نقم بأي تعديل لهذا الملف وتم كتابة المقال دون المساس بحقوق الآخرين
نحن لا نشجع على الترويج للمحتوى المهكر او المقرصن او ما يسيء للاخرين
نحن لا ندعي امتلاكنا للتطبيقات و البرامج المعروضة على الموقع و لا لحقوقها
نحن نقوم بكتابة مقال تقني عن التطبيقات و البرامج التي نراها ذات منفعة للمستخدم و نتيح له امكانية تحميلها من موقعها الرسمي.
المقالات المنشورة على الموقع هي ملك لمدونة الجعبة التقنية ✍
نطلب من كل من أسأنا له عن غير قصد أن يتصل بنا لتصحيح الخطأ مع تقديمنا اعتذارا له⁦ ❤️⁩