CARA MEMBUAT PASS STRENGTH

Hai sobat, ane hadir lagi di kehidupan sobat. Pass strength ini pertama kali ane liat di blognya Mbak Arlina, pass strength berguna buat menentukan keamanan atau kekuatan password sobat. Langsung aja simak tutorialnya...........

1. Buka blogger.com
2. Kemudian ke Template terus ke Edit HTML
3. Copy CSS di bawah dan taruh di atas ]]></b:skin>

/* Custom CSS for Pass Strength */
input#pwd {width:50%;color:#666;border:1px solid #e5e5e5;padding:5px;margin:20px auto;float:none;}
#pwd_strength_wrap {background:#fcfcfc;border:1px solid #e5e5e5;border-radius:2px;display:none;float:left;padding:15px;position:relative;width:auto;box-shadow:4px 4px 0 #f5f5f5;}
#pswd_info ul {list-style-type:none;margin:5px 0 0;padding:0;}
#pswd_info ul li {color:#308cf4;background: url(http://2.bp.blogspot.com/-wBYlnND0TkE/VBDPofBF_zI/AAAAAAAABVU/RtZHTPtr_8o/s1600/icon_pwd.png) no-repeat left 2px;padding:0 0 0 20px;opacity:0.8;}
#pswd_info ul li.valid {opacity:1;background-position:left -42px;color:#bbb;text-decoration:line-through;}
#passwordStrength {display:block;height:5px;margin-bottom:10px;transition:all 0.6s ease-in-out;}
.strength0 {background:none;width:0px;}
.strength1 {background:none repeat scroll 0 0 #FF4545;width:25px;}
.strength2 {background:none repeat scroll 0 0 #FFC824;width:75px;}
.strength3 {background:none repeat scroll 0 0 #6699CC;width:100px;}
.strength4 {background:none repeat scroll 0 0 #008000;width:150px;}

4. Jika sudah klik simpan template

5. Terus klik laman terus laman baru

6. Pilih mode HTML jangan compose
7. Kalo udah copy code di bawah dan taruh di laman baru yang sobat buat tadi

<b>Check the strength of your password here</b>

<form>
<label>Type your password:</label>

<input id="pwd" type="password" />

<div id="pwd_strength_wrap">
<div id="passwordDescription">
Password not entered</div>
<div class="strength0" id="passwordStrength">
</div>
<div id="pswd_info">
<strong>Strong Password Tips:</strong>

<ul>
<li class="invalid" id="length">At least 6 characters</li>
<li class="invalid" id="pnum">At least one number</li>
<li class="invalid" id="capital">At least one lowercase & one uppercase letter</li>
<li class="invalid" id="spchar">At least one special character</li>
</ul>
</div>
<!-- END pswd_info -->

</div>
<!-- END pwd_strength_wrap -->

</form>
<style>
.comments, .blog-pager {display:none;visibility:hidden;width:0;height:0;}
</style>

<script type="text/javascript">
//<![CDATA[
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
$("input#pwd").on("focus keyup", function () {
         
});
 
$("input#pwd").blur(function () {
         
});
$("input#pwd").on("focus keyup", function () {
        var score = 0;
        var a = $(this).val();
        var desc = new Array();
 
        // strength desc
        desc[0] = "Too short";
    desc[1] = "Weak";
    desc[2] = "Good";
    desc[3] = "Strong";
    desc[4] = "Excellent";
         
});
 
$("input#pwd").blur(function () {
 
});
$("input#pwd").on("focus keyup", function () {
        var score = 0;
        var a = $(this).val();
        var desc = new Array();
 
        // strength desc
        desc[0] = "Too short";
        desc[1] = "Weak";
        desc[2] = "Good";
        desc[3] = "Strong";
        desc[4] = "Excellent";
         
        // password length
        if (a.length >= 6) {
            $("#length").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#length").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 digit in password
        if (a.match(/\d/)) {
            $("#pnum").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#pnum").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 capital & lower letter in password
        if (a.match(/[A-Z]/) && a.match(/[a-z]/)) {
            $("#capital").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#capital").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 special character in password {
        if ( a.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) {
                $("#spchar").removeClass("invalid").addClass("valid");
                score++;
        } else {
                $("#spchar").removeClass("valid").addClass("invalid");
        }
 
 
        if(a.length > 0) {
                //show strength text
                $("#passwordDescription").text(desc[score]);
                // show indicator
                $("#passwordStrength").removeClass().addClass("strength"+score);
        } else {
                $("#passwordDescription").text("Password not entered");
                $("#passwordStrength").removeClass().addClass("strength"+score);
        }
});
 
$("input#pwd").blur(function () {
 
});
$("input#pwd").on("focus keyup", function () {
        var score = 0;
        var a = $(this).val();
        var desc = new Array();
 
        // strength desc
        desc[0] = "Too short";
        desc[1] = "Weak";
        desc[2] = "Good";
        desc[3] = "Strong";
        desc[4] = "Excellent";
 
        $("#pwd_strength_wrap").slideDown(600).fadeIn(600);
         
        // password length
        if (a.length >= 6) {
            $("#length").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#length").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 digit in password
        if (a.match(/\d/)) {
            $("#pnum").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#pnum").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 capital & lower letter in password
        if (a.match(/[A-Z]/) && a.match(/[a-z]/)) {
            $("#capital").removeClass("invalid").addClass("valid");
            score++;
        } else {
            $("#capital").removeClass("valid").addClass("invalid");
        }
 
        // at least 1 special character in password {
        if ( a.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) {
                $("#spchar").removeClass("invalid").addClass("valid");
                score++;
        } else {
                $("#spchar").removeClass("valid").addClass("invalid");
        }
 
 
        if(a.length > 0) {
                //show strength text
                $("#passwordDescription").text(desc[score]);
                // show indicator
                $("#passwordStrength").removeClass().addClass("strength"+score);
        } else {
                $("#passwordDescription").text("Password not entered");
                $("#passwordStrength").removeClass().addClass("strength"+score);
        }
});
 
$("input#pwd").blur(function () {
        $("#pwd_strength_wrap").slideUp(600).fadeOut(600);
});
//]]>
</script>



<style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style>
<div style='clear:both;'>
</div>

8. Jika sudah klik publikasikan

• Demo

Sumber code: arlinadesign.blogspot.com/p/pass-strength.html

Subscribe to receive free email updates: