إضافة شريط تنبيه لليوتيوب على بلوجر يعرض فيديو للقناة

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

معاينة شريط تنبيه لليوتيوب

معاينة

الان لتركيب الاضافة إبحث على </b:skin> وضع هذا الكود فوقه مباشرة

.video-link{position:fixed;right:0;bottom:20px;width:200px;height:45px;text-decoration:none;background:none;border-top-left-radius:24px;border-bottom-left-radius:24px;-webkit-box-shadow:2px -2px 30px rgba(0,0,0,0.2);box-shadow:2px -2px 30px rgba(0,0,0,0.2);cursor:pointer}
.video-link:hover .video-info{visibility:visible;clip:rect(-50px,200px,225px,-50px);-webkit-transition:clip 0.5s cubic-bezier(0.65,0.05,0.36,1);transition:clip 0.5s cubic-bezier(0.65,0.05,0.36,1);opacity:1}
.video-info{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;top:0;left:0;right:0;height:225px;padding-bottom:25px;background:white;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translate(0,-200px);-webkit-transform:translate3d(0,-200px,0);transform:translate(0,-200px);transform:translate3d(0,-200px,0);-webkit-transition:visibility 0.2s 0.3s,opacity 0.2s 0.3s,clip 0.5s cubic-bezier(0.65,0.05,0.36,1);transition:visibility 0.2s 0.3s,opacity 0.2s 0.3s,clip 0.5s cubic-bezier(0.65,0.05,0.36,1);clip:rect(200px,200px,225px,0);will-change:clip;opacity:0}
.video-info:after{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;height:225px;background:none;-webkit-box-shadow:2px -2px 30px rgba(0,0,0,0.2);box-shadow:2px -2px 30px rgba(0,0,0,0.2)}
.video-info .video-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;height:36px;padding:10px 10px 5px;font-size:13px;font-weight:700;letter-spacing:0.5px;color:#333;-webkit-box-sizing:border-box;box-sizing:border-box}
.video-info .video-thumbnail{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto;height:112.5px;background-size:cover;background-position:center center}
.video-info .video-meta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0 10px 10px;font-size:13px;font-weight:400;text-align:left;letter-spacing:1px;color:#333}
.video-cta{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:white;border-top-left-radius:24px;border-bottom-left-radius:24px}
.video-cta .video-cta-logo{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;height:45px}
.video-cta .video-cta-logo .youtube-logo{width:45px;height:45px}
.video-cta .video-cta-text{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding-left:20px;font-size:14px;font-weight:700;text-align:left;letter-spacing:1px;color:#333}

الان إبحث على </body> او على الفوتر اي نهاية القالب و ضع هذا الكود

<a class='video-link' href='https://youtu.be/tmP4S-ghlMM' target='_blank'>
 <div class='video-info'>
  <div class='video-thumbnail' style='background-image: url('https://i.ytimg.com/vi/tmP4S-ghlMM/0.jpg');'/>
  <div class='video-title'>
أخر فيديو في القناة</div>
<div class='video-meta'>
قالب عبدو جيمر |Abdou Gamer قالب بلوجر لنشر الالعاب على مدونات بلوجر</div>
</div>
<div class='video-cta'>
  
  <div class='video-cta-text'>
   شاهد الفيديو
  </div>
<div class='video-cta-logo'>
   <svg class='youtube-logo' enable-background='new 0 0 128 128' height='128px' id='Layer_1' version='1.1' viewBox='0 0 128 128' width='128px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g><circle cx='64' cy='64' fill='#CC191E' r='64'/></g><path d='M103.201,48.004c0,0-0.781-5.513-3.18-7.939c-3.043-3.187-6.453-3.203-8.016-3.389  c-11.191-0.81-27.988-0.81-27.988-0.81h-0.036c0,0-16.795,0-27.988,0.81c-1.564,0.186-4.972,0.201-8.015,3.389  c-2.399,2.426-3.18,7.939-3.18,7.939S24,54.478,24,60.953v6.071c0,6.471,0.799,12.947,0.799,12.947s0.781,5.51,3.18,7.938  c3.044,3.189,7.041,3.088,8.82,3.422c6.401,0.615,27.202,0.805,27.202,0.805s16.81-0.025,28.005-0.834  c1.564-0.188,4.975-0.203,8.016-3.391c2.4-2.43,3.182-7.939,3.182-7.939S104,73.496,104,67.023v-6.071  C104,54.478,103.201,48.004,103.201,48.004 M54.729,75.428l-0.003-24.581l23.637,12.332L54.729,75.428z' fill='#FFFFFF'/></svg>  
  </div>
</div>
</a>

الان في الكود الاخير غير معرف الفيديو و عنوان الفيديو

معرف الفيديو تجده هكذا tmP4S-ghlMM