Cara Membuat Tombol Youtube Di Sidebar

Cara Membuat Tombol Youtube Di Sidebar
Cara Membuat Tombol Youtube Di Sidebar

Kesempatan kali ini saya akan membagikan tutorial tentang bagaimana caranya membuat video youtube di siderbar melayang .. tombol youtube yang kita akan bahas ini sangat ringan dan tidak memberatkan loading blog .. langsung saja ke tutorial Cara Membuat Tombol Youtube Di Sidebar

  • Masuk Ke Blogger
  • Template > Edit Html
  • Masukan css di bawah ini tepat 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}
    
  • Selanjutnya Simpan Kode Di bawah tepat di bawah </body>
  • <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>
    

    Nah selanjutnya ganti kode yang berwarna kuning dengan link  kode video kalian ..
Sekian tutorial kali ini semoga bermanfaat ... Untuk demo nya Bisa dilihat disini
Cara Membuat Tombol Youtube Di Sidebar Admin Mafsyah 5 of 5
Cara Membuat Tombol Youtube Di Sidebar Kesempatan kali ini saya akan membagikan tutorial tentang bagaimana caranya membuat video youtub...
Cara Membuat Tombol Youtube Di Sidebar
4/ 5 stars - "Cara Membuat Tombol Youtube Di Sidebar" Cara Membuat Tombol Youtube Di Sidebar Kesempatan kali ini saya akan membagikan tutorial tentang bagaimana caranya membuat video youtub...
Loading

URL POSTINGAN

URL:
HTML link code:
BB (forum) link code:

Silahkan Baca Aturan Komentar Yang Baik
Peraturan:
1. Dilarang "SPAM"Apabila Spam Maka Akan Di Block Supaya Tidak Bisa Komentar Lagi
2. Dilarang "Sebar Link Di Komentar " Apabila Share Link Di Komentar Otomatis Di Hapus
3. Dilarang "Bahasa Kasar"Bahasa Kasar Atau Kotor Akan Di Hapus OLeh Admin
4. Dilarang "Bully" Apabila Ada Komentar Berbau Bully Akan Di Hapus Oleh Admin
5. Silahkan Berkomentar Sesuai Kebutuhan

Komentar Facebook
0 Komentar Blogger

0 Comments