Tạo khung đăng nhập đẹp cho blog
|
vuongsungdong
CÁC BƯỚC THỰC HIỆN:
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 -->
theo tanchau123.blogspot.com
Sưu tầm bởi : www.meovatcuocsong.blogspot.com
Posted in
MẸO VẶT BLOGGER
Phan Tú
lúc 02:21 23 tháng 11, 2012
Khi copy nguyên Code đó, Vẫn hiển thị hộp đăng nhập rất hoành tráng, nhưng khi đăng nhập là nó báo lỗi bạn ơi, mình thử nhiều lần rồi . Cảm ơn bạn