 |
Tạo bức màn đóng mở cho Blogspot bằng jQuery |
Traidatmui.com – Các bạn thường thấy ở những sân khấu có bức màn che ngang, khi chương trình bắt đầu thì người ta sẽ giật dây để bức màn mở ra và đi về 2 phía của sân khấu. Mình nói vậy để các bạn hình dung dễ dàng về bài viết này, bài viết này mình tham khảo tại buildinternet.com và xin chia sẻ các bạn cách để tạo một bức màn che ngang trong Blogspot. Với thủ thuật này thì blog của bạn sẽ bị che bởi một bức màn đỏ, người dùng muốn xem blog bạn thì chỉ cần làm một thao tác là giật dây bằng cách nhấn "Click Me" bức màn sẽ mở ra. Bạn có thể xem demo bên dưới để thấy rỏ hơn.
» 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>
- 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>
6. Cuối cùng là save template lại
Chúc bạn thành công
MediaFire.com tham gia mạng quảng cáo Ad360.vn Thủ thuật: Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot Thủ thuật: Chèn link tự động vào các từ khóa trong bài viết cho Blogspot Thủ thuật: Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox trong Blogspot Code tạo quảng cáo popup xuất hiện 1 lần/1 ngày/1 ip
» 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