√ Cara Menciptakan Video Melayang Dikala Halaman Digulir (Panduan Blogger)

Selamat sore teman-teman blogger. Bagi sobat yang gres pertama mengunjungi blog lapaklama.com aku ucapkan selamat datang. Pernahkan kau mengunjungi situs youtube.com? Pasti pernah kan! disitus tersebut disaat kita sedang menonton video dan kita menggulirkan halaman kebawah maka video yang tadi kita tonton juga akan ikut kebawah (Melayang) nah di artikel ini aku akan membagikan tips cara menciptakan video melayang ketika halaman digulir.

Video yang akan kita gunakan yakni video yang kita ambil dari youtube, Di artikel sebelumnya aku sudah membagikan panduan cara memasang video youtube di blog, Jika teman-teman belum membacanya aku sarankan untuk membaca panduan tersebut terlebih dahulu dihalaman berikut ini. dengan cara tersebut video youtube akan tersematkan didalam blog dengan mengikuti dimensi layar yang dipakai oleh pengunjung (responsive).

Panduan ini sangat manis apabila kita terapkan di template blog yang memang didesain untuk menampilkan video youtube. Contohnya menyerupai template KompiTube ini.

Bagi yang tertarik untuk melaksanakan tips ini. Silahkan ikuti panduan cara menciptakan video melayang ketika halaman digulir dibawah ini.

Panduan membuat video melayang ketika halaman digulir

Membuat Video Melayang Saat Halaman Digulir

Buka halaman dasboard blogger kau di www.blogger.com

Kemudian pilih sajian Tema/Template dan kemudian pilih sub sajian Edit HTML.

Silahkan cari kode </head> (untuk mempermudah pencarian kode. Gunakan kombinasi tombol CTRL+F). dan tambahkan CSS dibawah ini sebelum kode </head>

<style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>

Note: silahkan edit pada kode bottom:20px;right:20px; untuk memilih posisi.

Kemudian tambahkan aba-aba dibawah ini sebelum kode </body>

<script type='text/j4vascript'>
//<![CDATA[
// Video Melayang
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Note: untuk yang sudah menambahkan aba-aba dari tips Cara Memasang Video Youtube Responsive di Blog, cukup ganti dengan aba-aba di atas.

Terahir Simpan Template

Terahir untuk memanggil aba-aba yang sudah kita pasang tadi. Tambahkan aba-aba ini didalam editor postingan dan rubah menjadi mode compose.

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>

Note: Edit code tO01J-M3g0U dengan aba-aba youtube lainya.

Selesai. Untuk demonya silahkan lihat melalui tombol dibawah ini.

Live Demo

Sekian info kali ini. Jika kau suka dengan artikel menyerupai ini. silahkan berlangganan artikel terbaru lapaklama via email secara gratis. dan jangan lupa untuk klik suka halaman fanspage lapaklama.com.

Sumber aciknadzirah.blogspot.com