ما فائدة صندوق الاكواد؟
صندوق الاكواد يسمح للزائر بنسخ
الكواد التي تضعه داخل التدوينة بشكل صحيح بدون حدوث اخطاء اثناء النسخ، كما انه
مفيد بالنسبة لك حيث يمكنك تفعيل خاصية عدم النسخ من المدونة لحماية التدوينات من
السرقة ويظل صندوق الاكواد هو المكان الوحيد الذي يمكن النسخ من خلاله، كما إنه
دليل علي إحترافية المدونة.
طريقة عمل صندوق اكواد خاص بمدونتك بشكل احترافي.
(إحتفظ بنسخة من قالب المدونة قبل إضافة الكود تفادياً لأي خطأ)
1.قم بالدخول الي مدونة بلوجر
2.من القائمة انقر فوق المظهر ثم تعديل HTML
3.إبحث عن هذا الوسم بإستخدام Ctrl+F عن
4.قم بوضع هذا الكود فوقه مباشرةً كما هو موضح بالصورة أسفل الكود:
/*----------
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}
5.قم بحفظ
القالب.
طريقة وضع كود في صندوق الأكواد
1. نشر اكواد HTML
عند مشاركة كود HTML قم بتحويل عرض HTML كما تري بالصورة اسفل معاينة الكود، ثم قم بإستخدام هذا الكود وقم بإضافة كودHTML الخاص بك بدلاً من You HTML Code Here
مــــعــــايـــنـــه HTML ، تحميل الكود أسفل الموضوع
2. مشاركة اكواد CSS
عند مشاركة كود CSS قم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1 ، قم بإستخدام هذا الكود وقم بإضافة كود CSS الخاص بك بدلاً من You CSS Code Here
مــــعــــايـــنـــه CSS، تحميل الكود أسفل الموضوع
3. مشاركة اكواد JavaScript
عند مشاركة كود Java قم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1، قم بإستخدام هذا الكود وقم بإضافة كود الـ JavaScript الخاص بك بدلاً من You JavaScript Code Here
مــــعــــايـــنـــه JavaScript، تحميل الكود أسفل الموضوع
4. مشاركة اكواد JQuery
عند مشاركة كود JQuery قم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1ـ قم بإستخدام هذا الكود وقم بإضافة كود الـ JQuery t الخاص بك بدلاً من You JQuery Code Here
مــــعــــايـــنـــه JQuery، تحميل الكود أسفل الموضوع
5. مشاركة نص
(هذه الخاصية تصلح مع ميزة مانع النسخ، قد تتيح لزوار المدونة عمل نسخ فقط من داخل هذا الصندوق)
عند مشاركة نص قم بتحويل عرض HTML كما تري بالصورة اسفل الكود رقم 1، قم بإستخدام هذا الكود وقم بإضافة العبارات التي تسمح للزائر بنسخها بدلا من كلمة Your Text
مــــعــــايـــنـــه منطقة النسخ، تحميل الكود أسفل الموضوع