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

Xem khác cùng chủ đề

5 nhận xét | Viết lời bình

6/06/2012 02:14:00 SA Trả lời

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?

6/06/2012 05:53:00 CH Trả lời

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

6/06/2012 06:41:00 CH Trả lời

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

Admin
6/06/2012 07:20:00 CH Trả lời

Để 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]

6/07/2012 07:00:00 CH Trả lời

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

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang