صناديق الاكواد بشكل إحترافي

الكاتب بتاريخ عدد التعليقات : 0
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد وهو من شروحات بلوجر ويعد ايضا من اضافاته وهو صناديق الاكواد بشكل احترافي ولونين احترافيين وبحسب اللغة سواء كانت (اتش تي ام ال) او (سي اس اس) او(جافا سكرايبت)او(جيكويري)فهذه الصناديق تستخدم حسب اللغة وهناك ميزة اخرى في هذه الصناديق وهي اذا كنت تمنع النسخ من مدونتك فهذه الصناديق لا تمنع النسخ فيستطيع اي شخص نسخ الاكواد داخلها فهذا يزيد من يستخدمها احترافية لن اطيل عليكم ندخل شرح الاضافة لمدونتك :)
شرح الاضافة
1-ندخل الى لوحة التحكم ثم القالب ثم تحرير html 
2-ثم نقوم بالبحث عن ]]></b:skin>
3-ضع الكواد التالي فوقه


الصندوق الابيض
/* CSS Simple Pre Code by th3geekweb3 */ pre { background: #fff; word-wrap: break-word; overflow: auto; } pre.code { margin: 20px 25px; border: 1px solid #d9d9d9; border-radius: 2px; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.08); } pre.code label { font-family: sans-serif; font-weight: normal; font-size: 13px; color: #444; position: absolute; left: 1px; top: 16px; text-align: center; width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } pre.code code { font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; display: block; margin: 0 0 0 60px; padding: 15px 16px 14px; border-left: 1px solid #d9d9d9; overflow-x: auto; font-size: 13px; line-height: 19px; color: #444; } pre::after { content: "double click to selection"; padding: 0; width: auto; height: auto; position: absolute; right: 18px; top: 14px; font-size: 12px; color: #aaa; line-height: 20px; overflow: hidden; -webkit-backface-visibility: hidden; transition: all 0.3s ease; } pre:hover::after { opacity: 0; visibility: visible; } pre.code-css code { color: #0288d1; } pre.code-html code { color: #558b2f; } pre.code-javascript code { color: #f57c00; } pre.code-jquery code { color: #78909c; }
الصندوق الاسود
/* CSS Simple Pre Code by th3geekweb3*/ pre { background: #333; word-wrap: break-word; overflow: auto; } pre.code { margin: 20px 25px; border-radius: 4px; border: 1px solid #292929; position: relative; } pre.code label { font-family: sans-serif; font-weight: bold; font-size: 13px; color: #ddd; position: absolute; left: 1px; top: 15px; text-align: center; width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } pre.code code { font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace; display: block; margin: 0 0 0 60px; padding: 15px 16px 14px; border-left: 1px solid #555; overflow-x: auto; font-size: 13px; line-height: 19px; color: #ddd; } pre::after { content: "double click to selection"; padding: 0; width: auto; height: auto; position: absolute; right: 18px; top: 14px; font-size: 12px; color: #ddd; line-height: 20px; overflow: hidden; -webkit-backface-visibility: hidden; transition: all 0.3s ease; } pre:hover::after { opacity: 0; visibility: visible; } pre.code-css code { color: #91a7ff; } pre.code-html code { color: #aed581; } pre.code-javascript code { color: #ffa726; } pre.code-jquery code { color: #4dd0e1; }
4-نبحث عن </body>
5-نضع الكود التالي فوقه
<script type='text/javascript'>//Pre Auto Selection$('i[rel="pre"]').replaceWith(function() {    return $('<pre><code>' + $(this).html() + '</code></pre>');});var pres = document.querySelectorAll('pre,kbd,blockquote');for (var i = 0; i < pres.length; i++) {  pres[i].addEventListener("dblclick", function () {    var selection = getSelection();    var range = document.createRange();    range.selectNodeContents(this);    selection.removeAllRanges();    selection.addRange(range);  }, false);}
</script>
6-الان قم بحفظ القالب ومبروك الاداة
7-وعندما تريد استخدامها ضع الكود التالي حسب نوع لغة البرمجة التي تضعها
<pre class='code code-html'><label>HTML</label><code>كود html هنا</code></pre>
<pre class='code code-css'><label>CSS</label><code>كود css هنا</code></pre>
<pre class='code code-javascript'><label>JS</label><code>كود JavaScript هنا</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>كود jquery هنا</code></pre>
المصدر:arlina design

0 تعليق على موضوع " صناديق الاكواد بشكل إحترافي "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء