إضافة صندوق رسائل ترحيبية منبثق على شكل منبه لمدونة بلوجر
 |
| إضافة رسالة ترحيبية منبثقة على شكل منبه لمدونة بلوجر | 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> أو <body8 - أضف أسفله مباشرة الكود التالي مع تغيير العبارة المشار إليها بالأحمر
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='إشعار'><i class='material-icons blanterxE7F4'></i><i class='material-icons blanterxE5CD'></i></a>
<div class='notifbox'>
مرحبا بك عزيزي الزائر, نشكرك على زيارة مدونتنا, ونتمنى أن تكون قد حصلت على ما كنت تبحث عنه هنا, لا تنسى الإنضمام الى متابعي المدونة الأوفياء لتكون أول من يتوصل بجديد مواضيعنا, في آمان الله ..
</div>
</div>
9 - الآن إبحث عن هذا الوسم
</body>10 - ثم أضف الكود التالي فوقه
<script type='text/javascript'>وأخيرا قم بحفظ المظهر وتوجه لمدونتك لمشاهدة النتيجة
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>
تم بحمد الله ...
أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع
لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع
إدعمنا لكي نستمر في تقديم المزيد
لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع
إدعمنا لكي نستمر في تقديم المزيد
0 تعليق على "إضافة صندوق رسائل ترحيبية منبثق على شكل منبه لمدونة بلوجر"
إرسال تعليق