اضافة صندوق دردشة الذكاء الصناعي لموقعك مجانا

إضافة صندوق دردشه يعمل بالذكاء الصناعي لموقعك 

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

اضافة chatgpt علي قوالب بلوجر مجانية هي تدوينة اليوم و لكن لنعرف مميزات هذه الإضافة :

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

 كيفية تركيب أضافة دردشة الذكاء الصناعي لموقعك

1. انسخ الكود بالأسفل.
2. توجه الي تنسيق 'layout' في القائمة الجانبية.
3. نختار إضافة أداة
4. نختار html/javascript كما هو موضح بالصور

معاينة إضافة بلوجر (صور)

معاينة الأداة علي الطبيعة

تطبيقات لاستخدام هذه الإضافة

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

كود الاضافة

الشكل الاول 

<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:20%;left:0;width:80px;height:80px;z-index:3000}.togglesh43{position:absolute;top:0;left:-2px;width:100%;height:100%;background:#e91e63;transform:scale(.95);overflow:hidden;border-radius:2px;z-index:1000;cursor:pointer}.togglesh43:before{content:'\f544';font-family:fontAwesome;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;line-height:80px;color:#fff;font-size:55px}.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}</style>

<div class=share43>

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

</div>

<div id=id01sh class=modal43>

<iframe class=far43 src=https://robochat.netlify.app/index1.html style=width:100%;height:100%;border:0>

</iframe>

</div>

<script>function myFunction43(){var l=document.getElementById("id01sh");"block"===l.style.display?l.style.display="none":l.style.display="block"}</script>

<script>var modal=document.getElementById("id01sh");window.onclick=function(d){d.target==modal&&(modal.style.display="none")}</script>

<script>$(document).ready((function(){$(".togglesh43").click((function(){$(".togglesh43").toggleClass("active"),$("ul").toggleClass("active")}))}))</script>

الشكل الثاني

<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: '\f544';
      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://robochat.netlify.app/index1.html"></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>

يمكنك تجربة الكود هنا :

مطورين javascript :

هذا مثال عن fetch api .