Seocips.com. Membuat PopUp Video Youtube di Blog. Ok sobat seocips pada kesempatan ini kami akan membagikan lagi tutorial Blog tentang bagaimana cara membuat efek popup dengan Button pada postingan.

Di artikel terdahulu tentang cara memasukan video Youtube ke postingan Blog ada seorang sahabat yang bertanya bagaimana cara membuat video Youtube yang jika Buttonnya di klik maka akan muncul efek Popupnya. 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://blog.spezer.net/" 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!!
Sebaiknya anda selesaikan dahulu semua postingan anda. Selanjutnya jika sudah fix tulisannya masuk ke mode HTML kemudian letakan kode no 2 di atas ke dalam postingan ( ditempat yang anda inginkan ) kemudian langsung di Publikasikan ( 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.

Adah juga beberapa cara untuk mempercepat loading video Youtube mungkin sobat tertarik ingin mencobanya juga?.

7 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.

silahkan cek metode popup ogut gan..
menurut kalian gmn?

http://datakit.blogspot.com/2014/01/download-film-2015-terbaru.html