U3F1ZWV6ZTQ2NzI4NTgyOTIwX0FjdGl2YXRpb241MjkzNzAzNzIwMTM=
random
أخبار ساخنة

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

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


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

إرسال تعليق

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

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