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
dan berikut ini adalah code cascading stylesheetnya
dan berikut ini adalah code keseluruhan dari Motion Captcha, silahkan simpan diluar folder style, dengan nama index.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
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
Comments
Post a Comment