How to add HTML Login Form to blogger

By this useful article you will teach that how to add HTML Login Form to blogger.  If you want to include  login box in the blogger home page, read this useful article carefully.  lots of visitors and readers like better going to the homepage itself to login and contact your free blog blogger. Lot of visitors entered  blogger blog using login form widget  as the keyword, but they did find anything, so,  it is possible to include login form widget to blogger. I think it is  likely to include login form widget with some codes or scripts to your free blog blogger  sidebar and contact your dashboard from that login box. If you want to read more about Login form like:php login form, css login form, registration form, jquery login form, login form in jsp, login form in java, vb coding for login form.

I am sure you like login widget on your free blog blogger. One more profit of  login form on free blog blogger is  speedy and easy method to create your free blog blogger more powerful and dynamic. The first step to include  login form into your free blog blogger is to create the genuine HTML code for the form. Lot of new visitors and bloggers want to easy functions and guidance. Recently I have received emails about training of  how to include login form in blogger, from which emails most of bloggers said that lot of articles available online but very difficulty to understand and now I have seen the requirement of new blog owners and other friends I try well to create very easy  step by step suggestions and tips about how to include login form to free blog blogger. Now see the following tips step by step with carefully.

In this great function of how include login form free blog blogger side bar go to www.blogger.com  After that move to Deshboard >Layout > Page Element > now  click on Ad a Gadget, after clicking on  Add a Gadget then you will see HTML/JavaScript and will follow more functions and and then you will see the  picture has given below for your guidance. 

After that when you will click on HTML/JavaScript then once again you will see the picture has given below:

Finally select the following code and then  paste it in the above picture with carefully. 


div style="border:1px solid #ffffff;"><form id="gaia_loginform" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());"><div id="gaia_loginbox"><table class="form-noindent" cellspacing="3" cellpadding="5" width="100%" border="0"><tr> <td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa"><br /> <input type="hidden" name="ltmpl" value="start" /><br /> <div class="loginBox"><table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0"><tr> <td colspan="2" align="center"><br /> <font size="-1">Sign in with your</font><br /> <table><tr> <td valign="top"><br /> <img src="https://www.google.com/accounts/google_transparent.gif" alt="Google" /><br /> </td> <td valign="middle"><br /> <font size="+0"><b>Account</b></font><br /> </td> </tr> </table></td> </tr> <tr> <td colspan="2" align="center"><br /> </td> </tr> <tr id="email-row"> <td nowrap="nowrap"><br /> <div align="right"><span class="gaia le lbl">Email:</span><br /> </div></td> <td><br /> <input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" /><br /> <input type="hidden" name="service" id="service" value="blogger" /><br /> <input type="hidden" name="naui" id="naui" value="8" /><br /> <input type="hidden" name="fpui" id="fpui" value="2" /><br /> <input type="hidden" name="skipvpage" id="skipvpage" value="true" /><br /> <input type="hidden" name="rm" id="rm" value="false" /><br /> <input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" /><br /> <input type="hidden" name="ltmpl" id="ltmpl" value="start" /><br /> <input type="hidden" name="alwf" id="alwf" value="true" /><br /> <input type="hidden" name="alinsu" id="alinsu" value="0" /><br /> <input type="hidden" name="ltmpl" id="ltmpl" value="start" /><br /> <input type="hidden" name="timeStmp" id="timeStmp" value=''/><br /> <input type="hidden" name="secTok" id="secTok" value=''/><br /> <input type="hidden" name="GALX" value="EmaSfmXjlk8" /><br /> <input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' /><br /> </td> </tr> <tr> <td></td> <td align="left"><br /> <div style="color: #666666; font-size: 75%;">ex: pat@example.com</div></td> </tr> <tr id="password-row" class="enabled"> <td align="right" nowrap="nowrap"><br /> <span class="gaia le lbl">Password:</span><br /> </td> <td><br /> <input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" /><br /> </td> </tr> <tr> <td> </td> <td align="left"><br /> </td> </tr> <tr id="rememberme-row" class="enabled"> <td align="right" valign="top"><br /> <input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" checked='checked' /><br /> <input type="hidden" name='rmshown' value="1" /><br /> </td> <td><br /> <label for="PersistentCookie" id="PersistentCookieLabel" class="gaia le rem">Stay signed in</label><br /> </td> </tr> <tr> <td><br /> </td> <td align="left"><br /> <input type="submit" class="gaia le button" name="signIn" id="signIn" value="Sign in" /><br /> </td> </tr> <tr id="ga-fprow"> <td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom"><br /> <a href="https://www.blogger.com/forgot.g" target=_top>Can't access your account?</a><br /> </td> </tr> </table></div></td> </tr> </table></div><input type="hidden" name="asts" id="asts" value="" /><br /> </form><script> var gaia_loginForm; if (document.getElementById) { gaia_loginForm = document.getElementById("gaia_loginform"); } else if (window.gaia_loginform) { gaia_loginForm = window.gaia_loginform; } var gaia_emailHasKeypress = false; if (gaia_loginForm && gaia_loginForm.Email) { gaia_loginForm.Email.onkeypress = function() { gaia_emailHasKeypress = true; } } function gaia_setFocus() { if (gaia_loginForm) { if (gaia_loginForm.Email && !gaia_loginForm.Email.value) { gaia_loginForm.Email.focus(); } else if (gaia_loginForm.Passwd && !gaia_emailHasKeypress) { gaia_loginForm.Passwd.focus(); } } } gaia_setFocus(); </script><br /> <form id="gaia_universallogin" action="https://www.google.com/accounts/ServiceLoginAuth" method="post" onsubmit="return(gaia_onLoginSubmit());"><input type="hidden" name="continue" id="continue" value="https://www.blogger.com/loginz?d=http%3A%2F%2Fwww.blogger.com%2Fhome&a=ADD_SERVICE_FLAG" /><br /> <input type="hidden" name="service" id="service" value="blogger" /><br /> <input type="hidden" name="naui" id="naui" value="8" /><br /> <input type="hidden" name="fpui" id="fpui" value="2" /><br /> <input type="hidden" name="skipvpage" id="skipvpage" value="true" /><br /> <input type="hidden" name="rm" id="rm" value="false" /><br /> <input type="hidden" name="dsh" id="dsh" value="-5001523091454835929" /><br /> <input type="hidden" name="ltmpl" id="ltmpl" value="start" /><br /> <input type="hidden" name="alwf" id="alwf" value="true" /><br /> <input type="hidden" name="alinsu" id="alinsu" value="0" /><br /> <input type="hidden" name="ltmpl" id="ltmpl" value="start" /><br /> <input type="hidden" name="ltmpl" id="ltmpl" value="start" /><br /> </form></div

Once again I give you  great advice that  copy the above code from word <div> to </div> and paste it in the above picture and now save your blogger template after that you find  your login form in blogger sidebar it will look like following picture:

In view of the above another great code if you want to change your login form in other look I introduce following code for new blog owners,  you can test it from both codes you can select one as you like:

<br /> <form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form><br />

Now you are thinking that what the above code look like copy the above code according the procedure has already given and you will see it follow the picture has given below:

If you like this article please leave your comments.