اضافة رسالة ترحيبية على شكل مسنجر

عبدو تكنولوجي - Abdou Technologie

22 أغسطس 2018

اضافة رسالة ترحيبية على شكل مسنجر

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

شرح تركيب الاضافة

إبحث في القالب على </head> او </head وضع الكود التالي فوقه مباشرة

<style>
/* shadow sec */
 .shadow{box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);transition: .3s ease-out;}
 .shadow:hover{box-shadow: 0 14px 25px rgba(0,0,0,.16);}
/*اضافة من عبدو تكنولوجي*/
.ball-message{position:fixed;bottom:12px;z-index:999999999999;right:52px;margin-top:-50px;margin-left:-50px;height:100px;width:100px;border:3px solid #FFF;background:url(https://1.bp.blogspot.com/-9fbks3ie724/W3doF0phRcI/AAAAAAAAFqE/iup3onFA6As_pqLcG3eBmLFrRv1-pdNDACLcBGAs/s320/24294136_1809479985752209_1304656175277181735_n.png);background-size:contain;border-radius:1000px;transform:scale(0);transition-duration:0;transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);}
.ball-message .msg-count{position:absolute;top:0;left:0;color:#FFF;border:3px solid #FFF;background:#E80202;height:25px;width:25px;border-radius:1000px;text-align:center;line-height:18px;font-size:12px;opacity:0;transform:scale(0);transition-timing-function:cubic-bezier(0.005,0.95,0.135,1.205);box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}
.ball-message .halo{position:absolute;top:18px;left:18px;right:18px;bottom:18px;border-radius:1000px;background:rgba(255,255,255,0.6);transform:scale(0)}
.ball-message .notif{position:absolute;top:-50px;left:-45px;width:183px;opacity:0}
.ball-message .notif .bar{position:relative;border-radius:1000px;background:#FFF;height:30px;line-height:30px;width:0;margin:0 auto;padding:0 10px;overflow:hidden}
.ball-message .notif .bar .text{position:absolute;margin:0;font-size:12px;color:#555;width:175px;z-index:1}
.ball-message .notif .bar .action{position:relative;z-index:2;height:20px;width:20px;background:#BABABA;float:left;margin-top:5px;border-radius:100px;box-shadow:10px 0 0 0 #FFF,-10px 0 10px 0 #FFF,inset 0 0 0 1px #FFF;border:1px solid #BABABA;}
.ball-message .notif .bar .action::after{content:'';border-left:5px solid #FFF;border-top:4px solid transparent;border-bottom:4px solid transparent;display:block;margin-left:7px;margin-top:4px}
.ball-message .notif .arrow{top:30px;border-top:7px solid #FFF;border-left:7px solid transparent;border-right:7px solid transparent;width:0;margin:0 auto;transform-origin:top;transform:scale(0)}
.anim-start .ball-message{transform:none;transition-duration:.3s}
.anim-start .ball-message .notif{opacity:1;transition-duration:.2s;transition-delay:1.6s}
.anim-start .ball-message .notif .bar{width:100%;transition-duration:.6s;transition-delay:1.6s}
.anim-start .ball-message .notif .arrow{transform:none;transition-delay:1.6s;transition-duration:.3s}
.anim-start .ball-message .halo{opacity:0;transform:none;transition-duration:.6s;transition-delay:1.2s}
.anim-start .ball-message .msg-count{opacity:1;transform:none;transition-duration:.3s;transition-delay:.6s}
.autowrite{animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#dedede}}
</style>

إبحث على </body وضع الكود هذا فوقه مباشرة

تحميل الكود من هنا

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

Unknown 23 أغسطس 2018 في 7:55 ص

أخيرا تدوينة كل سنة
إهمال لمدونتك

عبدو تكنولوجي - Abdou Technologie 23 أغسطس 2018 في 8:01 م

(li)

جيك برو | Geek Pro 25 أغسطس 2018 في 9:32 م

وااااااااااااصل اخي شكرااا جدا حبيبي

جيك برو | Geek Pro 25 أغسطس 2018 في 9:33 م

اخي هل لديك مدونة او موقع

Mazen Mohamed 6 سبتمبر 2018 في 10:29 م

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

Magdy 14 سبتمبر 2018 في 5:40 ص

ممكن شرح اضافة الاعلانات النصية الموجودة على مدونتك

ALIMO 15 سبتمبر 2018 في 8:03 م

شكرا اخي