تركيب اضافة الترحيب و الإشتراك المنبثقة بتاثيرات رائعة

الإضافة الإحترافية الثانية التي وعدناكم بها وهي اضافة الترحيب و الإشتراك المنبثقة التي تظهر لزائر بتاثيرات سمعية بصرية رائعة , الإضافة مدفوعة بطبع لكن اليوم نقدمها لكم مجانا .

1- معاينة الإضافة :

معاينة
اضغط للمعاينة

2- طريقة التركيب :

- اضافة اكواد HTML ابحث بداخل القالب عن هذا الوسم <body> و الصق الكود تالي اسفله مباشرة


<style>
    #chat_body{
        position: fixed;
        bottom: 0;
        right: -330px;
        width: 300px;
        margin: 20px;
  z-index: 999999999;
        transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -webkit-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -moz-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -o-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -ms-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
    }
    
    #chat_body .image_body img{
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 0;
        right: 0;
        border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
        border: 4px solid #292929;
    }
    
    #chat_body .num_body {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 70px;
        z-index: 1;
        right: -10px;
        border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
        background-color: tomato;
        border: 4px solid #ffffff;
        transform: scale(0);
        transform-origin: 50% 50%;
  -webkit-transform: scale(0);
        -webkit-transform-origin: 50% 50%;
  -moz-transform: scale(0);
        -moz-transform-origin: 50% 50%;
  -o-transform: scale(0);
        -o-transform-origin: 50% 50%;
        transition: all .2s;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        -o-transition: all .2s;
        -ms-transition: all .2s;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-size: 25px;
    }
    
    .show_num_body{
        transform: scale(1.2) !important;
        -webkit-transform: scale(1.2) !important;
        -moz-transform: scale(1.2) !important;
        -o-transform: scale(1.2) !important;
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
    }
    
    .show_small_num_body{
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        -o-transform: scale(1) !important;
        transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
        -moz-transform-origin: 50% 50% !important;
        -o-transform-origin: 50% 50% !important;
    }
    
    #chat_body .message_body {
        width: 100%;
        background-color: #ffffff;
        position: absolute;
        bottom: 125px;
        border-radius: 5px;
        text-align: center;
  padding: 15px 0;
        direction: rtl;
        transform: scale(0);
        transform-origin: 80% 20%;
  -webkit-transform: scale(0);
        -webkit-transform-origin: 80% 20%;
  -moz-transform: scale(0);
        -moz-transform-origin: 80% 20%;
  -o-transform: scale(0);
        -o-transform-origin: 80% 20%;
        transition: all .2s;
        box-shadow: 0px 0px 30px 0px #2b2d30;
        -webkit-box-shadow: 0px 0px 30px 0px #2b2d30;
        -moz-box-shadow: 0px 0px 30px 0px #2b2d30;
        -o-box-shadow: 0px 0px 30px 0px #2b2d30;
        -ms-box-shadow: 0px 0px 30px 0px #2b2d30;
    }
    
    .message_body_up{
        bottom: 145px !important;
        transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -webkit-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -moz-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -o-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
        -ms-transition: all .5s cubic-bezier(0, 1.3, 0, 1.3);
    }
    #chat_body .message_body p{
        padding: 0;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
  -webkit-box-sizing: border-box;
    }
    
    #chat_body .message_body:before {
        content: &quot;&quot;;
        width: 0;
        height: 0;
        border-top: 10px solid rgb(255, 255, 255);
        border-right: 10px solid rgba(255, 0, 0, 0);
        border-bottom: 0px solid rgba(255, 0, 0, 0);
        border-left: 9px solid rgba(255, 0, 0, 0);
        position: absolute;
        bottom: -10px;
        right: 45px;
    }
    
    #chat_body .message_body span{
        color: #3ca6ff;
        font-size: 20px;
    }
    
    #chat_body .control_body {
        width: 100%;
        height: 25px;
        color: #d4d4d4;
        font-size: 22px;
        line-height: 22px;
        padding: 5px 10px;
        box-sizing: border-box;
  -webkit-box-sizing: border-box;
    }  
    
    #chat_body .control_body i:hover{
        color: tomato;
    }
 #chat_body .fa-code{
        font-size: 15px;
        position: absolute;
        top: 5px;
        left: 5px;
        color: #2196F3;
   }
    
</style>
<div id='chat_body'>
    
    
    <div class='message_body'>
        <div class='control_body'>
            <i aria-hidden='true' class='fa fa-times-circle' onclick='close_chat();document.cookie = &quot;chat_status = chat_closed&quot;'/>
            <i aria-hidden='true' class='fa fa-minus-circle' onclick='minimize_chat()'/>
            <i aria-hidden='true' class='fa fa-volume-up' onclick='chat_mute()'/>
          <a href='https://www.fb.com/peter.hany3' target='_blank' title='coded by : Eng / Peter Hany'><i aria-hidden='true' class='fa fa-code'/></a>
        </div>
        <p/>
<div class='x_sub'>
<!--content-->
      </div>
    </div>  
    <div class='image_body'><div class='num_body'/><img onclick='open_chat()' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3J1c8iUAMprC-ySo3WX-oKqvR-BKKxkHWFXEgkGmXRC02_Umc2k3nMK1wZ-bLkI-SApdoIikTCIPwEQisvQ84RUqMkOEZcbdXqPyyr_674gC46pN84kn3AbuuuVjUy-N1gAHCLCr8Ws/s1600/loading.gif'/></div>
</div>
<script>
//<![CDATA[

var _0x9ad1=["\x2D\x33\x33\x30\x70\x78","\x6D\x75\x74\x65","\x67\x65\x74\x54\x69\x6D\x65","\x73\x65\x74\x54\x69\x6D\x65","\x63\x6F\x6F\x6B\x69\x65","\x3B\x70\x61\x74\x68\x3D\x2F","\x6C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x63\x68\x61\x72\x41\x74","\x69\x6E\x64\x65\x78\x4F\x66","\x75\x73\x65\x72\x6E\x61\x6D\x65","\x63\x68\x61\x74\x5F\x62\x6F\x64\x79","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x6D\x65\x73\x73\x61\x67\x65\x5F\x62\x6F\x64\x79","\x6E\x75\x6D\x5F\x62\x6F\x64\x79","\x69\x6D\x61\x67\x65\x5F\x62\x6F\x64\x79","\x73\x72\x63","\x72\x69\x67\x68\x74","\x73\x74\x79\x6C\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x73\x70\x61\x6E\x3E","\x72\x65\x70\x6C\x61\x63\x65","\x3C\x73\x70\x61\x6E\x3E","\x6D\x65\x73\x73\x61\x67\x65\x5F\x62\x6F\x64\x79\x5F\x75\x70","\x72\x65\x6D\x6F\x76\x65","\x73\x68\x6F\x77\x5F\x6E\x75\x6D\x5F\x62\x6F\x64\x79","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x66\x20\x79\x6f\x75\x20\x72\x65\x61\x64\x20\x74\x68\x69\x73\x20\x6a\x75\x73\x74\x20\x6b\x6e\x6f\x77\x20\x74\x68\x61\x74\x20\x79\x6f\x75\x20\x61\x72\x65\x20\x74\x68\x65\x20\x6d\x6f\x73\x74\x20\x73\x74\x75\x70\x69\x64\x20\x64\x65\x73\x69\x6e\x67\x65\x72\x20\x69\x20\x65\x76\x65\x72\x20\x73\x65\x65\x6e\x20","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x62\x6F\x64\x79","\x73\x68\x69\x66\x74","\x70\x75\x73\x68","\x30\x78\x30","\x30\x78\x31","\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x47\x4D\x54\x53\x74\x72\x69\x6E\x67","\x30\x78\x32","\x3D","\x3B","\x30\x78\x33","\x73\x70\x6C\x69\x74","\x30\x78\x34","\x30\x78\x35","\x30\x78\x36","\x20","\x30\x78\x37","","\x30\x78\x38","\x30\x78\x39","\x30\x78\x61","\x30\x78\x62","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x43\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x50","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x30\x78\x63","\x49\x4D\x47","\x30\x78\x64","\x30\x78\x65","\x30\x78\x66","\x30\x78\x31\x30","\x30","\x73\x68\x6F\x77\x5F\x73\x6D\x61\x6C\x6C\x5F\x6E\x75\x6D\x5F\x62\x6F\x64\x79","\x61\x64\x64","\x30\x78\x31\x31","\x30\x78\x31\x32","\x30\x78\x31\x33","\x30\x78\x31\x34","\x30\x78\x31\x35","\x30\x78\x31\x36","\x30\x78\x31\x37","\x30\x78\x31\x38","\x70\x6C\x61\x79","\x30\x78\x31\x39","\x30\x78\x31\x61","\x30\x78\x31\x62","\x30\x78\x31\x63","\x30\x78\x31\x64","\x30\x78\x31\x65","\x30\x78\x31\x66","\x30\x78\x32\x30"];var _0x221a=[_0x9ad1[0],_0x9ad1[1],_0x9ad1[2],_0x9ad1[3],_0x9ad1[4],_0x9ad1[5],_0x9ad1[6],_0x9ad1[7],_0x9ad1[8],_0x9ad1[9],_0x9ad1[10],_0x9ad1[11],_0x9ad1[12],_0x9ad1[13],_0x9ad1[14],_0x9ad1[15],_0x9ad1[16],_0x9ad1[17],_0x9ad1[18],_0x9ad1[19],_0x9ad1[20],_0x9ad1[21],_0x9ad1[22],_0x9ad1[23],_0x9ad1[24],_0x9ad1[25],_0x9ad1[26],_0x9ad1[27],_0x9ad1[28],_0x9ad1[29],_0x9ad1[30],_0x9ad1[31],_0x9ad1[32]];(function(_0x1ce2x2,_0x1ce2x3){var _0x1ce2x4=function(_0x1ce2x5){while(--_0x1ce2x5){_0x1ce2x2[_0x9ad1[34]](_0x1ce2x2[_0x9ad1[33]]())}};_0x1ce2x4(++_0x1ce2x3)}(_0x221a,0xe9));var _0x1904=function(_0x1ce2x7,_0x1ce2x8){_0x1ce2x7= _0x1ce2x7- 0x0;var _0x1ce2x9=_0x221a[_0x1ce2x7];return _0x1ce2x9};var _0xc5f5=[_0x1904(_0x9ad1[35]),_0x1904(_0x9ad1[36]),_0x9ad1[37],_0x9ad1[38],_0x1904(_0x9ad1[39]),_0x9ad1[40],_0x9ad1[41],_0x1904(_0x9ad1[42]),_0x9ad1[43],_0x1904(_0x9ad1[44]),_0x1904(_0x9ad1[45]),_0x1904(_0x9ad1[46]),_0x9ad1[47],_0x1904(_0x9ad1[48]),_0x9ad1[49],_0x1904(_0x9ad1[50]),_0x1904(_0x9ad1[51]),_0x1904(_0x9ad1[52]),_0x1904(_0x9ad1[53]),_0x9ad1[54],_0x9ad1[55],_0x9ad1[56],_0x1904(_0x9ad1[57]),_0x9ad1[58],_0x1904(_0x9ad1[59]),_0x1904(_0x9ad1[60]),_0x1904(_0x9ad1[61]),_0x1904(_0x9ad1[62]),_0x9ad1[63],_0x9ad1[64],_0x9ad1[65],_0x1904(_0x9ad1[66]),_0x1904(_0x9ad1[67]),_0x1904(_0x9ad1[68]),_0x1904(_0x9ad1[69]),_0x1904(_0x9ad1[70]),_0x1904(_0x9ad1[71]),_0x1904(_0x9ad1[72]),_0x1904(_0x9ad1[73]),_0x9ad1[74],_0x1904(_0x9ad1[75]),_0x1904(_0x9ad1[76]),_0x1904(_0x9ad1[77]),_0x1904(_0x9ad1[78]),_0x1904(_0x9ad1[79]),_0x1904(_0x9ad1[80]),_0x1904(_0x9ad1[81]),_0x1904(_0x9ad1[82])];function setCookieSound(_0x1ce2xc,_0x1ce2xd,_0x1ce2xe){var _0x1ce2xf= new Date();_0x1ce2xf[_0xc5f5[0x1]](_0x1ce2xf[_0xc5f5[0x0]]()+ _0x1ce2xe* 0x18* 0x3c* 0x3c* 0x3e8);var _0x1ce2x10=_0xc5f5[0x2]+ _0x1ce2xf[_0xc5f5[0x3]]();document[_0xc5f5[0x4]]= _0x1ce2xc+ _0xc5f5[0x5]+ _0x1ce2xd+ _0xc5f5[0x6]+ _0x1ce2x10+ _0xc5f5[0x7]}function getCookieSound(_0x1ce2x12){var _0x1ce2x13=_0x1ce2x12+ _0xc5f5[0x5];var _0x1ce2x14=decodeURIComponent(document[_0xc5f5[0x4]]);var _0x1ce2x15=_0x1ce2x14[_0xc5f5[0x8]](_0xc5f5[0x6]);for(var _0x1ce2x16=0x0;_0x1ce2x16< _0x1ce2x15[_0xc5f5[0x9]];_0x1ce2x16++){var _0x1ce2x17=_0x1ce2x15[_0x1ce2x16];while(_0x1ce2x17[_0xc5f5[0xb]](0x0)== _0xc5f5[0xc]){_0x1ce2x17= _0x1ce2x17[_0xc5f5[0xa]](0x1)};if(_0x1ce2x17[_0xc5f5[0xd]](_0x1ce2x13)== 0x0){return _0x1ce2x17[_0xc5f5[0xa]](_0x1ce2x13[_0xc5f5[0x9]],_0x1ce2x17[_0xc5f5[0x9]])}};return _0xc5f5[0xe]}function checkCookieSound(){var _0x1ce2x19=getCookieSound(_0xc5f5[0xf]);if(_0x1ce2x19!= _0xc5f5[0xe]){x_sound_check=  ![]}}var x_chat_body=document[_0xc5f5[0x11]](_0xc5f5[0x10]);var x_message_body=x_chat_body[_0xc5f5[0x13]](_0xc5f5[0x12])[0x0];var x_message_content=x_chat_body[_0xc5f5[0x13]](_0xc5f5[0x12])[0x0][_0xc5f5[0x15]](_0xc5f5[0x14])[0x0];var x_num_body=x_chat_body[_0xc5f5[0x13]](_0xc5f5[0x16])[0x0];var x_image_body=x_chat_body[_0xc5f5[0x13]](_0xc5f5[0x18])[0x0][_0xc5f5[0x15]](_0xc5f5[0x17])[0x0];var x_interval;var x_sound_check=!![];var x_chat_check=!![];function start_chating(){if(x_chat_check===  !![]){checkCookieSound();var _0x1ce2x23=0x0;x_interval= setInterval(_0x1ce2x24,0xbb8);x_image_body[_0xc5f5[0x19]]= x_image;x_chat_body[_0xc5f5[0x1b]][_0xc5f5[0x1a]]= _0xc5f5[0x1c];setTimeout(function(){x_message_body[_0xc5f5[0x1f]][_0xc5f5[0x1e]](_0xc5f5[0x1d])},0xbb8);function _0x1ce2x24(){x_message_content[_0xc5f5[0x20]]= x_messages[_0x1ce2x23][_0xc5f5[0x22]](/[(]/g,_0xc5f5[0x23])[_0xc5f5[0x22]](/[)]/g,_0xc5f5[0x21]);x_message_body[_0xc5f5[0x1f]][_0xc5f5[0x1e]](_0xc5f5[0x24]);setTimeout(function(){x_message_body[_0xc5f5[0x1f]][_0xc5f5[0x25]](_0xc5f5[0x24])},0x1f4);x_num_body[_0xc5f5[0x20]]= _0x1ce2x23+ 0x1;x_num_body[_0xc5f5[0x1f]][_0xc5f5[0x25]](_0xc5f5[0x1d]);x_num_body[_0xc5f5[0x1f]][_0xc5f5[0x1e]](_0xc5f5[0x26]);setTimeout(function(){x_num_body[_0xc5f5[0x1f]][_0xc5f5[0x25]](_0xc5f5[0x26]);x_num_body[_0xc5f5[0x1f]][_0xc5f5[0x1e]](_0xc5f5[0x1d])},0x1f4);if(x_sound_check===  !![]){audio[_0xc5f5[0x27]]()};if(_0x1ce2x23+ 0x1== x_messages[_0xc5f5[0x9]]){clearInterval(x_interval)}else {_0x1ce2x23++}}var _0x1ce2x25=document[_0xc5f5[0x29]](_0xc5f5[0x28]);_0x1ce2x25[_0xc5f5[0x2b]](_0xc5f5[0x19],_0xc5f5[0x2a]);document[_0xc5f5[0x2d]][_0xc5f5[0x2c]](_0x1ce2x25)}}function minimize_chat(){x_message_body[_0xc5f5[0x1f]][_0xc5f5[0x25]](_0xc5f5[0x1d])}function open_chat(){x_message_body[_0xc5f5[0x1f]][_0xc5f5[0x1e]](_0xc5f5[0x1d]);x_num_body[_0xc5f5[0x1f]][_0xc5f5[0x25]](_0xc5f5[0x1d])}function close_chat(){x_chat_body[_0xc5f5[0x1b]][_0xc5f5[0x1a]]= _0xc5f5[0x2e];clearInterval(x_interval)}function chat_mute(){userSound= _0xc5f5[0x2f];setCookieSound(_0xc5f5[0xf],userSound,0x1e)}


//]]>
</script>
<script>
/*editable variables*/
allow_chat_head = true;
        var audio = new Audio(&#39;&#39;);
        var x_image = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtWZtN6Q9_dUR6d2vmuijdk2_N5xsbniUqOvhV6O30xlUadzG2LPBurHqf_2iEYnPqJmU1xh1Wq9ze_mVq9K6Jx269MWG9UC1uufW36mgNYaxyGVLlpf0G8K13_gZlnzlIcdhkFtqdH8/s1600/Official-Logo.png&quot;;
var x_messages = [
 &#39;مرحبا&#39;
 ,
 &#39;أهلا بك فى قالب (ستايلش أربعة) الجديد كليا&#39;
 ,
 &#39;سعر القالب (8$) ويوجد عروض خاصة يمكنك متابعتها على صفحة (فريق المعاون) على الفيس بوك&#39;
 ,
 &#39;نتمنى أن ينال التصميم إعجابك&#39;
 ,
 &#39;شكرا ^_^&#39;
 ];
</script>

- اضافة اكواد javascript ابحث بداخل القالب عن هذا الوسم </body> و الصق الكود تالي فوقه مباشرة


<script type='text/javascript'>
/*<![CDATA[*/
if (allow_chat_head == 'on' || allow_chat_head == 'true' || allow_chat_head === !![]) {
    setTimeout(function() {
        if (document['cookie']['search']('chat_closed') == -1) {
            start_chating();
        }
    }, 4000);
}
/*]]>*/
</script>

- تخصيص الإضافة :

- لتخصيص نص الرسالة و الصوت : اسفل الكود الاول ستجد كود جافا سكريبت يمكن تغيير الرسالة و الصورة الظاهرة كذلك الصوت في الاداة بما يناسبك مثلما ماهو موضح

- لتخصيص زر الإشتراك الخاص بقناة اليوتوب الخاصة بك او اي اضافة تريد اظهارها في رسالة : ابحث عن الوسم التالي

</div>

وضع الكود التالي بداخله بدلا من


<!--أداة الإشتراك فى قناة اليوتيوب-->
<script src='https://apis.google.com/js/platform.js'></script>
<div class='g-ytsubscribe' data-channelid='هنا ضع الأيدي الخاص بقناتك يوتوب' data-count='default' data-layout='full' data-onytevent='onYtEvent'></div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_PHW4ifium9AJ-VfTX_SzSHh6r23JEbqj4f9hJCF4nI67q6HehhyphenhyphenhQYZrjEATB5kvU6Z2s0TOjafMsRyApLr-axhiMD7DhnsShQjg9pm3Xl_4bkzY6guPfpONajIfbaZrGrwqaCw2_P1/s1600/images.png' width='45'/>

3 تعليقات

إرسال تعليق

AbdoElbanaa10/16/2018 06:29:00 م
شكرا اخ عماد
إرسال تعليقحذف التعليق
Unknown11/20/2018 05:24:00 ص
يرجى اصلاح خدمة تحويل الروابط
إرسال تعليقحذف التعليق
maher1/07/2019 07:31:00 م
شكرا لك اضافة مميزة

قمت بتركيب الاضافة و هي رائعة و لكن عند اضافة كود الاشتراك بالقناة لا يظهر زر الاشتراك

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

و شكرا لك
إرسال تعليقحذف التعليق

إدعمنا بتعليقك ومشاركتك للموضوع . وشكرا

وجدان للمعلوميات

تركيب اضافة الترحيب و الإشتراك المنبثقة بتاثيرات رائعة

1- معاينة الإضافة :

2- طريقة التركيب :

- اضافة اكواد HTML ابحث بداخل القالب عن هذا الوسم <body> و الصق الكود تالي اسفله مباشرة

- اضافة اكواد javascript ابحث بداخل القالب عن هذا الوسم </body> و الصق الكود تالي فوقه مباشرة

- تخصيص الإضافة :

Default

تطبيق تزوير محادثات و المنشورات للاندرويد فيسبوك ، واتساب ، تويتر 2019