Cara membuat PopUP dengan fungsi tombol tampilkan PopUp di blogger

Maknyusblogger _ Cara membuat PopUP dengan fungsi tombol - Sobat Maknyus Blogger pada kesempatan kali ini NAKNYUS Blogger akan coba share Trik blogger tentang bagaimana cara menampilkan PopUP di blogger dengan fungsi Button pada postingan.

Untuk artikel berikutnya tentang cara memasukan video youtube ke posting mungkin para sobat MAKNYUS Blogger sudah ada yang tahu tentang cara memasukan Video youtube ke dalam posting blog jika ada yang belum tau caranya kita lanjut posting berikutnya, kita nembali ketopik tentang cara membuat PopUP di Posting blogg dengan fungsi tombbol.

LIHAT DEMO

Cara membuat PopUp dengan fungsi tombol tampilkan PopUP di blogger

Untuk Efek PopUP-nya hanya akan muncul jika tombol di klik, Oky anda juga dapat mengisinya dengan gambar atau Video youtube anda. OK langsung caja berikut adalah cara membuat PopUP di posting blog.

1. Letakan kode di bawah ini di atas ]]></b:skin> Kemudiana 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 posting pada blog anda, setelah itu letakan kode di bawah ini kedalam postingan dengan Metode HTML (Bukan mode Compose)

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

Ada 2 Pilihan Untuk mengganti kode Video di atas tinggal sesuka anda pilih yang mana

Ganti Url Video (warna Merah dan biru)
Yang diganti hanya ID Video Youtube (warna biru)

PERHATIAN :
Sebaiknya selesaikan dahulu penulisan pada posting anda, Jika sudah fix tulisanya masuk ke mode HTML kemudian letakan kode (no.2) yang di atas kedalam postingan (di tempat yang anda inginkan) kemudian langsung di publikasikan (Jangan kembali ke Mode Compose). Jika anda kembali ke mode Compose sebaiknya dihapus kembali kodenya dan ambil kode baru (no.2) di atas - masukan video dalam mode HTML.
Selesai dan silahkan lihat hasilnya.

Sekian dulu poastingan dari ane Cara membuat PopUp dengan fungsi tombol tampilkan popUP di blog moga bermanfaat bagi anda.

Anda baru saja membaca artikel tentang - Cara membuat PopUP dengan fungsi tombol tampilkan PopUp di blogger. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)