no-style

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

إضافة رسالة ترحيبية منبثقة على شكل منبه لمدونة بلوجر | How To Add Welcome Pop Up Message In Blogger
السلام عليكم ورحمة الله تعالى وبركاته

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

صورة للإضافة

لمشاهدة عرض توضيحي


خطوات تركيب صندوق رسائل ترحيبية منبثق على مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - قالب (المظهر) >> تحرير Html >>


3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
<head> 
4 - أضف أسفله الكود التالي
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
5 - ثم إبحث عن الوسم التالي
]]></b:skin>
6 - أضف فوقه كود Css التالي
/* widget by el3araby-web.blogspot.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#2abb9b;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 12px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#243750;border:1px solid #2abb9b;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#243750 #243750 transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
7 - إبحث عن الوسم التالي
<body> أو <body 
8 - أضف أسفله مباشرة الكود التالي مع تغيير العبارة المشار إليها بالأحمر
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
مرحبا بك عزيزي الزائر, نشكرك على زيارة مدونتنا, ونتمنى أن تكون قد حصلت على ما كنت تبحث عنه هنا, لا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يتوصل بجديد مواضيعنا, في آمان الله ..
</div>
</div>
9 - الآن إبحث عن هذا الوسم
</body> 
10 - ثم أضف الكود التالي فوقه
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.blanternotif&quot;).click(function(){$(&quot;.notifbox,#notif-wrapper&quot;).toggleClass(&quot;aktif&quot;);});});
</script>
وأخيرا قم بحفظ المظهر وتوجه لمدونتك لمشاهدة النتيجة


تم بحمد الله ...


أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع

إدعمنا لكي نستمر في تقديم المزيد

9 تعليقات

  1. اخي اضفتها بس عند الضغط عليها لا تظهر الرسالة !!
    هل عندك حل ؟

    ردحذف
  2. الردود
    1. مرحبا بك أخي الكريم
      أترك رابط مدونتك للمعاينة وسنساعدك في تركيبها بشكل أفضل

      حذف
  3. أزال المؤلف هذا التعليق.

    ردحذف
  4. لا تعمل الطريقه يقول لي خطا رابط المدونة www.pc4techno.tk

    ردحذف
    الردود
    1. مرحبا أخي الكريم
      الاضافة تعمل بشكل جيد على مدونتك ??

      حذف
  5. https://www.super-1-hero.com
    هذا رابط الموقع اتمنى المساعدة

    ردحذف
  6. مرحبا أخي الكريم
    تواصل معي في الصفحتي لأساعدك في تركيب الاضافة بشكل أفضل
    https://www.facebook.com/mahwouss2/

    ردحذف

إرسال تعليق

أحدث أقدم