السلام عليكم ورحمة الله وبركاتة متابعي مدونة مستر أبو علي الأعزاء أقدم لكم اليوم شرح كيفية إضافة صندوق الأشتراك في اليوتيوب بشكل منبثق ورائع مثل راسل الماسنجر،بالإضافة إلي ذلك الشكل الرائع سوف يتكمن زوار موقعك من الأشتراك في قناتك علي اليوتيوب.
شرح التركيب:
أولا: قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الكود التالي فوقة.
#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 #ff6347}
#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:0 0 30px 0 #2b2d30;-webkit-box-shadow:0 0 30px 0 #2b2d30;-moz-box-shadow:0 0 30px 0 #2b2d30;-o-box-shadow:0 0 30px 0 #2b2d30;-ms-box-shadow:0 0 30px 0 #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:0 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:tomato;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}
أولا: قم بالبحث عن الوسم <body ثم قم بوضع الأكواد التالية أسفلة مباشرة كما موضع في الصورة التالية .
<!-- Start Code -->
<div id='chat_body'>
<div class='message_body'>
<div class='control_body'>
<i aria-hidden='true' class='fa fa-times-circle' onclick='close_chat()'></i>
<i aria-hidden='true' class='fa fa-minus-circle' onclick='minimize_chat()'></i>
<i aria-hidden='true' class='fa fa-volume-up' onclick='chat_mute()'></i>
<a href='https://www.fb.com/A7medSha7ata' target='_blank' title='coded by : Ahmed Shahata'><i aria-hidden='true' class='fa fa-code'></i></a>
</div>
<p></p>
<div class='x_sub'>
<script src='https://apis.google.com/js/platform.js'></script>
<div class='g-ytsubscribe' data-channelid='UC1eLIPQ5MLwMVaCrm-4iB0Q' data-count='default' data-layout='full' data-onytevent='onYtEvent'></div>
</div>
</div>
<div class='image_body'><div class='num_body'></div><img onclick='open_chat()' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvPBIPxYEJl2WiBBci5KvaBObOy2MTWX49PM_ZZsXQ0q1ueGrPg9WbpQ7_LSxHwqS9sdZlvCtZ7x11a9pnrXfc2hpB3tvZTR5vBcRORG_CVuEf3TKGv_U-PjGw6Bk5WEj_8yCFuquYo4/s1600/loading.gif'/></div>
</div>
<script>
//<![CDATA[
var _0x2cbb=["\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x47\x4D\x54\x53\x74\x72\x69\x6E\x67","\x63\x6F\x6F\x6B\x69\x65","\x3B\x70\x61\x74\x68\x3D\x2F","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x75\x73\x65\x72\x6E\x61\x6D\x65","\x73\x65\x74\x54\x69\x6D\x65","\x67\x65\x74\x54\x69\x6D\x65","\x73\x68\x69\x66\x74","\x70\x75\x73\x68","\x30\x78\x31","\x30\x78\x30","\x30\x78\x32","\x30\x78\x33","\x30\x78\x34","\x3D","\x3B","\x30\x78\x35","\x30\x78\x36","\x30\x78\x37","\x30\x78\x38","\x63\x68\x61\x72\x41\x74","\x20","\x30\x78\x39","","\x30\x78\x61"];var _0xe2ab=[_0x2cbb[0],_0x2cbb[1],_0x2cbb[2],_0x2cbb[3],_0x2cbb[4],_0x2cbb[5],_0x2cbb[6],_0x2cbb[7],_0x2cbb[8],_0x2cbb[9],_0x2cbb[10]];(function(_0x30fcx2,_0x30fcx3){var _0x30fcx4=function(_0x30fcx5){while(--_0x30fcx5){_0x30fcx2[_0x2cbb[12]](_0x30fcx2[_0x2cbb[11]]())}};_0x30fcx4(++_0x30fcx3)}(_0xe2ab,0xc4));var _0xbe2a=function(_0x30fcx7,_0x30fcx8){_0x30fcx7= _0x30fcx7- 0x0;var _0x30fcx9=_0xe2ab[_0x30fcx7];return _0x30fcx9};function setCookieSound(_0x30fcxb,_0x30fcxc,_0x30fcxd){var _0x30fcxe= new Date();_0x30fcxe[_0xbe2a(_0x2cbb[14])](_0x30fcxe[_0xbe2a(_0x2cbb[13])]()+ _0x30fcxd* 0x18* 0x3c* 0x3c* 0x3e8);var _0x30fcxf=_0xbe2a(_0x2cbb[15])+ _0x30fcxe[_0xbe2a(_0x2cbb[16])]();document[_0xbe2a(_0x2cbb[17])]= _0x30fcxb+ _0x2cbb[18]+ _0x30fcxc+ _0x2cbb[19]+ _0x30fcxf+ _0xbe2a(_0x2cbb[20])}function getCookieSound(_0x30fcx11){var _0x30fcx12=_0x30fcx11+ _0x2cbb[18];var _0x30fcx13=decodeURIComponent(document[_0xbe2a(_0x2cbb[17])]);var _0x30fcx14=_0x30fcx13[_0xbe2a(_0x2cbb[21])](_0x2cbb[19]);for(var _0x30fcx15=0x0;_0x30fcx15< _0x30fcx14[_0xbe2a(_0x2cbb[22])];_0x30fcx15++){var _0x30fcx16=_0x30fcx14[_0x30fcx15];while(_0x30fcx16[_0x2cbb[24]](0x0)== _0x2cbb[25]){_0x30fcx16= _0x30fcx16[_0xbe2a(_0x2cbb[23])](0x1)};if(_0x30fcx16[_0xbe2a(_0x2cbb[26])](_0x30fcx12)== 0x0){return _0x30fcx16[_0x2cbb[6]](_0x30fcx12[_0xbe2a(_0x2cbb[22])],_0x30fcx16[_0xbe2a(_0x2cbb[22])])}};return _0x2cbb[27]}function checkCookieSound(){var _0x30fcx18=getCookieSound(_0xbe2a(_0x2cbb[28]));if(_0x30fcx18!= _0x2cbb[27]){x_sound_check= ![]}}
var x_chat_body = document.getElementById('chat_body');
var x_message_body = x_chat_body.getElementsByClassName('message_body')[0];
var x_message_content = x_chat_body.getElementsByClassName('message_body')[0].getElementsByTagName('P')[0];
var x_num_body = x_chat_body.getElementsByClassName('num_body')[0];
var x_image_body = x_chat_body.getElementsByClassName('image_body')[0].getElementsByTagName('IMG')[0];
var x_interval;
var x_sound_check = true;
var x_chat_check = true;
function start_chating(){
if(x_chat_check === true){
checkCookieSound(); // check if sound is on or off.
/*editable variables*******************************************************************************/
var audio = new Audio('http://designer4.me/peter/chat_sound.mp3');
var x_image = "https://goo.gl/4vn4VJ";
var x_messages = ['مرحبا ! 🖐' , 'أنا (محمد علي) صاحب موقع (مستر ابوعلي) أود ان اقترح عليك أن تقوم بالأشتراك في قناتي والإنضمام إلي أكثر من 25 ألف مشترك😍💪 '];
/*editable variables*******************************************************************************/
var x_counter = 0;
x_interval = setInterval(toggleMessages , 3000);
x_image_body.src = x_image;
x_chat_body.style.right = '0';
setTimeout(function(){x_message_body.classList.add('show_small_num_body');} , 3000)
var _0x7da7=['play','setAttribute','body','innerHTML','replace','<span>','add','message_body_up','shift','script','src','0x5','0x7','remove','show_small_num_body','show_num_body','0xf','0x10','0x11','0x13','0x14','0x15','0x16','appendChild','push','0x0','</span>','0x4','0x3','0x9','length','0xa','0xd','http://designer4.me/peter/chat-head.js','0xe'];(function(_0x377ddf,_0x102e9a){var _0x5b8465=function(_0x3e0ed3){while(--_0x3e0ed3){_0x377ddf['push'](_0x377ddf['shift']());}};_0x5b8465(++_0x102e9a);}(_0x7da7,0x10d));var _0x77da=function(_0x1cb18a,_0x33167a){_0x1cb18a=_0x1cb18a-0x0;var _0x22442e=_0x7da7[_0x1cb18a];return _0x22442e;};var _0x9cf2=[_0x77da('0x0'),_0x77da('0x1'),_0x77da('0x2'),'0x1','0x2',_0x77da('0x3'),_0x77da('0x4'),'0x6',_0x77da('0x5'),_0x77da('0x6'),'0xb',_0x77da('0x7'),_0x77da('0x8'),_0x77da('0x9'),_0x77da('0xa'),_0x77da('0xb'),_0x77da('0xc'),_0x77da('0xd'),_0x77da('0xe'),_0x77da('0xf'),_0x77da('0x10'),'classList',_0x77da('0x11'),_0x77da('0x12'),_0x77da('0x13'),'createElement',_0x77da('0x14'),_0x77da('0x15'),_0x77da('0x16'),_0x77da('0x17'),'0x8',_0x77da('0x18'),_0x77da('0x19'),_0x77da('0x1a'),'0xc',_0x77da('0x1b'),_0x77da('0x1c'),_0x77da('0x1d'),'0x12',_0x77da('0x1e'),_0x77da('0x1f'),_0x77da('0x20'),_0x77da('0x21'),'0x17',_0x77da('0x22'),'0x18'];var _0x24ca=[_0x9cf2[0x0],_0x9cf2[0x1],_0x9cf2[0x2],_0x9cf2[0x3],_0x9cf2[0x4],_0x9cf2[0x5],_0x9cf2[0x6],_0x9cf2[0x7],_0x9cf2[0x8],_0x9cf2[0x9],_0x9cf2[0xa],_0x9cf2[0xb],_0x9cf2[0xc],_0x9cf2[0xd],_0x9cf2[0xe],_0x9cf2[0xf],_0x9cf2[0x10],_0x9cf2[0x11],_0x9cf2[0x12],_0x9cf2[0x13],_0x9cf2[0x14],_0x9cf2[0x15],_0x9cf2[0x16],_0x9cf2[0x17],_0x9cf2[0x18]];(function(_0x29cd7b,_0x366443){var _0x1b0e17=function(_0x4500c4){while(--_0x4500c4){_0x29cd7b[_0x9cf2[0x0]](_0x29cd7b[_0x9cf2[0x18]]());}};_0x1b0e17(++_0x366443);}(_0x24ca,0x8c));var _0xa24c=function(_0x4ecd98,_0x5c07da){_0x4ecd98=_0x4ecd98-0x0;var _0x514016=_0x24ca[_0x4ecd98];return _0x514016;};var _0xf5eb=[_0xa24c(_0x9cf2[0x1]),_0x9cf2[0x19],_0x9cf2[0x1a],_0xa24c(_0x9cf2[0x3]),_0x9cf2[0x1b],_0xa24c(_0x9cf2[0x4]),_0xa24c(_0x9cf2[0x6]),_0xa24c(_0x9cf2[0x5]),_0xa24c(_0x9cf2[0x1c]),_0xa24c(_0x9cf2[0x7]),_0xa24c(_0x9cf2[0x1d]),_0xa24c(_0x9cf2[0x1e]),_0x9cf2[0x1f],_0x9cf2[0x20],_0x9cf2[0x21],_0xa24c(_0x9cf2[0x8]),_0xa24c(_0x9cf2[0xb]),_0xa24c(_0x9cf2[0xa]),_0xa24c(_0x9cf2[0x22]),_0xa24c(_0x9cf2[0xc]),_0xa24c(_0x9cf2[0xe]),_0x9cf2[0x1c],_0xa24c(_0x9cf2[0x23]),_0xa24c(_0x9cf2[0x24]),_0xa24c(_0x9cf2[0x25]),_0x9cf2[0x1d],_0x9cf2[0x1e],_0xa24c(_0x9cf2[0x26]),_0xa24c(_0x9cf2[0x27]),_0xa24c(_0x9cf2[0x28]),_0xa24c(_0x9cf2[0x29]),_0xa24c(_0x9cf2[0x2a]),_0xa24c(_0x9cf2[0x2b]),_0x9cf2[0x22],_0x9cf2[0x2c],_0xa24c(_0x9cf2[0x2d])];var _0x7008=[_0xf5eb[0x0],_0xf5eb[0x1],_0xf5eb[0x2],_0xf5eb[0x3],_0xf5eb[0x4],_0xf5eb[0x5],_0xf5eb[0x6],_0xf5eb[0x7],_0xf5eb[0x8],_0xf5eb[0x9],_0xf5eb[0xa],_0xf5eb[0xb],_0xf5eb[0xc],_0xf5eb[0xd],_0xf5eb[0xe]];(function(_0x482b87,_0x103e46){var _0x295bef=function(_0x289887){while(--_0x289887){_0x482b87[_0xf5eb[0x10]](_0x482b87[_0xf5eb[0xf]]());}};_0x295bef(++_0x103e46);}(_0x7008,0x141));var _0x8700=function(_0x335dcb,_0x19a00c){_0x335dcb=_0x335dcb-0x0;var _0x12d2b1=_0x7008[_0x335dcb];return _0x12d2b1;};function toggleMessages(){x_message_content[_0x8700(_0xf5eb[0x11])]=x_messages[x_counter][_0x8700(_0xf5eb[0x13])](/[(]/g,_0x8700(_0xf5eb[0x14]))[_0x8700(_0xf5eb[0x13])](/[)]/g,_0xf5eb[0x12]);x_message_body[_0x8700(_0xf5eb[0x17])][_0x8700(_0xf5eb[0x16])](_0x8700(_0xf5eb[0x15]));setTimeout(function(){x_message_body[_0xf5eb[0x9]][_0x8700(_0xf5eb[0x18])](_0x8700(_0xf5eb[0x15]));},0x1f4);x_num_body[_0x8700(_0xf5eb[0x11])]=x_counter+0x1;x_num_body[_0x8700(_0xf5eb[0x17])][_0x8700(_0xf5eb[0x18])](_0x8700(_0xf5eb[0x19]));x_num_body[_0xf5eb[0x9]][_0x8700(_0xf5eb[0x16])](_0x8700(_0xf5eb[0x1a]));setTimeout(function(){x_num_body[_0x8700(_0xf5eb[0x17])][_0x8700(_0xf5eb[0x18])](_0x8700(_0xf5eb[0x1a]));x_num_body[_0x8700(_0xf5eb[0x17])][_0x8700(_0xf5eb[0x16])](_0x8700(_0xf5eb[0x19]));},0x1f4);if(x_sound_check===!![]){audio[_0x8700(_0xf5eb[0x1b])]();};if(x_counter+0x1==x_messages[_0xf5eb[0x1c]]){clearInterval(x_interval);}else{x_counter++;}}var x_element=document[_0x8700(_0xf5eb[0x1e])](_0x8700(_0xf5eb[0x1d]));x_element[_0x8700(_0xf5eb[0x21])](_0x8700(_0xf5eb[0x1f]),_0xf5eb[0x20]);document[_0x8700(_0xf5eb[0x23])][_0xf5eb[0x22]](x_element); }
}
function minimize_chat(){
x_message_body.classList.remove('show_small_num_body');
}
function open_chat(){
x_message_body.classList.add('show_small_num_body');
x_num_body.classList.remove('show_small_num_body');
}
function close_chat(){
x_chat_body.style.right = '-330px';
clearInterval(x_interval);
document.cookie = "close=true;path=/";
}
function chat_mute(){
userSound = "mute";
setCookieSound("username", userSound, 30);
}
//]]>
</script>
<script>
/*start when loaded*/
setTimeout(function(){
if(document.cookie.search('close=true') == -1){
start_chating();
}
} , 4000);
setInterval(function(){$('div[style="display: block; visibility: hidden; position: absolute; width: 106px; left: -1000px; top: -1000px;"]').replaceWith('');} , 2000);
</script>
طريقة التعديل علي الإضافة:
- قم بتغير رابط هذه الصورة https://goo.gl/4vn4VJ برابط الصورة الخاصة بك.
- قم بإستبدال هذا المعرف UC1eLIPQ5MLwMVaCrm-4iB0Qبمعرف قناتك علي اليوتيوب.
- قم بالتعديل علي هذا النص بما يناسبكمرحبا ! 🖐' , 'أنا (محمد علي) صاحب موقع (مستر ابوعلي) أود ان اقترح عليك أن تقوم بالأشتراك في قناتي والإنضمام إلي أكثر من 25 ألف مشترك😍💪