Haloo sobat media2give^^ Pada kesempatan ini Saya akan membagikan informasi unik tentang Cara Praktis Memasang PopUp Video Di Blog.Banyak ilmu yang dapat kita pelajari lewat blog,diantaranya seperti cara optimasi,meningkatkan popularitas sampai memasang widget berguna.Dari widget tersebut,sebagian besar berfungsi memudahkan pengunjung dalam mendapatkan informasi dari blog kita.Tak lupa,pastinya tampilan blog juga perlu di perhatikan.
Karena tampilan akan memberikan kesan pertama ketika pengunjung pertama kali membuka web kita.Oleh karenanya tidak heran jika admin blog berusaha memodifikasi atau mengatur blognya agar menarik dilihat.Salah satunya adalah dengan mengganti template yang sesuai dengan niche/konten blog.Biasanya template responsif yang menjadi incaran utama untuk di pakai karena template ini mampu menyesuaikan dengan resolusi layar browser yang berbeda.
Bahkan untuk mobile pun tampilannya tetap bagus.Nah,bagi kalian yang mengelola blog jenis film atau produk,akan lebih baik jika menampilkan sebuah video di blog.Bisa video tutorial,trailer atau promosi tentang produk yang di jual.Kenapa ini penting? sebab dengan menambahkan video,pengunjung blog akan mudah memahami apa isi blog kita,dibandingkan hanya jika membaca teks saja.
Tapi memang harus di perhatikan pada penempatan videonya agar visitor tidak merasa terganggu dengan keberadaan video itu.Video PopUp dapat menjadi pilihan tepat untuk di pasang pada blog.Video ini nantinya akan tampil di halaman yang sama ketika pengunjung membuka salah satu page di blog.Jika tipenya PopUp apakah justru tidak menggangu? Tidak,karena PopUp bisa di modifikasi dengan menambahkan sebuah button/tombol yang bisa di klik.
Saat visitor tidak ingin melihat videonya,mereka tidak perlu menekan button ini.Dan jika mereka ingin menonton video,tinggal tekan saja buttonnya dan akan langsung terbuka video dengan Lightbox.Lightbox ini di lengkapi juga dengan tombol close,jadi saat sudah selesai menonton,videonya dapat di tutup.Tombol yang tersedia tersebut memungkinkan visitor untuk memilih,jadi tidak ada lagi yang namanya tiba-tiba keluar PopUp di halaman yang sedang di akses.
Lightbox PopUp Video ini memanfaatkan embed dari berbagai situs streaming video online.Jadi tentunya bisa di gunakan untuk video dari YouTube,Vimeo,Dailymotion dan situs video lainnya.Selain itu,PopUp-nya hanya dibuat dengan CSS3 tanpa Javascript/Jquery.Jadi videonya tetap bisa di play meskipun Javascript browser di matikan.Penasaran bagaimana cara membuat Lightbox PopUp Video? Yuk,kita simak bersama langkah-langkahnya berikut ini :
1. Login ke blog kalian
2. Masuk ke menu Template > klik Edit HTML
3. Cari kode ]]></b:skin>
4. Agar memudahkan pencarian,gunakan tombol Ctrl+F
5. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
a.popup-link { padding:17px 0; text-align:center; margin:7% auto; position:relative; width:220px; color:#fff; text-decoration:none; background-color:#FFBA00; border-radius:3px; box-shadow:0 5px 0 0 #eea900; display:block; }a.popup-link:hover { background-color:#ff9900; box-shadow:0 3px 0 0 #eea900; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }
#popup { position:fixed;visibility:hidden; opacity:0; margin-top:-300px; }
ition:all 1s; }
@media (min-width:768px) { .popup-container { width:600px; } }
@media (max-width:767px) { .popup-container { width:100%; } }
.popup-container { position:relative; margin:7% auto; padding:30px 50px; background-color:#333; co
#popup:target { visibility:visible; opacity:1; background-color:rgba(255,255,255,0.7); position:fixed; top:0; left:0; right:0; bottom:0; margin:0; z-index:99999999999; -webkit-transition:all 1s; -moz-transition:all 1s; tran
slor:#fff; border-radius:3px; }
e; top:3px; right:3px; background-color:#fff; padding:7px 10px; font-size:20px; text-decoration:none; line-height:1; color:#333; }
a.popup-close { position:absolu
t
6. Klik menu Pos > pilih Buat Entri Baru
7. Ubah tampilan menjadi HTML
8. Ambil kodenya disini https://justpaste.it/codepop
9. Masukkan kodenya ke halaman post > Klik Publikasikan
10. Lihat pada URL https://www.youtube.com/v/UOvvTehcAV0?fs=1&amp
11. Ganti link berwarna hijau dengan ID Video YouTube
12. Untuk melihat hasilnya,bisa klik button Lihat Video di bawah ini
Leave a Reply