Loading...


Baca Juga

Assalamu Alaikum Wr.Wb

Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Pop Up Login yang sebelumnya sudah memposting CARA BUAT BASIC MODAL DIALOG BOX dan sekarang akan sedikit berbagi soal cara buat Pop Up Login .. guna nya untuk sebuah wapsite / website yang mengkhususkan tempat sign up / sign in untuk para membernya ( kurang lebih nya seperti itulah ) .. tapi sebelumnya sudah pada tahu belum ni semuanya ?? ..

Sebagian besar dari pembaca mungkin sudah tahu apa iti Pop Up ?? .. apa lagi jika sobat adalah seorang blogger dan masternya codding .. tentunya sudah faham dan tau dengan semua hal yang berurusan dengan codding .. dan mendengar kata pop up tentunya sudah tidak asing lagi .. bahkan bisa menciptakan / membuat yang jauh lebih keren dari pada apa yang mau admin bagikan ini .. tetapi buat sobat yang belum tahu apa itu pop up .. khusus nya untuk buat pop up login .. dan tidak tau cara buat nya .. berikut akan admin kasih contoh nya dan cara buat nya .. yang mungkin bisa sobat gunakan .. jika suatu waktu membutuhkan untuk di web / wap form sobat .. kalau ini menurut sobat bermanfaat .. dan dibawah ini contoh pembuatan nya ..



Gimana .. setelah lihat hasilnya .. sudah tahu kan .. apa yang saya maksud ?? .. yang saya maksud ini .. sama halnya seperti pop up / jendela munculan like box fb / follow G+ / follow twitter dan sebagainya .. akan tetapi bedanya .. jika like box fb dsb .. dapat muncul dengan menggunakan beberapa code yakni HTML / CSS / JS .. dan akan muncul ditiap kali blog di buka .. contoh nya seperti pada blog ini .. pop up follow G+ akan muncul ditiap kali membuka blog / halaman / postingan dengan otomatis .. yang sebelum nya sudah di setting untuk tampil sekian detik nya .. tapi jenis modal login ini .. akan muncul secara manual .. atau kata lain .. jika sobat mengklik tombol button tersebut barulah pop up login tersebut tampil .. kurang lebih nya silahkan klik tombol di bawah ini .. untuk mengetahui hasil nya .. dengan mengklik tombol button Login



Nah itulah hasilnya .. seperti yang sobat lihat .. gimana .. kira - kira masih ada yang mau lanjutin gak nih baca nya ?? .. dan kira - kira ada yang penasaran pengen buat juga gk tuh ?? .. ya udah .. langsung saja dibawah ini .. admin kasih tahu cara buat nya ..



<!DOCTYPE html>
<html>
<title>oon23.blogspot.co.id</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://0ch423.wapgem.com/oka/modal01/code.css"/>
<body>

<button onclick="document.getElementById('id01').style.display='block'" class="oka23-btn oka23-pink oka23-large">Login</button>

<div id="id01" class="oka23-modal">
<div class="oka23-modal-content oka23-card-8 oka23-animate-zoom" style="max-width:auto; height:auto;">

<div class="oka23-center"><br/>
<span onclick="document.getElementById('id01').style.display='none'" class="oka23-closebtn oka23-hover-pink oka23-container oka23-padding-2 oka23-display-topright" title="Close Modal">&tim es;</span>
<img src="https://url-gambar.jpg" alt="Avatar" style="width:30%" class="oka23-circle oka23-margin-top">
</div>

<form class="oka23-container" action="form.html">
<div class="oka23-section">
<label><b>Username</b></label>
<input class="oka23-input oka23-border oka23-margin-bottom" type="text" placeholder="Enter Username" name="usrname" required>
<label><b>Password</b></label>
<input class="oka23-input oka23-border" type="password" placeholder="Enter Password" name="psw" required>
<button class="oka23-btn-block oka23-pink oka23-section oka23-padding" type="submit">Login</button>
<input class="oka23-check oka23-margin-top" type="checkbox" checked="checked">Remember me
</div>
</form>

<div class="oka23-container oka23-border-top oka23-padding-4 oka23-light-grey">
<button onclick="document.getElementById('id01').style.display='none'" type="button" class="oka23-btn oka23-pink">Cancel</button>
<span class="oka23-right oka23-padding oka23-hide-small">Forgot<a href="#">password ??</a></span>
</div>
</div>
</div>
</div>

</body>
</html>



Itulah code dan cara buat nya .. dan saya rasa tidak perlu lagi banyak penjelasan ya .. karena disana juga udah full color .. jadi tentunya tahu code mana aja nya yang perlu di copy .. dan admin rasa cukup sampe disini dulu perjumpaan kita kali ini .. kurang lebih nya mohon di maklum aja .. jika ada salah - salah kata dalam penulisan .. dan terimakasih sudah baca dari awal sampe akhir .. mengenai Cara Buat Pop Up Login .. semoga bermanfaat dan sampe ketemu lagi dilain waktu dan kesempatan .. See You Next Time !!!

Tag : #Pop Up, #Pop Up Like Box, #Pop Up Like Box Fb #Pop Up Like Box Facebook, #Pop Up Follower, #Pop Up Follow G+, #Pop Up Follow Google+, #Pop Up Tweet, #Pop Up Twitter, #Pop Up Dialog, #Pop Up Window, #Pop Up Dialog Box, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Basic Modal ( Dialog Box / Pop Up Window, #Cara Buat Basic Modal Dialog Box, #Basic, #Basic Modal, #Pop Up Login, #Sign in, #Sign Up, #Login, #Log Out, #Cara Buat Pop Up Login

 
Top
Loading...