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

<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);}


/*Add from sochiawy.com*/


.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://4.bp.blogspot.com/-IjFHb_W05xI/XBKGE_h3LiI/AAAAAAAADXk/Jsk6OZnzJeYR1NRVbNVnIojWZuOEMkZ9gCLcBGAs/s640/22449947_9656107035752209_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>

<div class='ball-message shadow'>


<div class='halo'/>


<div class='msg-count'>2</div>


<div class='notif'>


<div class='bar'>


<div class='action'/>


<p class='text autowrite' data-period='2000' data-type='["مرحبا بكم جميع متتبعي " ," sochiawy.com "]'/>


</div>


<div class='arrow'/>


</div>


</div>


<script>


//<![CDATA[


jQuery(document).ready(function(t){var i=function(t,i,e){this.toRotate=i,this.el=t,this.loopNum=0,this.period=parseInt(e,500)||500,this.txt="",this.tick(),this.isDeleting=!1}


i.prototype.tick=function(){var t=this.loopNum%this.toRotate.length,i=this.toRotate[t]


this.isDeleting?this.txt=i.substring(0,this.txt.length-1):this.txt=i.substring(0,this.txt.length+1),this.el.innerHTML=this.txt


var e=this,s=200-100*Math.random()


this.isDeleting&&(s/=2),this.isDeleting||this.txt!==i?this.isDeleting&&""===this.txt&&(this.isDeleting=!1,this.loopNum++,s=50):(s=this.period,this.isDeleting=!0),setTimeout(function(){e.tick()},s)},window.onload=function(){for(var t=document.getElementsByClassName("autowrite"),e=0;e<t.length;e++){var s=t[e].getAttribute("data-type"),n=t[e].getAttribute("data-period")


s&&new i(t[e],JSON.parse(s),n)}var o=document.createElement("style")


o.type="text/css",o.innerHTML=".autowrite  { border-left: 0.08em solid #fff}",document.body.appendChild(o)},t(".ball-message").click(function(i){t("body").removeClass("anim-start")}),setTimeout(function(){t("body").toggleClass("anim-start")},500)})


//]]>


</script>