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

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

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

صورة للإضافة

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


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

تابع معي ...

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


3 - إبحث عن الوسم التالي بالضغط على Ctrl + F
 
4 - أضف أسفله الكود التالي
5 - ثم إبحث عن الوسم التالي
]]>
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 - إبحث عن الوسم التالي
أو 8 - أضف أسفله مباشرة الكود التالي مع تغيير العبارة المشار إليها بالأحمر



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

9 - الآن إبحث عن هذا الوسم
 
10 - ثم أضف الكود التالي فوقه
وأخيرا قم بحفظ المظهر وتوجه لمدونتك لمشاهدة النتيجة


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


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

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

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

تعليقات