<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://www.joker0o.xyz/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>

خريطة موقع قالب نعناع

شرح إنشاء مدونة بلوجر 2022 مجاناً وتركيب قالب وضبط الاعدادات (شرح مفصل للمبتدئين ) دورة بلوجر 2022
شرح إنشاء مدونة بلوجر إنجليزية 2022 مجاناً | 10000$ دولار شهريا | create a website for business
https://youtu.be/qEDGXWSKY84
قالب التنظيف: https://bit.ly/3pLO48O
قالب سيو بلس مجاني انجلش: https://t.co/Badh09hhT7
robots.txt: https://t.co/Badh09hhT7
Privacy policy: https://t.co/Badh09hhT7

زر واتس وماسنجر

<!-- whatsapp text support widget by joker0o.xyz -->
<script type="text/javascript">
(function () {
var options = {
facebook: "100883498309122", // Facebook page ID
whatsapp: "972597689413", // WhatsApp number
call_to_action: "كيف يمكنني مساعدتك", // Call to action
button_color: "#FF6550", // Color of button
position: "right", // Position may be 'right' or 'left'
order: "facebook,whatsapp", // Order of buttons
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<style>
.dfBDQI {visibility: hidden;}
</style>
<!-- /whatsapp text support widget by joker0o.xyz -->

زر واتس واتصال هاتفي
<!-- whatsapp text support widget by joker0o.xyz -->
<script type="text/javascript">
(function () {
var options = {
whatsapp: "972597689413", // WhatsApp number
call: "972597689413", // Call phone number
call_to_action: "كيف يمكنني مساعدتك", // Call to action
button_color: "#FF6550", // Color of button
position: "right", // Position may be 'right' or 'left'
order: "whatsapp,call", // Order of buttons
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<style>
.dfBDQI {visibility: hidden;}
</style>
<!-- /whatsapp text support widget by joker0o.xyz -->


زر واتس فقط
<!-- whatsapp text support widget by joker0o.xyz -->
<script type="text/javascript">
(function () {
var options = {
whatsapp: "972597689413", // WhatsApp number
call_to_action: "كيف يمكنني مساعدتك", // Call to action
position: "right", // Position may be 'right' or 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<style>
.dfBDQI {visibility: hidden;}
</style>
<!-- /whatsapp text support widget by joker0o.xyz -->



زر ماسنجر
<!-- whatsapp text support widget by joker0o.xyz -->
<script type="text/javascript">
(function () {
var options = {
facebook: "100883498309122", // Facebook page ID
call_to_action: "كيف يمكنني مساعدتك", // Call to action
position: "right", // Position may be 'right' or 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
</script>
<style>
.dfBDQI {visibility: hidden;}
</style>
<!-- /whatsapp text support widget by joker0o.xyz -->

/* جدول مواصفات الهواتف بواسطة قوود توينز باللون الأخضر لتغيره أبحث عن (#43a047) وغيره بما يناسبك */
.mw-sp{position:relative;width:100%;line-height:15px;font-family:'Noto Sans', sans-serif;font-size:12px;color:#455065;font-weight:400;background:#ebeff3;margin-top:5px;padding:12px 70px 12px 0}
.mw-sp:before{content:'';position:absolute;height:100%;width:50px;right:0;top:0;padding:10px;z-index:2}
.mw-sp.icon-battery:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M16 20H8V6H16M16.67 4H15V2H9V4H7.33C6.6 4 6 4.6 6 5.33V20.67C6 21.4 6.6 22 7.33 22H16.67C17.41 22 18 21.41 18 20.67V5.33C18 4.6 17.4 4 16.67 4M15 16H9V19H15V16M15 7H9V10H15V7M15 11.5H9V14.5H15V11.5Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-dimension:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-chipset:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M5,3H7V5H9V3H11V5H13V3H15V5H17V3H19V5H21V7H19V9H21V11H19V13H21V15H19V17H21V19H19V21H17V19H15V21H13V19H11V21H9V19H7V21H5V19H3V17H5V15H3V13H5V11H3V9H5V7H3V5H5V3Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-storage:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M18,8H16V4H18M15,8H13V4H15M12,8H10V4H12M18,2H10L4,8V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-camera:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M12,17C10.37,17 8.94,16.21 8,15H12A3,3 0 0,0 15,12C15,11.65 14.93,11.31 14.82,11H16.9C16.96,11.32 17,11.66 17,12A5,5 0 0,1 12,17M12,7C13.63,7 15.06,7.79 16,9H12A3,3 0 0,0 9,12C9,12.35 9.07,12.68 9.18,13H7.1C7.03,12.68 7,12.34 7,12A5,5 0 0,1 12,7M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-os:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#43a047}
.mw-sp.icon-nameicon:before{content:'';background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='%23fff' d='M7 22H9V24H7V22M11 22H13V24H11V22M15 22H17V24H15V22M5 4H19A2 2 0 0 1 21 6V18A2 2 0 0 1 19 20H5A2 2 0 0 1 3 18V6A2 2 0 0 1 5 4M5 8V18H19V8H5' /></svg>") center / 12px no-repeat;background-size:20px 20px;background-color:#FF6383}







كود المقال لمواصفات الهاتف


<div class="mw-sp icon-battery">
<b>سعة البطارية:</b> 5000mAh
</div>

<div class="mw-sp icon-dimension">
<b>الأبعاد:</b> 197g, 0mm thickness
</div>

<div class="mw-sp icon-chipset">
<b>المعالج:</b> Qualomm Snapdragon 450
</div>

<div class="mw-sp icon-storage">
<b>التخزين:</b> 32Gb/64GB
</div>

<div class="mw-sp icon-camera">
<b>الكاميرا:</b> Rear, 13 MP + Front, 8 Mp
</div>

<div class="mw-sp icon-os">
<b>نطام التشغيل:</b> Android 10
</div>

<div class="mw-sp icon-nameicon">
<b>التأثيرات:</b> roid
</div>

قالب التنظيف
https://www.mediafire.com/file/x13xyurtmb8qzbf/قالب+تنظيف.txt/file
كود داخل المشاركة
https://www.mediafire.com/file/s1reas35fl6z3g7/كود+داخل+المشاركة.txt/file
قالب بلوجر هواتف
https://www.mediafire.com/file/psos2oiecd4jjfn/قالب+هواتف.xml/file

إضافة صندوق تضمين الأكواد مع زر النسخ في بلوجر 2023


head

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300" rel="stylesheet"/>


أكواد HTML


<div class="codeBlockCopy" >
<form>
<textarea dir="ltr" id="mytext" rows="5">
Your code here
</textarea>
</form>
<button onclick="document.getElementById('mytext').select();
document.execCommand('copy');">نسخ الكل <i class="fa fa-copy"></i></button>
</div>



وهذا هو كود CSS الخاص بهذا الصندوق:

.codeBlockCopy {margin:10px; padding-left:10px}

.codeBlockCopy textarea {width:90%; background:#f3f3f3; padding:5px;border:1px solid gray; font-family: 'Fira Code'}

.codeBlockCopy button {border: 1px solid gray;cursor: pointer}

محول اكواد ادسنس

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">
<br />
<div class="separator" style="clear: both; text-align: center;"><br /></div>
<b><span style="color: #800180; font-family: times; font-size: x-large;">مرحبا بكم اصدقاء <a href="https://www.joker0o.de">مدونة قود توينز</a></span></b></div><div style="text-align: center;"><b><span style="font-size: x-large;">..</span></b></div><div style="text-align: center;"><b><span style="font-size: x-large;"><span style="color: red;">هذا المحول أكواد</span> <span style="font-family: times;">نستخدمه لتعديل تكويد السكريبتات التي لا يقبلها القالب مثل الشفرات الإعلانية لأدسنس أو لإضافة اكواد في تعليقات بلوجر</span></span></b></div>
<div style="text-align: center;">
<br /></div>
<div dir="rtl" style="text-align: right;" trbidi="on">
<center>
<iframe idm_frm="2341" frameborder="0" height="240px" marginheight="0px" marginwidth="0px" name="myiFrmo" scrolling="no" src="data:text/html;base64,PGh0bWw+PGhlYWQ+CjxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PVVURi04Ij4KPG1ldGEgY2hhcnNldD0idXRmLTgiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgpib2R5IHttYXJnaW46IDA7cGFkZGluZzogMDt9CnRleHRhcmVhIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTU1OwogIGJvcmRlcjogMCBub25lOwogIGNvbG9yOiAjZmZmOwogIGRpcmVjdGlvbjogbHRyOwogIGRpc3BsYXk6IGJsb2NrOwogIGZsb2F0OiByaWdodDsKICBmb250OiAxNHB4IGFyaWFsOwogIGhlaWdodDogMjAwcHg7CiAgcGFkZGluZzogNXB4OwogIHRleHQtYWxpZ246IGxlZnQ7CiAgd2lkdGg6IDEwMCU7Cn0KaW5wdXQgewogIGJhY2tncm91bmQtY29sb3I6ICNlZWU7CiAgYm9yZGVyOiAwIG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDFweCAjYmJiIGluc2V0OwogIGNvbG9yOiAjNDQ0OwogIGN1cnNvcjogcG9pbnRlcjsKICBkaXNwbGF5OiBibG9jazsKICBmbG9hdDogcmlnaHQ7CiAgZm9udDogYm9sZCAxNHB4IHRhaG9tYTsKICBtYXJnaW4tdG9wOiAtMXB4OwogIHBhZGRpbmc6IDVweCAwIDhweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgdHJhbnNpdGlvbjogYWxsIDAuN3MgZWFzZSAwczsKICB3aWR0aDogNTAlOwp9CmlucHV0OmhvdmVyIHsgYmFja2dyb3VuZC1jb2xvcjogIzQ0NkZBQTsgY29sb3I6ICNmZmY7fQo8L3N0eWxlPgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI+Ci8vPCFbQ0RBVEFbCmZ1bmN0aW9uIGh0bWwyZW50aXRpZXMoKXsKdmFyIHJlPS9bPD4iJyZdL2cKZm9yIChpPTA7IGk8YXJndW1lbnRzLmxlbmd0aDsgaSsrKQphcmd1bWVudHNbaV0udmFsdWU9YXJndW1lbnRzW2ldLnZhbHVlLnJlcGxhY2UocmUsIGZ1bmN0aW9uKG0pe3JldHVybiByZXBsYWNlY2hhcihtKX0pCn0KZnVuY3Rpb24gcmVwbGFjZWNoYXIobWF0Y2gpewppZiAobWF0Y2g9PSI8IikKcmV0dXJuICImbHQ7IgplbHNlIGlmIChtYXRjaD09Ij4iKQpyZXR1cm4gIiZndDsiCmVsc2UgaWYgKG1hdGNoPT0iXCIiKQpyZXR1cm4gIiZxdW90OyIKZWxzZSBpZiAobWF0Y2g9PSInIikKcmV0dXJuICImIzAzOTsiCmVsc2UgaWYgKG1hdGNoPT0iJiIpCnJldHVybiAiJmFtcDsiCn0KLy9dXT4KPC9zY3JpcHQ+CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KLy88IVtDREFUQVsKLy9DaGFyYWN0ZXIgY291bnQgc2NyaXB0CmZ1bmN0aW9uIGNvdW50aXQod2hhdCl7CmZvcm1jb250ZW50PXdoYXQuZm9ybS5jaGFyY291bnQudmFsdWUKd2hhdC5mb3JtLmRpc3BsYXljb3VudC52YWx1ZT1mb3JtY29udGVudC5sZW5ndGgKfQovL11dPgo8L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KPGZvcm0+Cjx0ZXh0YXJlYSBuYW1lPSJkYXRhMSIgcGxhY2Vob2xkZXI9Ii4uLiDYo9i22YEg2KfZhNmD2YjYryDYp9mE2YXYsdin2K8g2KrYrdmI2YrZhNmHINmH2YbYpyI+PC90ZXh0YXJlYT48YnI+CjxpbnB1dCBjbGFzcz0idGFod2VsY25tdSIgbmFtZT0iYnV0dG9uIiAgb25jbGljaz0iaHRtbDJlbnRpdGllcyh0aGlzLmZvcm0uZGF0YTEpIiB2YWx1ZT0i2KrYrdmI2YrZhCIgdHlwZT0iYnV0dG9uIj4gCjxpbnB1dCBjbGFzcz0iaGF6ZmNubXUibmFtZT0iQ2xlYXIiIHZhbHVlPSIgINmF2LPYrSAgIiB0eXBlPSJyZXNldCI+Cgo8L2Zvcm0+Cgo8L2JvZHk+PC9odG1sPgo=" style="border: 0px none; max-width: 600px;" width="100%"></iframe>
</center>
</div>
</div>

طريقة إضافة صندوق الأكواد إلى مدونة بلوجر 2023 , Blogger code box


]]></b:skin>



pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2B303B;position:relative;max-height:500px;text-align:left;direction:ltr;}
pre::after{content:'اضغط مرتين للنسخ';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#ffffff;line-height:20px;background: red;font-family: 'Tajawal';}
pre:hover::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:-8px;visibility:visible;}
pre code{display:block;background:none;border:none;color:#C0C5CE;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold;font:14px 'Consolas','Monaco',monospace,Courier,Courier New;}
pre code .token.prolog{color:#b1b1b1;}
pre code .token.doctype{color:#b1b1b1;}
pre code .token.cdata{color:#b1b1b1;}
pre code .token.url{color:#ccc;}
pre .language-css .token.string{color:#ccc;}
pre .style .token.string{color:#ccc;}
pre code .token.atrule{color:#009999;}
pre code .token.atrule{color:#1baeb0;}
pre code .token.regex{color:#ccc;}
pre code .token.important{font-weight:bold;}
pre code .token.entity{color:#759bb9;cursor:help;}
pre code .namespace{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:.8;}
pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;}
pre code .token.attr-name{color:#C0C5CE;}
pre code .token.selector{color:#759bb9;}
pre code .token.property{color:#759bb9;}
pre code .token.comment{color:#8c919a;font-style:italic;}
pre code .token.punctuation{color:#8FA1B3;}
pre code .token.operator{color:#4d9bd8;}
pre code .token.number,pre code .token.boolean{color:#cec768;}
pre code .token.attr-value{color:#f79029;}
pre code .token.string{color:#A3BE8C;}
pre code .token.keyword{color:#94719c;font-style:italic;}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;}
/*======comments pre======*/
.comments pre{padding:10px 10px 15px 10px;background:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border:none;}
.comments pre::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
/*=======line numbers========*/
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTMLku']:before{color:#f79029;}
pre[data-codetype='CSSku']:before{color:#759bb9;}
pre[data-codetype='JavaScriptku']:before{color:#d4b447;}
pre[data-codetype='JQueryku']:before{color:#94719c;}
/*=======transition=======*/
pre::after{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
/*=======border radius=======*/
pre,.comments pre::before{border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}

......................................................................................

</body>




<script type='text/javascript'>
//<![CDATA[

!function(){var o=/\blang(?:uage)?-(?!\*)(\w+)\b/i,y=self.Prism={languages:{insertBefore:function(e,t,a,n){var r=(n=ny.languages)[e],i={};for(var s in r)if(r.hasOwnProperty(s)){if(s==t)for(var g in a)a.hasOwnProperty(g)&&(i[g]=a[g]);i[s]=r[s]}return n[e]=i},DFS:function(e,t){for(var a in e)t.call(e,a,e[a]),"[object Object]"===Object.prototype.toString.call(e)&&y.languages.DFS(e[a],t)}},highlightAll:function(e,t){for(var a,n=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),r=0;a=n[r++];)y.highlightElement(a,!0===e,t)},highlightElement:function(e,t,a){for(var n,r,i=e;i&&!o.test(i.className);)i=i.parentNode;if(i&&(n=(i.className.match(o)[,""])[1],r=y.languages[n]),r){e.className=e.className.replace(o,"").replace(/\s+/g," ")+" language-"+n,i=e.parentNode,/pre/i.test(i.nodeName)&&(i.className=i.className.replace(o,"").replace(/\s+/g," ")+" language-"+n);var s=e.textContent.trim();if(s){var g={element:e,language:n,grammar:r,code:s=s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\u00a0/g," ")};if(y.hooks.run("before-highlight",g),t&&self.Worker){var l=new Worker(y.filename);l.onmessage=function(e){g.highlightedCode=c.stringify(JSON.parse(e.data)),g.element.innerHTML=g.highlightedCode,a&&a.call(g.element),y.hooks.run("after-highlight",g)},l.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=y.highlight(g.code,g.grammar),g.element.innerHTML=g.highlightedCode,a&&a.call(e),y.hooks.run("after-highlight",g)}}},highlight:function(e,t){return c.stringify(y.tokenize(e,t))},tokenize:function(e,t){var a=y.Token,n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var s=t[i],g=s.inside,l=!!s.lookbehind0;s=s.patterns;for(var o=0;o<n.length;o++){var c=n[o];if(n.length>e.length)break e;if(!(c instanceof a))if(s.lastIndex=0,u=s.exec(c)){l&&(l=u[1].length);var u,p=u.index-1+l,h=p+(u=u[0].slice(l)).length,d=c.slice(0,p+1),f=c.slice(h+1),m=[o,1];d&&m.push(d);var b=new a(i,g?y.tokenize(u,g):u);m.push(b),f&&m.push(f),Array.prototype.splice.apply(n,m)}}}return n},hooks:{all:{},add:function(e,t){var a=y.hooks.all;a[e]=a[e][],a[e].push(t)},run:function(e,t){var a=y.hooks.all[e];if(a&&a.length)for(var n,r=0;n=a[r++];)n(t)}}},c=y.Token=function(e,t){this.type=e,this.content=t};if(c.stringify=function(e){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e)){for(var t=0;t<e.length;t++)e[t]=c.stringify(e[t]);return e.join("")}var a={type:e.type,content:c.stringify(e.content),tag:"span",classes:["token",e.type],attributes:{}};"comment"==a.type&&(a.attributes.spellcheck="true"),y.hooks.run("wrap",a);var n="";for(var r in a.attributes)n+=r+'="'+(a.attributes[r]"")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'" '+n+">"+a.content+"</"+a.tag+">"},self.document){var e=document.getElementsByTagName("script");(e=e[e.length-1])&&(y.filename=e.src,document.addEventListener&&!e.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",y.highlightAll))}else self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,n=t.code;self.postMessage(JSON.stringify(y.tokenize(n,y.languages[a]))),self.close()},!1)}(),Prism.languages.markup={comment:/&lt;!--[\w\W]*?--(&gt;|&gt;)/g,prolog:/&lt;\?.+?\?&gt;/,doctype:/&lt;!DOCTYPE.+?&gt;/,cdata:/&lt;!\[CDATA\[[\w\W]+?]]&gt;/i,tag:{pattern:/&lt;\/?[\w:-]+\s*[\w\W]*?&gt;/gi,inside:{tag:{pattern:/^&lt;\/?[\w:-]+/i,inside:{punctuation:/^&lt;\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(('|")[\w\W]*?(\2)|[^\s>]+)/gi,inside:{punctuation:/=/g}},punctuation:/\/?&gt;/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&amp;#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&amp;/,"&"))}),Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+.+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:

/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/style(>|&gt;)/gi,inside:{tag:{pattern:/(&lt;|<)style[\w\W]*?(>|&gt;)|(&lt;|<)\/style(>|&gt;)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}}),Prism.languages.javascript={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0},keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,boolean:/\b(true|false)\b/g,number:/\b-?(0x)?\d*\.?\d+\b/g,operator:/[-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\//g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g},Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)[\w\W]*?(&lt;|<)\/script(>|&gt;)/gi,inside:{tag:{pattern:/(&lt;|<)script[\w\W]*?(>|&gt;)|(&lt;|<)\/script(>|&gt;)/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}),Prism.languages.java={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/g,boolean:/\b(true|false)\b/g,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+[e]?[\d]*[df]\b|\W\d*\.?\d+\b/gi,operator:{pattern:/([^\.]|^)([-+]{1,2}|!|=?&lt;|=?&gt;|={1,2}|(&amp;){1,2}|\|?\||\?|\*|\/|%|\^|(&lt;){2}|($gt;){2,3}|:|~)/g,lookbehind:!0},ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
//Line Number
$('pre').attr('class', 'line-numbers');Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;i!/pre/i.test(t.nodeName)e)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)});
//SelectorAll
for(var pres=document.querySelectorAll("var,samp,strong,em,code,pre,kbd,blockquote,value,textarea"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);

//]]>
</script>

......................................................................................
كود استخدمه دائما لاضافة الاكواد في مقال تقني
<pre><code class="language-markup">
<!--ضع الاكواد بعد تحويلها هنا-->
</code></pre>