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

يسمح للزائر بنسخ الكواد التي تضعه داخل التدوينة بشكل صحيح بدون حدوث اخطاء اثناء النسخ، كما انه مفيد بالنسبة لك حيث يمكنك تفعيل خاصية عدم النسخ من الم

ما فائدة صندوق الاكواد

---

صندوق الاكواد يسمح للزائر بنسخ الكواد التي تضعه داخل التدوينة بشكل صحيح بدون حدوث اخطاء اثناء النسخ، كما انه مفيد بالنسبة لك حيث يمكنك تفعيل خاصية عدم النسخ من المدونة لحماية التدوينات من السرقة ويظل صندوق الاكواد هو المكان الوحيد الذي يمكن النسخ من خلاله، كما إنه دليل علي إحترافية المدونة.

---

طريقة عمل صندوق اكواد خاص بمدونتك بشكل احترافي.

(إحتفظ بنسخة من قالب المدونة قبل إضافة الكود تفادياً لأي خطأ)

• 1.قم بالدخول الي مدونة بلوجر
• 2.من القائمة انقر فوق المظهر ثم تعديل HTML
• 3.إبحث عن هذا الوسم بإستخدام Ctrl+F عن  ]]></b:skin>
• 4.قم بوضع هذا الكود فوقه مباشرةً كما هو موضح بالصورة أسفل الكود:
• 5.قم بحفظ القالب.

 /*----------
  Shortcode
  ------------*/
  
  .bm-dropcap{float:right;display:block;font-size:50px;line-height:50px;background-color:$(maincolor);color:white;text-align:center;margin:9px 0 0 13px;padding:2px 13px 5px 13px;font-family:Verdana,Geneva,sans-serif;text-transform:uppercase;}
  .bm-dropcap.dcap2{webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}
  .bm-dropcap.dcap3{background:none;font-weight:900;font-size:75px;line-height:65px}
  pre {background-color: #222;color: #333;position: relative;padding: 0 7px;margin: 15px 0 10px;overflow: hidden;overflow-x: visible;word-wrap: normal;white-space: pre;position: relative;}
  pre[data-codetype]{padding:37px 1em 5px;text-align: left;direction: ltr;}
  pre[data-codetype]:before {content: attr(data-codetype);display: block;position: absolute;top: -5px;right: 0;left: 0;background-color: #F1F1F1;padding: 7px;color: #FFFFFF;-webkit-box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;-moz-box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;box-shadow: rgba(0,0,0,0.117647) 0 1px 3px;}
  pre .line-number span:nth-child(even) {background-color: rgba(0, 0, 0, 0.6);}
  pre code,pre .line-number{display:block;color:#fff}
  pre .line-number{color:#fff;min-width:1em}
  pre .line-number span{display:block}
  pre .cl{display:block;clear:both}
  pre .line-number{float:left;margin:0 1em 0 -1em;border-right:2px solid #666666 ;text-align:left}
  pre .line-number span{padding:0 1em 0 .8em}
  pre[data-codetype="HTML"]:before {background-color: #905fc7;}
  pre[data-codetype="HTML"] {color: #b853cf;}
  pre[data-codetype="HTML"] span.line-number {border-right: 2px solid #b853cf;}
  pre[data-codetype="CSS"] {color: #24bdab;}
  pre[data-codetype="CSS"] span.line-number {border-right: 2px solid #158ca1;}
  pre[data-codetype="CSS"]:before {background-color: #158ca1;}
  pre[data-codetype="COPY AREA"] {color: #eb8857;}
  pre[data-codetype="COPY AREA"] span.line-number {border-right: 2px solid #e37139;}
  pre[data-codetype="COPY AREA"]:before {background-color: #e37139;}
  pre[data-codetype="JavaScript"]:before {background-color: #cf5190;}
  pre[data-codetype="JavaScript"] {color: #ff7dbe;}
  pre[data-codetype="JavaScript"] span.line-number {border-right: 2px solid #cf5190;}
  pre[data-codetype="JQuery"]:before {background-color: #0c7857;}
  pre[data-codetype="JQuery"] {color: #3ec984;}
  pre[data-codetype="JQuery"] span.line-number {border-right: 2px solid #0c7857;}
  pre[data-codetype="HTML"]::-webkit-scrollbar-thumb {background: #b853cf;}
  pre[data-codetype="CSS"]::-webkit-scrollbar-thumb {background: #158ca1;}
  pre[data-codetype="COPY AREA"]::-webkit-scrollbar-thumb {background: #e37139;}
  pre[data-codetype="JavaScript"]::-webkit-scrollbar-thumb {background: #cf5190;}
  pre[data-codetype="JQuery"]::-webkit-scrollbar-thumb {background: #0c7857;}
  .button,input.button{position:relative;display:inline-block;margin-left:1em;margin-bottom:1.34em;padding:0.667em 2em;border-bottom:none;-webkit-border-radius:0.333em;-moz-border-radius:0.333em;border-radius:0.333em;background-color:rgba(84,87,102,1);color:#FFFFFF!important;text-decoration:none!important;text-transform:uppercase;font-size:0.778em!important;line-height:1.714em!important;cursor:pointer}






 
مــــعــــايـــنـــه HTML ، تحميل الكود أسفل الموضوع







مــــعــــايـــنـــه CSS، تحميل الكود أسفل الموضوع






مــــعــــايـــنـــه JavaScript، تحميل الكود أسفل الموضوع







مــــعــــايـــنـــه JQuery، تحميل الكود أسفل الموضوع






مــــعــــايـــنـــه منطقة النسخ، تحميل الكود أسفل الموضوع

---

طريقة وضع كود في صندوق

نشر اكواد HTML 1

كودHTML 

عند مشاركة كود HTML قم بتحويل عرض HTML كما تري بالصورة اسفل معاينة الكود، ثم قم بإستخدام هذا الكود وقم بإضافة كودHTML الخاص بك بدلاً من You HTML Code Here

<pre data-codetype="HTML">You HTML Code Here</pre>

---

مشاركة اكواد CSS 2

كودCSS 

عند مشاركة كود CSS قم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1 ، قم بإستخدام هذا الكود وقم بإضافة كود CSS الخاص بك بدلاً من You CSS Code Here

<pre data-codetype="CSS">You CSS Code Here</pre>

---

---

مشاركة اكوادJava 3

كودJava

عند مشاركة كود Javaقم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1، قم بإستخدام هذا الكود وقم بإضافة كود الـ JavaScript  الخاص بك بدلاً من You JavaScript Code Here

<pre data-codetype="JavaScript">You JavaScript Code Here</pre>

---

مشاركة اكوادJQuery4

كود JQuery

عند مشاركة كود JQueryقم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1ـ قم بإستخدام هذا الكود وقم بإضافة كود الـ JQuery t  الخاص بك بدلاً من You JQuery Code Here

<pre data-codetype="JQuery">You JQuery Code Here</pre>

---

مشاركة text5

<pre data-codetype="COPY AREA">قم بكتابة النص بدلاً من </pre>

كود text

عند مشاركة نصقم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1،  قم بإستخدام هذا الكود وقم بإضافة العبارات التي تسمح للزائر بنسخها بدلا من كلمة Your Text

---

تحميل الاكواد الذهاب الي الموقع

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا