Seocips.com. Membuat PopUp Video Youtube di Blog. Ok sobat seocips 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.. 

Youtube Video Popup
( Klik tombol Lihat Video untuk Demonya )

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 :
  1. Ganti Url video ( warna merah biru )
  2. 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.

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

8 Komentar untuk "Cara Membuat PopUp Video Youtube Dengan Button Di Blog"

Ahhhhhhhhhhhhhhhhhhhhhhhhh bener-benerrrrr.. ini yang aku maksud
asyikkkkk.. makasih banyak mas.. akhirnya ada tutornya juga.. kepalaku ud mau pecah nyari2 gak nemu.. sekali lagi thankyou somat :*

upsss pertamax :p

Wah syukurlah jika itu yang sobat maksudkan..
http://2.bp.blogspot.com/-JKWRCtbLmQk/VOYFgcq4BLI/AAAAAAAADmk/giG2bixnUEc/s80/popup-youtube-video-in-post-blog.gif
Ok thanks telah berkunjung..

Silahkan sob. Muda-mudahan dengan membuat Popup Video Youtube, blognya jadi semakin keren. hehe

This comment has been removed by the author.
This comment has been removed by the author.

gan bisa g pas pop up nya di close videonya ikut ke close/stop?