-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

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

إضافة رسالة ترحيبية منبثقة على شكل منبه لمدونة بلوجر | 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>
وأخيرا قم بحفظ المظهر وتوجه لمدونتك لمشاهدة النتيجة


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


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

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

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

كاتب الموضوع

محمد العربي

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

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

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

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

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

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

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

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


    الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>