تركيب اضافة الترحيب و الإشتراك المنبثقة بتاثيرات رائعة |
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: "";
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 = "chat_status = chat_closed"'/>
<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('');
var x_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtWZtN6Q9_dUR6d2vmuijdk2_N5xsbniUqOvhV6O30xlUadzG2LPBurHqf_2iEYnPqJmU1xh1Wq9ze_mVq9K6Jx269MWG9UC1uufW36mgNYaxyGVLlpf0G8K13_gZlnzlIcdhkFtqdH8/s1600/Official-Logo.png";
var x_messages = [
'مرحبا'
,
'أهلا بك فى قالب (ستايلش أربعة) الجديد كليا'
,
'سعر القالب (8$) ويوجد عروض خاصة يمكنك متابعتها على صفحة (فريق المعاون) على الفيس بوك'
,
'نتمنى أن ينال التصميم إعجابك'
,
'شكرا ^_^'
];
</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 class='x_sub'>
<!--content-->
</div>
وضع الكود التالي بداخله بدلا من <!--content-->
<!--أداة الإشتراك فى قناة اليوتيوب-->
<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'/>