إضافة صندوق الأكواد المتطور لمدونات بلوجر

صندوق الأكواد هي إضافة مهمة كثيرا لأصحاب المدونات التي تستعمل غالبا الأكواد في شروحاتها , لماذا؟ صندوق الأكواد يحسن شكل المدونة و يعطيها مظهرا أفضل من المظهر بدون صندوق الأكواد , إذا ل تستعمل صندوق الأكواد و أنت تضع أكواد في تدويناتك فهذه الأكواد ستزعج زوارك بالتأكيد لأنها في بعض الأحيان تكون كثيرة أو تلتصق مع باقي الموضوع و ما إلى ذلك .

إضافة صندوق الأكواد المتطور لمدونات بلوجر

صندوق الأكواد الذي سأقدمه لكم يتميز بخاصيته مهمتين , مظهره المناسب و الذي يمكنك تغييره عبر أكواد css  الذي يختصرالأكواد إذا كانت كثيرة لكي تحافظ على حجم الصفحة قليلا , و الخاصية الثانية هي عندما تضغط على الكود يتم تحديده مباشرة كمثال :

إضافة صندوق الأكواد المتطور لمدونات بلوجر

هذا سيكون حلا مناسبا للأكواد الكبيرة فما عليك إلا الضغط على الكود ليتم تحديده ثم تقوم بنسخه . من جانب آخر إذا كنت تستخدم سكربت منع التسخ من مدونتك , سيسمح لك هذا الصندوق بإتاحه نسخ الأكواد فقط بدون أن يتم نسخ محتوى مدونتك .

طريقة إضافة الصندوق :

أدخل إلى بلوجر ⇠ قالب ⇠ تحرير HTML و قم بالبحث عن ]]></b:skin> عن طريق ctrl + f و ضع الكود التالي فوقه مباشرة
.code,#code {
    background: #f5f4f4;
    color: #0b4103;
    padding: 10px 0 10px 10px;
    border-left: 20px solid #848484!important;
    max-height: 300px;
    overflow: auto;
    direction: ltr!important;
    font-size: 13px!important;
    text-align: left!important;
    box-shadow: 0 0 1px 0 #1e1c0f 0;
    margin: 10px 0
}
بعض وضع الكود نقوم بالبحث عن </body> و نضع فوقه الكود التالي :
<script type='text/javascript'>
$(&quot;.code&quot;).on(&quot;mouseup&quot;, function () {
var sel, range;
var el = $(this)[0];
if (window.getSelection &amp;&amp; document.createRange) {
sel = window.getSelection();
if (sel.toString() == &quot;&quot;) window.setTimeout(function () {
range = document.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range)
},
1)
} else if (document.selection) {
sel = document.selection.createRange();
if (sel.text == &quot;&quot;) {
range = document.body.createTextRange();
range.moveToElementText(el);
range.select()
}
}
});
</script>

طريقة إستعمال الصندوق :

عندما تكتب موضوعا , إذا أردت إستعمال الصندوق , قم بالإنتقال إلى HTML إضافة صندوق الأكواد المتطور لمدونات بلوجر  و قم بإضافة هذا الكود فيه
<div class='code'> example </div>
ثم إنتقل إلى التأليف مرة أخرى , ستلاحظ أن هناك كتابة زائدة ( example ) قم بتغييرها بالكود الخاص بك و سيظهر داخل الصندوق .

إن لم يعمل سكربت التحديد المباشر , قم بالبحث عن <head> و ضع أسفله كود مكتبة الجكويري التالي :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

و ستشتغل بإذن الله ,

تغيير ألوان الصندوق :

لتغيير ألوان الصندوق غير المعلومات التالية في الكود الأول :
#f5f4f4   : لون خلفية الصندوق
#0b4103 : لون الكتابة
#848484 : لون الحد على اليمين

نحاول قدر الإمكان في كوداتي وضع أفضل تصاميم بلوجر سواء من ناحية الإضافات أو قوالب بلوجر , كما نشارك طرق تحسين المواقع في ما يتعلق بالسيو

avatar

الكود شغال شكرا

delete 5/5/17
avatar

مرحبا بك في أي وقت

delete 4/7/17



التعابير