يرجى متابعة الموقع للحصول على كل ما هو جديد وحصري . متابعة
الصفحة الرئيسية
إضافات بلوجر
مدونة بلوجر

طريقة إضافة صندوق منبثق تلقائي في مدونة بلوجر باستخدام HTML و CSS

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

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

خطوات تركيب الإضافة

  1. انتقل الى منصة بلوجر
  2. من القائمة الجانبية اختر تنسيق "صفحة التخطيط"
  3. إضافة أداة جديدة HTML / JavaScript
  4. قم بنسخ الكود الموجود في صندوق الأكواد والصقه داخل الأداة واضغط حفظ. 


<style>
.pumslu{background:#ffffff;width:420px;z-index:100;padding:30px 40px;position:fixed;transform:translate(50%,-50%);right:50%;top:50%;border-radius:8px;font-family:"Poppins",sans-serif;display:none;text-align:center}
.pumslu button{display:block;margin:0 auto 20px 0;background-color:#fff;font-size:30px;color:#ffffff;background:#03549a;border-radius:100%;width:40px;height:40px;border:none;outline:none;cursor:pointer}
.pumslu h2{margin-top:-20px}
.pumslu p{font-size:14px;text-align:justify;margin:20px 0;line-height:25px}
.pumslu a{display:block;width:150px;position:relative;margin:10px auto;text-align:center;background-color:#0f72e5;border-radius:20px;color:#ffffff;text-decoration:none;padding:8px 0}
</style>
<div class="pumslu">
<button id="close">&times;</button>
<h2>صندوق منبثقة تلقائي</h2>
<p>
مرحبا بك في موقع قوالب لونا، أفضل موقع عربي لتحميل قوالب بلوجر المعربة مجاناً وبدون حقوق
</p>
<a href="https://luna-templates.blogspot.com">اشتراك</a>
</div>
<script type="text/javascript">window.addEventListener("load",function(){setTimeout(function a(b){document.querySelector(".pumslu").style.display="block"},2000)});document.querySelector("#close").addEventListener("click",function(){document.querySelector(".pumslu").style.display="none"});</script>

لان كل ما عليك فعله هو تغيير النص، حسب ما تريد عرضه من معلومات لزوار مدونتك. 

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

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

إرسال تعليق

إمتداد ويب © 2021 - 2022