» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.leftcurtain{
width: 50%;
height: 100%;
top: 0px;
left: 0px;bottom: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 100%;
right: 0px;
top: 0px;
bottom: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.rope{
position: absolute;
top: -40px;
right: 20px;
z-index: 99999;
}
</style> <script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
*{
margin:0;
padding:0;
}
.leftcurtain{
width: 50%;
height: 100%;
top: 0px;
left: 0px;bottom: 0px;
position: absolute;
z-index: 2;
}
.rightcurtain{
width: 51%;
height: 100%;
right: 0px;
top: 0px;
bottom: 0px;
position: absolute;
z-index: 3;
}
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
}
.rope{
position: absolute;
top: -40px;
right: 20px;
z-index: 99999;
}
</style> <script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$curtainopen = false;
$(".rope").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = true;
}else{
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
- width:'60px' : Đây là độ rộng còn lại sau khi mở màn.
- Số 2000 ở trên chính là thời gian kéo màn ra tương ứng là 2 giây, bạn có thể thay đổi giá trị này (Càng lớn sẽ càng chậm đi).
- Để bức màn tự kéo ra mà không cần phải "Click Me" thì bạn chỉ cần thay dòng code $(".rope").click(function(){ thành $(window.onload=function(){.
5. Tiếp theo bạn chèn đoạn code bên dưới vào sau thẻ <body>
<div class="leftcurtain"><img src="https://lh5.googleusercontent.com/-62CYcrKxeWY/T8bN0cVlHBI/AAAAAAAAAPc/7mMvebUEzL8/s495/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="https://lh5.googleusercontent.com/-62CYcrKxeWY/T8bN0cVlHBI/AAAAAAAAAPc/7mMvebUEzL8/s495/frontcurtain.jpg"/></div>
<a class="rope" href="#"><img src="https://lh4.googleusercontent.com/-vviYXfaIoOg/T8bN0Zj09aI/AAAAAAAAAPY/2QR6s3vT1tE/s320/rope.png"/></a>
<div class="rightcurtain"><img src="https://lh5.googleusercontent.com/-62CYcrKxeWY/T8bN0cVlHBI/AAAAAAAAAPc/7mMvebUEzL8/s495/frontcurtain.jpg"/></div>
<a class="rope" href="#"><img src="https://lh4.googleusercontent.com/-vviYXfaIoOg/T8bN0Zj09aI/AAAAAAAAAPY/2QR6s3vT1tE/s320/rope.png"/></a>
6. Cuối cùng là save template lại
Chúc bạn thành công
Tham khảo tại buildinternet.com
0 nhận xét:
Đăng nhận xét