Bahastutorial.com - Kali ini saya akan membagikan cara untuk menampilkan video youtube di blogger terbaru . Cara yang saya bagikan adalah cara yang sangat unik yaitu dengan menampilkan menjadi slider popup. dan tidak memberatkan loading blogger karna tidak menggunakan javascript hanya menggunakan html sama css saja. yaudah yuk kita simak aja tutorialnya bagaimana.
1 . Masuk ke Blogger
2 . Menuju Template / Tema
3 . Pilih Edit Html
4 . Masukan Css Tepat Dibawah Kode ]]></b:skin> atau di atas </style>
5 . Selanjutnya Simpan Kode Html Di Bawah Kode </body>
CSS
.bahastutorial-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}
.bahastutorial-link:hover .bahastutorial-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}
.bahastutorial-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}
.bahastutorial-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)}
.bahastutorial-info .bahastutorial-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}
.bahastutorial-info .bahastutorial-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}
.bahastutorial-info .bahastutorial-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}
.bahastutorial-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}
.bahastutorial-cta .bahastutorial-cta-logo{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;height:45px}
.bahastutorial-cta .bahastutorial-cta-logo .youtube-logo{width:45px;height:45px}
.bahastutorial-cta .bahastutorial-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}
HTML
<a class='bahastutorial-link' href='https://youtu.be/vO3s48F-n84' target='_blank'>
<div class='bahastutorial-info'>
<div class='bahastutorial-thumbnail' style='background-image: url("https://i.ytimg.com/vi/vO3s48F-n84/0.jpg");'/>
<div class='bahastutorial-title'>
Azmi - Pernah</div>
<div class='bahastutorial-meta'>
Lagu Pertama Azmi Yang Enak Didengar</div>
</div>
<div class='bahastutorial-cta'>
<div class='bahastutorial-cta-text'>
Tonton Video
</div>
<div class='bahastutorial-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>
Bagimana tutorialnya apakah berhasil atau belum. Apabila belum tampil di cek lagi tutorialnya sudah benar atau belum. Apabila sudah benar tetapi tidak tampil bisa komen di bawah komentar ya . Nanti admin pasti ngebantu sampai berhasil.