 |
| Cara Membuat Tombol Youtube Di Sidebar |
Kesempatan kali ini aku akan membagikan tutorial ihwal bagaimana caranya menciptakan video youtube di siderbar melayang .. tombol youtube yang kita akan bahas ini sangat ringan dan tidak memberatkan loading blog .. eksklusif saja ke tutorial Cara Membuat Tombol Youtube Di Sidebar
- Masuk Ke Blogger
- Template > Edit Html
- Masukan css di bawah ini sempurna diatas ]]></b:skin> atau di atas </style>
.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} <a class='video-link' href='https://youtu.be/vO3s48F-n84' target='_blank'> <div class='video-info'> <div class='video-thumbnail' style='background-image: url("https://i.ytimg.com/vi/vO3s48F-n84/0.jpg");'/> <div class='video-title'> Azmi - Pernah</div> <div class='video-meta'> Lagu Pertama Azmi Yang Enak Didengar</div> </div> <div class='video-cta'> <div class='video-cta-text'> Tonton Video </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>
Sekian tutorial kali ini biar bermanfaat ... Untuk demo nya Bisa dilihat disini
