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

السلام عليكم ورحمة الله وبركاتة متابعي ومحبي ومدونة نقطة ويب أقدم لكم اليوم إضافة أكثر من رائعة الأ وهي إضافة صندوق الأشتراك في قناتك علي اليوتيوب علي شكل رسائل الماسنجر حيث انها تزيد من نسبة تفاعل زوارك بالإشتراك فى قناتك على اليوتيوب بنسبة تتعدى الـ 50% والإَضافة مدفوعة ولكنني أقدمها لكم اليوم بالمجان .

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

معاينة

أولا قم بالبحث عن الوسم `]]>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

#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: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:#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}