Tạo khung đăng nhập/Login phiên bản Ver2 cho blogspot

Khung đăng nhập này được thiết kế kết hợp giữa sử dụng CSS và HTML. Do đó đây là phiên bản Ver2 và được nâng cấp đẹp hơn so với lần trước.



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&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>
<input type="text" name="username" placeholder="Your Gmail" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="&#272;&#259;ng nh&#7853;p" /> <a href='https://www.blogger.com/signup.g' target='_blank'><input type="submit2" value="&#272;&#259;ng ký" /></a>

</form>
</center>
</div>
<!-- Code by tanchau123.blogspot.com -->

theo tanchau123.blogspot.com
S&#432;u t&#7847;m b&#7903;i : www.meovatcuocsong.blogspot.com