setelah sebelumnya berbagi tentang Source Code Captcha PHP+Bootstrap , kali ini saya akan berbagi tentang captcha kembali, namun bukan menggunakan angka,huruf,ataupun suara. tetapi meniru gambar.
sebagai contoh klik diforum saya -> disini
langkah pertama, silahkan anda unduh file pluginnya
setelah itu buatlah folder bernama style, dan replace semua file unduhan tadi di dalam folder style tersebut.
setelah itu, bukalah code editor[notepad++] atau yang lainnya.
perintah untuk memanggil file pluginnya
<link rel="stylesheet" href="style/jquery.motionCaptcha.0.2.css"/>
<script src="style/jquery.min.js" type="text/javascript"></script>
<script src="style/jquery.motionCaptcha.0.2.js" ></script>
dan berikut ini adalah code cascading stylesheetnya
<style>
form {
width: 440px;
display: block;
text-align:left;
margin: 20px auto;
}
input,
textarea {
font-family:"Lucida Grande", sans-serif;
font-size: 13px;
font-weight: bold;
display: block;
border: 0;
outline:0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
padding: 9px 12px;
margin:0 0 20px;
}
#mc-canvas {
margin:0 auto 20px;
padding:1px;
display: block;
border: 4px solid #433e45;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#mc-canvas.mc-invalid {
border: 4px solid #aa4444;
}
#mc-canvas.mc-valid {
border: 4px solid #44aa44;
}
</style>
dan berikut ini adalah code keseluruhan dari Motion Captcha, silahkan simpan diluar folder style, dengan nama index.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Raka Adi Nugroho</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="style/jquery.motionCaptcha.0.2.css"/>
<style>
form {
width: 440px;
display: block;
text-align:left;
margin: 20px auto;
}
input,
textarea {
font-family:"Lucida Grande", sans-serif;
font-size: 13px;
font-weight: bold;
display: block;
border: 0;
outline:0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 0 5px rgba(0,0,0,0.1), inset 0 1px 1px rgba(0,0,0,0.3);
padding: 9px 12px;
margin:0 0 20px;
}
#mc-canvas {
margin:0 auto 20px;
padding:1px;
display: block;
border: 4px solid #433e45;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#mc-canvas.mc-invalid {
border: 4px solid #aa4444;
}
#mc-canvas.mc-valid {
border: 4px solid #44aa44;
}
</style>
</head>
<body>
<form action="#" method="post" id="mc-form">
<div id="mc">
<h2><a href="http://rakaadinugroho.blogspot.com" target="_blank">Back to Blog</a>|<a href="http://rekayasaperangkatlunak.org" target="_blank">Back to Forum</a></h2>
<br>
<p>Perbaharui Gambar (<a onclick="window.location.reload()" href="#" title="Click for a new shape">Klik DIsini</a>)</p>
<canvas id="mc-canvas">
Your browser doesn't support the canvas element - please visit in a modern browser.
</canvas>
<input type="hidden" id="mc-action" value=""/>
</div>
<p><input disabled="disabled" autocomplete="false" type="submit" value="Submit"></p>
</form>
<script src="style/jquery.min.js" type="text/javascript"></script>
<script src="style/jquery.motionCaptcha.0.2.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mc-form').motionCaptcha({
shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'zigzag', 'arrow', 'delete', 'pigtail', 'star']
});
});
</script>
</body>
</html>
hanya seperti itu, dan silahkan cek di browser anda, terserah asalkan browser anda support jquery
Selamat Mencoba Semoga Berhasil
Raka Adi Nugroho
Salam Joskoder
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
