caoviethoa92
Tổng số bài gửi : 64 Điểm tích lũy : 4623 Thích : 0 Tham gia : 27/02/2012
| Tiêu đề: [Share] Khung đăng nhập + thông tin lý lịch Sat Jun 15, 2013 3:46 pm | |
| Thấy mọi người đua nhau share code nên mình cũng share luôn cho vui. Tuy code này không có cầu kỳ gì nhưng được cái là nhẹ và tận dụng được khoảng trắng. Demo: Ở góc phải màn hình nhá Khi chưa đăng nhập là khung đăng nhập. (mình không có thêm phần save nhé hãy tự thêm nha) Khi đăng nhập rồi sẽ là thông tin lý lịch. Còn đây là cách làm: Bước 1: Thêm đoạn code sau vào phần Overall Header, Overall Footer nếu muốn hiển thị ở tất cả các trang. Index Body nếu muốn hiển thị chỉ ở trang Index. [hide] - Code:
-
<!-- BEGIN switch_user_logged_out --> <div class="khungdn_ll"> <div style="border: 2px solid #FFF;font-weight:bold;width:115px;background-color:#000;padding:7.5px;color:#FFF;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;margin-botton:-2px;">Khung đăng nhập</div> <div style="border: 4px double #000;background-color:#FFF;padding:10px;background: url(http://i48.servimg.com/u/f48/16/58/89/73/box10110.gif) repeat;"> <form action="/login" method="post" name="form_login"> <p> <label><center> <input type="text" style="font-weight:bold;font-size: 11px;margin:2.5px;" name="username" id="username" size="15" accesskey="u" tabindex="101" value="Tên đăng nhập" onfocus="if (this.value == 'Tên đăng nhập') this.value = '';" /> </center></label> </p> <p> <label><center> <input type="password" style="font-weight:bold;font-size: 11px;margin:2.5px;" name="password" id="password" size="15" tabindex="102" value="********" onfocus="if (this.value == '********') this.value = '';" /> </center></label> </p> <p> <label> <div style="margin-top:5px;"> <center> <input type="submit" name="login" value="Đăng nhập" /> </center> </div> </label> </p> </form> </div> </div> <!-- END switch_user_logged_out --> <!-- BEGIN switch_user_logged_in --> <div class="khungdn_ll"> <div style="border: 2px solid #FFF;font-weight:bold;width:115px;background-color:#000;padding:7.5px;color:#FFF;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;margin-botton:-2px;">Thông tin lý lịch</div> <div style="border: 4px double #000;background-color:#FFF;padding:10px;background: url(http://i48.servimg.com/u/f48/16/58/89/73/box10110.gif) repeat;"> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/profile?mode=editprofile"><span style="font-size:12px;font-weight:bolid"> Lý lịch thành viên </span></a></p> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/profile?mode=editprofile&page_profil=friendsfoes"><span style="font-size:12px;font-weight:bolid"> Danh sách bạn bè </span></a></p> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/profile?mode=editprofile&page_profil=signature"><span style="font-size:12px;font-weight:bolid"> Chữ ký đại diện </span></a></p> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/profile?mode=editprofile&page_profil=avatars"><span style="font-size:12px;font-weight:bolid"> Hình đại diện </span></a></p> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/profile?mode=editprofile&page_profil=preferences"><span style="font-size:12px;font-weight:bolid"> Thay đổi giao diện </span></a></p> <p><img src="http://i64.servimg.com/u/f64/15/44/78/93/mini_p10.png" /><a href="/search?search_id=watchsearch"><span style="font-size:12px;font-weight:bolid"> Bài viết theo dõi </span></a></p> </div> </div> </div> <!-- END switch_user_logged_in --> Bước 2: Thêm vào css đoạn sau: /* Khung đăng nhập - lý lịch */ - Code:
-
.khungdn_ll {z-index: 999;position: fixed;width:200px;height:154px;right:10px;bottom:-125px;transition: all 3s ease; -webkit-transition: all 3s ease; -moz-transition: all 3s ease;transition-delay: 3s; -webkit-transition-delay: 3s; -moz-transition-delay: 3s;} .khungdn_ll:hover {bottom:0;transition: all 1s cubic-bezier(1,0.1,0.1,1); -webkit-transition: all 1s cubic-bezier(1,0.1,0.1,1); -moz-transition: all 1s cubic-bezier(1,0.1,0.1,1);} Làm xong thấy hay thì thanks dùm mình nha ^^! Nội dung đã bị ẩn đi rồi, phải trả lời bài viết mới thấy được | |
|