Type Here to Get Search Results !

Tạo bức màn đóng mở cho Blogspot bằng jQuery

Bước 1: Vào phần thiết kế (Design)
Bước 2: Chọn chỉnh sửa HTML (Edit HTML)
Bước 3: Tìm thẻ <head> -> -> Dán sau nó đoạn code
<div class="codeview">
<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 src="http://data-traidatmui.appspot.com/scripts/jquery.min.js" type="text/javascript">
</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>
Ghi chú:
- 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(){.

Bước 4: Tìm thẻ <body> và chèn sau nó đoạn code
<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>
Bước 5: Lưu mẫu

Đăng nhận xét

0 Nhận xét
Spam, Comment bao gồm link quảng cáo và thiếu văn hóa sẽ bị xóa bởi người kiểm duyệt.
* Please Don't Spam Here. All the Comments are Reviewed by Admin.