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

Điểm 4.6/5 dựa vào 87 đánh giá

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>
<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>

- 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>

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

Loading...

5 nhận xét

  1. Mỗi lần chuyển trang xem bài khác cứ phải click me hoài à, có cách nào chỉ 1 lần lúc mới vào trang được không?

    Trả lờiXóa
  2. cái này dùng để làm demo trang chủ thôi bạn còn vào trang ai lại làm cái này rối cả mắt nuocmui

    Trả lờiXóa
  3. Cũng tính demo ở home, nhưng click xem bài nó lại hiện ra bức màn, phải click me nó mới cho mình đọc! Xong, đọc tiếp bài khác cũng y chang, cũng lại hiện ra bức màn hi hi...

    Trả lờiXóa
    Trả lời
    1. Để cho nó chỉ hiển thị ở trang chủ thì bạn chỉ cần cho đoạn code ở bước 5 nằm giữa dòng b:if như bên dưới.
      [code]<b:if cond='data:blog.url == data:blog.homepageUrl'>

      Code ở bước 5

      </b:if>[/code]

      Xóa
  4. Giá mà nó chỉ Welcome 1 dần duy nhất khi mình vào trang, hì hì...

    Trả lờiXóa