Tips Membuat PopUp Video Youtube Dengan Button Di Blog

Membuat PopUp Video Youtube di Blog. Ok sobat blogger pada kesempatan ini saya akan membagikan lagi tutorial Blog tentang bagaimana cara membuat efek popup dengan Button/tombol di postingan Blog.

Di artikel terdahulu tentang cara memasukan video Youtube ke postingan Blog ada seorang sahabat yang bertanya bagaimana cara membuat video Youtube yang jika Button/tombolnya di klik maka akan muncul Popup yang isinya adalah video Youtube. Entah mungkin tutorial ini yang dimaksud atau bukan.. entalah.

Cara Membuat Youtube Popup Video

Jadi efek video Popupnya hanya akan muncul jika tombolnya di klik. Oh iya anda juga dapat menggantinya dengan video selain Youtube. Ok langsung saja berikut adalah cara membuatnya:

1. Letakan kode dibawah ini diatas kode ]]></b:skin>.kemudian simpan template.

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; }
#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; transition: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; color:#fff; border-radius:3px; }
a.popup-close { position:absolute; top:3px; right:3px; background-color:#fff; padding:7px 10px; font-size:20px; text-decoration:none; line-height:1; color:#333; }

2. Selanjutnya buatlah postingan anda. Selesai membuat kemudian Letakan Kode dibawah ini ke dalam postingan dengan Mode HTML ( Bukan mode Compose ):

<div id="closed"></div>
<a href="#popup" class="popup-link">LIHAT VIDEO</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<center>
<embed allowfullscreen="true" height="375" src="https://www.youtube.com/v/UOvvTehcAV0?fs=1&amp;amp" type="application/x-shockwave-flash" width="580"></embed>
<a class="widgetku" href="http://www.seocips.com/" id="widgetku" target="blank">Seocips</a>
</center>
<a class="popup-close" href="#closed">X</a>
</div>
</div>

Ada 2 pilihan untuk mengedit kode diatas, tinggal dipilih saja :
Ganti Url video ( warna merah biru )
Yang di ganti hanya ID Video Youtube ( warna biru ).

Penting

Agar berhasil, sebaiknya kamu selesaikan dulu semua postingan/artikel kamu, selanjutnya jika artikel kamu sudah selesai, masuk ke mode HTML kemudian letakan kode HTML (no.2) di atas ke dalam postingan ( ditempat yang kamu inginkan ) dan langsung publikasikan saja artikelnya. Jangan kembali ke Mode Compose,  jika anda kembali ke mode Compose sebaiknya di hapus kembali kodenya dan pastekan kode yang baru no 2 diatas - masukan video - kemudian publikasikan dalam mode HTML.

Contoh hasilnya di bawah ini:

LIHAT VIDEO

Seocips X

Selesai silahkan lihat hasinya. Ada juga beberapa cara untuk mempercepat loading video Youtube mungkin sobat tertarik ingin mencobanya juga?.