Skip to content Skip to sidebar Skip to footer

Cara Menampilkan Slider Youtube Di Blog Terbaru





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>


 
.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}
 
<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.
BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Cara Menampilkan Slider Youtube Di Blog Terbaru"