1. Đăng nhập Blogger.
2. Vào Thiết Kế => Phần Tử Trang => Thêm Tiện Ích
3. Chọn HTML/Javascript và paste toàn bộ đoạn code sau vào:
<!-- Code by tanchau123.blogspot.com -->
<style>
.khungdangnhap,
.khungdangnhap h1,
.khungdangnhap span,
.khungdangnhap input,
.khungdangnhap label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.khungdangnhap {
position: relative;
width: 260px;
height: 200px;
padding: 15px 25px 0 15px;
//margin-top: 5px;
cursor: default;
background-color: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}
.khungdangnhap h1 {
line-height: 40px;
font-family: 'Myriad Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}
.khungdangnhap input[type=text],
.khungdangnhap input[type=password],
.khungdangnhap input[type=submit] {
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
outline: none;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(255,255,255, .2);
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;
background:#4d90fe;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 26px;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.khungdangnhap input[type=submit2] {
color:#FFF;
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
outline: none;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;
background:#4d90fe;
font-family: Helvetica, sans-serif;
text-shadow: 0px 1px 1px rgba(255,255,255, .2);
font-size: 12px;
font-weight: bold;
border-radius: 26px;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.khungdangnhap input[type=text],
.khungdangnhap input[type=password]
{
color: #686868;
width: 170px;
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);
background: linear-gradient(top, #ffffff 0%,#989898 100%);
}
.khungdangnhap input[type=text]:hover,
.khungdangnhap input[type=password]:hover {
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}
.khungdangnhap input[type=text]:focus,
.khungdangnhap input[type=password]:focus {
background: #e1e1e1;
background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
}
.khungdangnhap input[type=submit]
{
cursor: pointer;
color: #445b0f;
height: 28px;
line-height:0;
color: #DDD;
background: #4d90fe;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.khungdangnhap input[type=submit2]
{
cursor: pointer;
color: #DDD;
height: 15px;
width: 60px;
text-align:center;
line-height:0;
color: #DDD;
background: #F90;
border: 1px solid #FFD700;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
.khungdangnhap input[type=submit]:hover {
background:#357AE8;
border: 1px solid #2F5BB7;
text-shadow:0 0 3px #FFF !important;
}
.khungdangnhap input[type=submit2]:hover {
background:#F60;
border: 1px solid #2F5BB7;
text-shadow:0 0 3px #FFF !important;
}
.khungdangnhap input[type=submit]:active {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
</style>
<div class="khungdangnhap">
<center>
<strong style="color:white;text-shadow:0 0 3px #FFF !important;">LOGIN FORM</strong>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&passive=true&alinsu=0&aplinsu=0&alwf=true&ltmpl=start&skipvpage=true&rm=false&showra=1&fpui=2&naui=8#s01' method='post'>
<input type="text" name="username" placeholder="Your Gmail" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Đăng nhập" /> <a href='https://www.blogger.com/signup.g' target='_blank'><input type="submit2" value="Đăng ký" /></a>
</form>
</center>
</div>
<!-- Code by tanchau123.blogspot.com -->
CHÚ Ý: Bạn có thể đổi lại màu nền của khung đăng nhập bằng cách thay thế mã màu của nó trong code background-color: #141517;
Màu nền của khung đăng nhập trên là màu đen, để đổi lại màu khác các bạn VÀO ĐÂY để lấy mã.
4. Cuối cùng lưu lại và thưởng thức.
Chúc các bạn thành công!!!
Làm được ùi . Thanks cậu nha .
Trả lờiXóaBài viết rất gút :))
Uhm không có gì. Chúc mừng cậu !
Xóa:P http://www.vatinam.net
Trả lờiXóaWow cái này hay đó, hôm nào mình thử vọc tí xem sao mới được.
Uhm cứ vọc là cứ thành công. Code đơn giản mà pro đó cậu :P
XóaÝ h mới login thử nó văng sang trang gu gồ
Trả lờiXóađánh nick xong thì
[img]http://i1210.photobucket.com/albums/cc417/dung1prohb/23.jpg[/img]
Do google xác minh lại đó bạn à !
Xóathế là lỗi GG àh >.<
Trả lờiXóaxin phep copy nhe!
Trả lờiXóaco ai vui long trau doi textlink voi www.weblogtoolsvn.com ko? Minh moi vua tao weblog nay do nghe tham va trao doi nhe!
Trả lờiXóa@Joseph Nguyễn Ok, bạn copy nhớ ghi rõ nguồn là được rồi. Bạn muốn liên kết với site mình thì vui lòng VÀO ĐÂY để lại nhận xét nhé.
Trả lờiXóaBi lỗi khi mình click nút đăng nhập đó bạn, nó hiện lỗi 404 nè, bạn xem lại giùm mình nhé
Trả lờiXóa@Dinh Van Anh Bạn vui lòng để lại địa chỉ blog bạn để mình vào xem mới biết được vấn đề bạn đang gặp. Hoặc bạn có thể post ảnh lên cùng với nhận xét để mình biết nha :B
Trả lờiXóaKhông đăng nhập trực tiếp được mà lại nhảy về trang đăng nhập của google :(
Trả lờiXóaCái này chỉ để trang trí là chính =))
bạn ơi cho mình hỏi mình áp dụng vào blog của mình thì nó sang trang của google ,dang nhập vào thì nó hiện ra thế này: Please use https://accounts.google.com/ServiceLogin instead.
Trả lờiXóanhư thế là sao vậy mọi người
sao khong copy code duoc vay
Trả lờiXóaBạn xem giuwsp mình blog nha nó bị lỗi khi mình đăng nhập
Trả lờiXóacnktxd.blogspot.com
cảm ơn bạn trước!