انشاء صفحة أداة تحويل الأكواد الى مدونة بلوجر (محول الأكواد)

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

ماهي اداة تحويل الأكواد (محول الأكواد) ؟

اداة تحويل الأكواد او محول الاكواد و يطلق عليها ايضا اسم محول اكواد ادسنس هي عبارة عن اداة تقوم بتحويل بعض رموز اكواد سكريبتات JavaScript ، Html، XML و css لكي تتناسب مع مهمة معينة فعلى سبيل المثال اذا اردنا وضع كود JavaScript على قالب بلوجر لن يتم قبوله من طرف القالب اذا كان JavaScript يحتوي على رموز تشبه رموز Html مثل < او > لأن قالب بلوجر لا يقبل هذه الرموز داخل JavaScript فهناك حلين لهذه المشكلة من بينها حل تحويل الأكواد قبل وضعها على القالب.

اشهر استخدامات محول الأكواد (اداة تحويل الاكواد)

1.  في حالة اذا ما قمت بوضع JavaScript في قالب مدونتك على بلوجر ولم يتم قبلوه هنا يمكنك استعمال اداة تحويل الأكاود لكي تقوم بتحويل السكريبت قبل وضعه داخل مقالب مدونتك لكي تتجنب الأخطاء التي يمكن ان تحدث.
2.  في حالة اردت مشاركة اكواد Html او JavaScript داخل تدوينة معينة فيجب عليك القيام بتحويل هذه الاكواد قبل وضعها داخل Html المدونة.

 تركيب محول الأكواد في صفحة على مدونة بلوجر

 من لوحة تحكم بلوجر

اضغط على الصفحات من خلال الشريط الجانبي الأيمن.

اضغط انشاء صفحة جديدة .

اختر عرض Html ثم قم بلصق كود محول الأكواد.

    <style>
.hmcontainer{font-size:16px;width:700px;margin:auto;position:relative;overflow:hidden;padding:10px;background-color:#eee;max-width:800px;border-radius:10px;}
#inputcode{width:100%;height:300px;resize:none;line-height:1.2em;font-family:inherit;font-size:medium;padding:5px;box-sizing:border-box;outline:none;border:solid 2px rgb(0,67,167);border-radius:6px;text-align: left;direction: ltr;}
.btncon{text-align:center;direction:rtl;}
.hmbtn{display:inline-block;padding:3px 5px;font-size:large;font-weight:bold;font-family:inherit;border:none;border-radius:3px;cursor:pointer;color:#fff;transition:200ms;margin:3px;box-sizing:border-box;}
#mhcon{background-color:#009900;}
#mhback{background-color:#990000;}
#mhcopy{background-color:#000099;}
.hmbtn:hover{opacity:0.8;}
.hmbtn:active{opacity:0.3;transition:0;}
</style>
<div class="hmcontainer">
    <textarea name="محول الاكواد" id="inputcode"></textarea>
    <div class="btncon">
        <button class="hmbtn" id="mhcon">تحويل الكود</button>
        <button class="hmbtn" id="mhback">عكس التحويل</button>
        <button class="hmbtn" id="mhcopy">نسخ الكود</button>
    </div>
</div>  
<div><br/></div>
<script>//<![CDATA[
function mohawel(e) {
    return e.replaceAll("&", "&").replaceAll('"', """).replaceAll("<", "<").replaceAll(">", ">").replaceAll("'", "'")
}

function backtahwil(e) {
    return e.replaceAll(""", '"').replaceAll("<", "<").replaceAll(">", ">").replaceAll(" ", " ").replaceAll("'", "'").replaceAll("'", "'").replaceAll("'", " ").replaceAll("&", "&")
}

function mhcopy() {
    document.querySelector("textarea").select(), document.execCommand("copy")
}
document.getElementById("mhcon").addEventListener("click", function() {
    document.getElementById("inputcode").value = mohawel(document.getElementById("inputcode").value)
}), document.getElementById("mhback").addEventListener("click", function() {
    document.getElementById("inputcode").value = backtahwil(document.getElementById("inputcode").value)
}), document.getElementById("mhcopy").addEventListener("click", mhcopy);//]]></script>

من خلال الشريط الجانبي في اليسار قم بوضع وصف للصفحة .

قم بغلق التعليقات لأنها لا تناسب هذا النوع من المحتوى.

قم بنشر الصفحة .

شرح كود أداة تحويل النصوص إلى كيانات Html

هذا الكود عبارة عن أداة بسيطة لتحويل النصوص إلى كيانات Html (HTML Entities) والعكس، بالإضافة إلى إمكانية نسخ النص المحول. إليك شرح تفصيلي لكل جزء من الكود:

الجزء الخاص بالتنسيق (css)

<style>
.hmcontainer {
    font-size: 16px;
    width: 700px;
    margin: auto;
    position: relative;
    overflow: hidden;
    padding: 10px;
    background-color: #eee;
    max-width: 800px;
    border-radius: 10px;
}

#inputcode {
    width: 100%;
    height: 300px;
    resize: none;
    line-height: 1.2em;
    font-family: inherit;
    font-size: medium;
    padding: 5px;
    box-sizing: border-box;
    outline: none;
    border: solid 2px rgb(0, 67, 167);
    border-radius: 6px;
    text-align: left;
    direction: ltr;
}

.btncon {
    text-align: center;
    direction: rtl;
}

.hmbtn {
    display: inline-block;
    padding: 3px 5px;
    font-size: large;
    font-weight: bold;
    font-family: inherit;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: #fff;
    transition: 200ms;
    margin: 3px;
    box-sizing: border-box;
}

#mhcon { background-color: #009900; }
#mhback { background-color: #990000; }
#mhcopy { background-color: #000099; }

.hmbtn:hover { opacity: 0.8; }
.hmbtn:active { opacity: 0.3; transition: 0; }
</style> 

وظيفة هذا الجزء:

• .hmcontainer: يُنشئ حاوية تحتوي على الأداة، مع تحديد عرضها، لون الخلفية، حواف مستديرة، وتنسيقات أخرى.
• #inputcode: يُنشئ مربع نص (textarea) لكتابة أو لصق النص الذي سيتم تحويله. يتم تحديد أبعاده، خطه، وحوافه.
• .btncon: يُنشئ حاوية للأزرار، مع محاذاة النص إلى الوسط.
• .hmbtn: يُنشئ أزرارًا بألوان مختلفة (أخضر، أحمر، أزرق) لكل وظيفة (تحويل، عكس التحويل، نسخ).
• تأثيرات الأزرار: عند المرور فوق الأزرار (hover)، تصبح شفافة قليلاً، وعند النقر (active)، تصبح أكثر شفافية.

الجزء الخاص بالهيكل (Html)

<div class="hmcontainer">
    <textarea name="محول الاكواد" id="inputcode"></textarea>
    <div class="btncon">
        <button class="hmbtn" id="mhcon">تحويل الكود</button>
        <button class="hmbtn" id="mhback">عكس التحويل</button>
        <button class="hmbtn" id="mhcopy">نسخ الكود</button>
    </div>
</div>

وظيفة هذا الجزء:

• textarea: مربع نص لإدخال النص الذي سيتم تحويله.
• الأزرار:
  • mhcon: زر لتحويل النص إلى كيانات Html.
  • mhback: زر لتحويل كيانات Html إلى نص عادي.
  • mhcopy: زر لنسخ النص المحول.

الجزء الخاص بالوظائف (JavaScript)

<script>
// دالة لتحويل النص إلى كيانات HTML
function mohawel(e) {
    return e.replaceAll("&", "&amp;")
            .replaceAll('"', "&quot;")
            .replaceAll("<", "&lt;")
            .replaceAll(">", "&gt;")
            .replaceAll("'", "&apos;");
}

// دالة لتحويل كيانات HTML إلى نص عادي
function backtahwil(e) {
    return e.replaceAll("&quot;", '"')
            .replaceAll("&lt;", "<")
            .replaceAll("&gt;", ">")
            .replaceAll("&apos;", "'")
            .replaceAll("&amp;", "&");
}

// دالة لنسخ النص
function mhcopy() {
    document.querySelector("textarea").select();
    document.execCommand("copy");
}

// إضافة الأحداث للأزرار
document.getElementById("mhcon").addEventListener("click", function() {
    document.getElementById("inputcode").value = mohawel(document.getElementById("inputcode").value);
});

document.getElementById("mhback").addEventListener("click", function() {
    document.getElementById("inputcode").value = backtahwil(document.getElementById("inputcode").value);
});

document.getElementById("mhcopy").addEventListener("click", mhcopy);
</script>

وظيفة هذا الجزء:

• mohawel(e): دالة لتحويل النص إلى كيانات Html:
  • & → &
  • " → "
  • < → <
  • > → >
  • ' → '
• backtahwil(e): دالة لتحويل كيانات Html إلى نص عادي:
  • " → "
  • < → <
  • > → >
  • ' → '
  • & → &
• mhcopy(): دالة لنسخ النص الموجود في textarea إلى الحافظة.
• الأحداث (Event Listeners):
  • عند النقر على زر "تحويل الكود" (mhcon)، يتم استدعاء دالة mohawel لتحويل النص.
  • عند النقر على زر "عكس التحويل" (mhback)، يتم استدعاء دالة backtahwil لتحويل النص إلى حالته الأصلية.
  • عند النقر على زر "نسخ الكود" (mhcopy)، يتم نسخ النص الموجود في textarea.

كيف تعمل الأداة؟

1. تحويل النص إلى كيانات Html:
   • أدخل النص في مربع النص.
   • انقر على زر "تحويل الكود".
   • سيتم تحويل النص إلى كيانات Html (مثل < → <).
2. عكس التحويل:
   • إذا كان النص محولًا إلى كيانات Html انقر على زر "عكس التحويل".
   • سيتم تحويل الكيانات إلى نص عادي.
3. نسخ النص:
   • بعد التحويل أو عكسه، انقر على زر "نسخ الكود" لنسخ النص إلى الحافظة.

استخدامات الأداة:

• تحويل النصوص إلى كيانات Html: مفيد عند كتابة أكواد HTML أو JavaScript في صفحات الويب لتجنب تفسيرها بشكل خاطئ.
• عكس التحويل: لتحويل كيانات Html إلى نص عادي.
• نسخ النص المحول: لتسهيل استخدام النص المحول في أماكن أخرى.

ملاحظات:

• الكود يعتمد على JavaScript الأساسي، ولا يتطلب أي مكتبات خارجية.
• يمكن تحسين الأداة بإضافة رسائل تأكيد عند النسخ أو دعم المزيد من الكيانات.