اضافة محرر html الي مدونتك او موقعك

  

نسخة أوضح من الصورة بالاعلي

أمتلاك محرر HTML يمكن أن يكون ذا أهمية كبيرة في في تحسين الخدمات التي تقدمها لزوارك من تجربة ل افضل اضافات بلوجر ( اضافات بلوجر احترافيه) او أدوات مطوري الويب دون مغادرة موقعك او مدونتك ،مما يسهم في تحسين تجربة الزوار في موقع الويب او مدونة في منصة بلوجر، ما يؤدي الي تحسين ترتيب موقعك في محركات البحث SEO و بالتالي زيادة عدد زوار موقعك . إليك بعض الأسباب التي قد تجعل امتلاك محرر HTML مفيدًا:

1. تحرير الكود بسهولة: يسمح لك محرر HTML بتحرير وتعديل الشيفرة بطريقة سهلة وفعالة. هذا يعني أنك تحكم كامل.

2. تحسين التصميم: يمكنك ضبط العديد من جوانب التصميم مثل الألوان، الخطوط، الهيكل، والتخطيط باستخدام ال HTML. هذا يتيح لك إضفاء الطابع الفريد والملاءمة لموقعك.

3. تكامل مع تقنيات أخرى: يمكنك دمج ال HTML مع لغات أخرى مثل CSS للتنسيق وJavaScript لإضافة التفاعل والديناميكية. إذا كنت تمتلك محرر HTML، ستكون قادرًا على تحرير وتكامل هذه التقنيات بسهولة.

4. التعلم والتطوير: عندما تمتلك محرر HTML، يمكنك تعلم كيفية كتابة الشيفرة بشكل أفضل وكيفية تحسين مهارات التطوير الخاصة بك. هذا يفتح أبواباً لفهم أعمق لكيفية عمل الويب.

تجربة محرر HTML 

كود الاضافة

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

  <style>

    .share43 {

      position: fixed;

      bottom: 1%;

      right: 5%;

      width: 60px;

      height: 60px;

      z-index: 3000;

    }

    .togglesh43 {

      position: absolute;

      top: 0;

      left: -2px;

      width: 100%;

      height: 100%;

      background: #e91e63;

      transform: scale(0.95);

      overflow: hidden;

      border-radius: 2px;

      z-index: 1001; /* Increased z-index to appear above the modal */

      cursor: pointer;

border-radius: 50%;

    }

    .togglesh43:before {

      content: '\f13b';

      font-family: fontAwesome;

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      text-align: center;

      line-height: 60px;

      color: #fff;

      font-size: 30px;

    }

    .togglesh43.active:before {

      content: '\f00d';

    }

    .modal43 {

      position: fixed;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

      display: none;

      overflow: hidden;

      outline: 0;

      z-index: 999;

      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background color */

    }

    .far43 {

      width: 100%;

      height: calc(100% - 75px); /* Adjusted height to leave space for the modal */

      border: 0;

    }

  </style>

<div class="share43">

  <div class="togglesh43" onclick="myFunction43()"></div>

</div>

<div id="id01sh" class="modal43">

  <iframe class="far43" src="https://html-editor2022.netlify.app/"></iframe>

</div>

<script>

  function myFunction43() {

    var modal = document.getElementById("id01sh");

    "block" === modal.style.display ? modal.style.display = "none" : modal.style.display = "block";

  }

  var modal = document.getElementById("id01sh");

  window.onclick = function (d) {

  if (d.target == modal) {

    modal.style.display = "none";

    $(".togglesh43").toggleClass("active");

  } 

}

</script>

<script>

  $(document).ready(function () {

    $(".togglesh43").click(function () {

      $(".togglesh43").toggleClass("active");

    });

  })

</script>

تطبيقات علي الاضافة 

هذه الإضافة تعني الكثير لمدوني بلوجر الذين يقدمون اضافات بلوجر احترافيه.