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

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

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

1. إبحث في القالب على </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(../../../img/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>

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

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

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