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

السلام عليكم و رحمة الله تعالى و بركاته اولا مبروك علينا شهر رمضان الكريم و نتمنى من الله ان يغفر لجميع المسلمين في هذا الشهر المبارك اما بعد بعد غياب طويل و بسبب ظروف العمل فنحن نحاول ان نعطي افضل مايوجد في منصة بلوجر و جديد التكنولوجيا بشكل عام , في هذا الموضوع جلبت لكم اضافة رائعة و جميلة فهي مخصصة لشهر رمضان لكن يمكن استخدامها في امور اخرى.

تم انشاء الاضافة بأحدث الاكواد و بشكل جميل و خفيفة على القالب فهي تظهر بسرعة فائقة الاضافة تتمثل عند دخول اي شخص الى موقعك فتظهر له نافدة منبتقة غير مزعجة بتاتتا بها جملة لتهنئة رمضان او يمكنك كتابة ما يحلو لك مثل اشعار في الموقع او مسابقة فهي متعددة الاختصاصات.

تركيب الاضافة فهو سهل جدا فقط نضع الاكواد في الاماكن الخاصة و سوف تشتغل بدون مشاكل

اولا قم بنسخ هذا الكود و اضفه فوق وسم </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Pop Up Ramadhan */
@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}
#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:2.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9}
.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}
@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}
</style>
</b:if>

اضف هذا الكود فوق وسم <body/>

<b:if cond='data:view.isHomepage'>
<div id='arlinapuasa2019ku'>
<div class='ketupat'/>
<a class='close-popup' href='#' title='Close this message'>إغلاق</a>
<div class='puasa19'>
   <p> موقع تقني واي يتمنى لكم </p>
   <p><span class='ramadhan2019'> رمضان مبارك سعيد</span></p>
   <p> و كل عام و انتم بخير </p>
</div>
<div class='ketupat duaa'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});
//]]>
</script>
</b:if> 

ثم اضغط على حفظ الكود, يشتغل على الصفحة الرئيسية فقط لكي لا يزعج الزوار و اذا كنت تريد ان تظهر الاضافة في جميع الصفحات قم بحذف هذا الوسم من الاول <b:if cond='data:view.isHomepage'>
 و وسم  </b:if> من نهاية الكودين لتجعلها تظهر على جميع الصفحات ، الى هنا ينتهي شرحنا اليوم انتمنى ان تعجبكم الاضافة نلتقي غدا انشأ لله في شرح اخر الى اللقاء