Làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger

P

hucNguyenIT  xin chào tất cả mọi người, hôm nay blogs PhucNguyenIT sẽ hướng dẫn mọi người một hướng dẫn về làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery. Đăng nhập và đăng ký thường được sử dụng trên một blog hoặc trang web diễn đàn có nhiều thành viên. Ví dụ về các hình thức đăng nhập / đăng ký này có thể được tìm thấy nếu bạn đăng nhập vào Blogger, Facebook, Twitter hoặc các trang web cung cấp dịch vụ cộng đồng mạng. Ví dụ, bạn bè của tôi có thể nhìn thấy trong hình dưới đây, 

làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery

 Các bạn làm theo hướng dẫn bên dưới:

1. Đầu tiên, bạn phải đăng nhập vào blogger .
2. Sau đó nhấp vào Thiết kế ( mẫu)
3. Sau đó nhấp vào Edit Html
4. Đừng quên kiểm tra Expand Widget Templates (hãy lưu 1 bản mẫu để dự phòng)
5. Sau đó tìm  mã sau </ head>

Tiếp theo đặt đoạn code Javascript bên dưới trên </ head>

1. view plainprint?

   1.  

1. sau đó bạn tìm trong code đoạn thẻ ]]> </ b: skin> , Sau đó bạn dán đoạn code CSS bên dưới vào trước thẻ
   ]]> </ b: skin>

/***** 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;
}

Sau khi tất cả mọi thứ mà bạn đã nhập vào, các bước tiếp theo là tìm mã </ body> và đặt đoạn mã sau đây bên trên  
</ body>:

Chào mừng bạn đến với Blog PhucNguyenIT

Tạo cửa sổ Login Với JQuery

Bên cạnh đó, đây là một ví dụ trượt Login sử dụng JQuery. Đăng nhập Form Ngoài ra chỉ dụ và không thể được sử dụng như một Login Form FB, Vì Blog này là mở cửa cho công chúng mà không cần phải đăng ký làm thành viên

Tutorial Blog

Untuk membuatnya Silahkan : Pencet Sini

Member Login

Username:

Password:

Remember me

Lost your password?

Not a member yet? Sign Up!

Username:

Email:

A password will be e-mailed to you.

Xin chào Tất cả mọi người

|

Đăng nhập | Đăng

Tutup Panel

Trong đoạn mã trên, đối với văn bản màu vàng có thể được thay đổi với các văn bản mà bạn muốn, cũng như g màu đỏ  , bạn có thể thay đổi Đăng ký và đăng ký cho ví dụ. Sau đó nhấn Save Template bạn và xem kết quả.ạo ra cửa sổ đăng nhập / đăng ký trên blogger

•