The Yaj Computers Portal

Post Top Ad

Post Top Ad

Tuesday, July 7, 2015

Sliding User Login Panel Built With JQuery


Membership in a website offers many advantages for the website owner. You can provide an exclusive member features that work only if anyone has already become a member. This is to increase their recurring visits on your website. 

If you sell online, The recurring visits of the members will create more chance for them to buy your stuffs. They will probably click the buy button on your site at their 2nd or 3rd visit.

To make this membership works on your site, You need a user login panel and also a hosting service that will host your site and back up all your data (eq Web hosting and PHPMySql system).

Now i'm going to show you a login panel demo from Web-Kreation that will create a nice sliding down effect and will be placed above your header:


 Here's how to create it :

  • Log in to your Blogger account.
  • In your Blogger Dashboard, Click TEMPLATE.
  • Click edit HTML Proceed
  • Find this code using a Ctrl+function : 
    • Copy-Paste The below codes BEFORE it :

        • Now find this code : 
            ]]>
            • Copy-paste the below codes BEFORE it :
              /***** clearfix *****/
              .clear {clear: both;height: 0;line-height: 0;}
              .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
              .clearfix {display: inline-block;}
              /* Hides from IE-mac \*/
              * html .clearfix {height: 1%;}
              .clearfix {display: block;}
              /* End hide from IE-mac */
              .clearfix {height: 1%;}
              .clearfix {display: block;}

              /* Panel Tab/button */
              .tab {
              background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
              height: 42px;
              position: relative;
              top: 0;
              z-index: 999;
              }

              .tab ul.login {
              display: block;
              position: relative;
              float: right;
              clear: right;
              height: 42px;
              width: auto;
              font-weight: bold;
              line-height: 42px;
              margin: 0;
              right: 150px;
              color: white;
              font-size: 80%;
              text-align: center;
              }

              .tab ul.login li.left {
              background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
              height: 42px;
              width: 30px;
              padding: 0;
              margin: 0;
              display: block;
              float: left;
              }

              .tab ul.login li.right {
              background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
              height: 42px;
              width: 30px;
              padding: 0;
              margin: 0;
              display: block;
              float: left;
              }

              .tab ul.login li {
              text-align: left;
              padding: 0 6px;
              display: block;
              float: left;
              height: 42px;
              background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
              }

              .tab ul.login li a {
              color: #15ADFF;
              }

              .tab ul.login li a:hover {
              color: white;
              }

              .tab .sep {color:#414141}

              .tab a.open, .tab a.close {
              height: 20px;
              line-height: 20px !important;
              padding-left: 30px !important;
              cursor: pointer;
              display: block;
              width: 100px;
              position: relative;
              top: 11px;
              }

              .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
              .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
              .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
              .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

              /* sliding panel */
              #toppanel {
              position: absolute;
              top: 0;
              width: 100%;
              z-index: 999;
              text-align: center;
              margin-left: auto;
              margin-right: auto;
              }

              #panel {
              width: 100%;
              height: 270px;
              color: #999999;
              background: #272727;
              overflow: hidden;
              position: relative;
              z-index: 3;
              display: none;
              }

              #panel h1 {
              font-size: 1.6em;
              padding: 5px 0 10px;
              margin: 0;
              color: white;
              }

              #panel h2{
              font-size: 1.2em;
              padding: 10px 0 5px;
              margin: 0;
              color: white;
              }

              #panel p {
              margin: 5px 0;
              padding: 0;
              }

              #panel a {
              text-decoration: none;
              color: #15ADFF;
              }

              #panel a:hover {
              color: white;
              }

              #panel a-lost-pwd {
              display: block;
              float: left;
              }

              #panel .content {
              width: 960px;
              margin: 0 auto;
              padding-top: 15px;
              text-align: left;
              font-size: 0.85em;
              }

              #panel .content .left {
              width: 280px;
              float: left;
              padding: 0 15px;
              border-left: 1px solid #333;
              }

              #panel .content .right {
              border-right: 1px solid #333;
              }

              #panel .content form {
              margin: 0 0 10px 0;
              }

              #panel .content label {
              float: left;
              padding-top: 8px;
              clear: both;
              width: 280px;
              display: block;
              }

              #panel .content input.field {
              border: 1px #1A1A1A solid;
              background: #414141;
              margin-right: 5px;
              margin-top: 4px;
              width: 200px;
              color: white;
              height: 16px;
              }

              #panel .content input:focus.field {
              background: #545454;
              }

              /* BUTTONS */
              /* Login and Register buttons */
              #panel .content input.bt_login,
              #panel .content input.bt_register {
              display: block;
              float: left;
              clear: left;
              height: 24px;
              text-align: center;
              cursor: pointer;
              border: none;
              font-weight: bold;
              margin: 10px 0;
              }

              #panel .content input.bt_login {
              width: 74px;
              background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
              }

              #panel .content input.bt_register {
              width: 94px;
              color: white;
              background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
              }

              #panel .lost-pwd {
              display: block;
              float:left;
              clear: right;
              padding: 15px 5px 0;
              font-size: 0.95em;
              text-decoration: underline;
              }
              • Find this last code : 
                • Copy-paste the below codes BEFORE it : 
                  
                  

                  Welcome To Digita7seven

                  Sliding User Login Panel Demo

                  This is only a demo panel

                  Blogger Tutorials

                  To create this demo panel, go to : Click Here

                  Member Login

                  Not a member yet? Sign Up!

                  • You can replace the words marked with RED with your own value.
                  • Save your template. 
                    The Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system).

                    No comments:

                    Post a Comment

                    You May Like to Read:

                    You May Like to Read:

                    Follow by Email

                    Popular Posts