U3F1ZWV6ZTQ2NzI4NTgyOTIwX0FjdGl2YXRpb241MjkzNzAzNzIwMTM=

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

السلام عليكم ورحمة الله وبركاتة اهلا وسهلا بكم من جديد متابعينا الكرام اليوم نقدم لكم اضافة رائعة من اضافات بلوجر وهى رسالة ترحيبية على شكل مسنجر وذة الاضافة ترحب بزوار موقعك وهى رائعة جدا واضافة اى ذلك ذات شكل ممتاز وسهل التركيب
اضافة رسالة ترحيبية على شكل مسنجر
اضافة رسالة ترحيبية على شكل مسنجر
اليكم طريقة تركيب هذة الاضافة 
  • اولا البحث عن وسم </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);}
    /*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>

  • إبحث في القالب على الوسم  </body>  وقم بوضع الكود الاتي فوقة مباشرة
    <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>

  • ثم قم يتغير رابط الصورة وهو https://4.bp.blogspot.com/-IjFHb_W05xI/XBKGE_h3LiI/AAAAAAAADXk/Jsk6OZnzJeYR1NRVbNVnIojWZuOEMkZ9gCLcBGAs/s640/22449947_9656107035752209_1304656175277181735_n.png
  • ثم قم بالحفظ وسوف تجد الاضافة تعمل معك بشكل ممتاز 
الان وقت معاينة الاضافة 
   للمعاينة اضعط هنا  


للحصول علي المزيد من  الاضافات اضغط هنا 
لتحميل افضل  القوالب اضغط هنا 
شكرا لكم نتمني ان يكون الموضوع قد نال اعجابكم 
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

لاتنسي ان تترك بصمتك بالتعليق

الاسمبريد إلكترونيرسالة