وصف المدون

Hello, I am Abdulaziz, a technical blogger and founder of technology website, interested in the internet and web design field. My goal is to create a website that provides design and problem-solving services.

إعلان الرئيسية

الصفحة الرئيسية غير مصنف طريقة عمل صندوق الاكواد في مدونة بلوجر بشكل احترافي

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

 

إنشاء صندوق لإختصار أكواد HTML لمدونات بلوجر داخل المواضيع

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

 

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

 

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

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


1.قم بالدخول الي مدونة بلوجر

2.من القائمة انقر فوق المظهر ثم تعديل HTML

3.إبحث عن هذا الوسم بإستخدام  Ctrl+F عن ]]></b:skin>

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  

 

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



تحميل الأكواد 


تحميل الاكواد

إنضم الي جروب تلجرام للربح من بلوجر وحل المشاكل التي قد تواجهك.
إنضم الي جروبنا علي تلجرام

Back to top button