Widget nhạc ẩn hiện khi Click chuột

Thứ Ba, 27 tháng 3, 2012

Theo yêu cầu của một số bạn hôm nay namkna giới thiệu cho các bạn thủ thuật tạo một trình nghe nhạc tự đổng ẩn hiện khi ta click chuột vào. Tiện ích này rất phù hợp với các bạn có tính phá cách, muốn tạo điểm nổi bật cho Blog của mình. Ưu điểm thủ thuật này là khi bạn ẩn trình nghe nhạc vẫn tiếp tục chạy nếu bạn không ấn tạm dừng. Có thể áp dụng với cả nhạc hình và nhạc không hình
Xem Demo


☼ Bắt đầu thủ thuật
Cách 1: Dùng JS
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Phần tử trang - Thêm tiện ích - HTML/Javarscrip và dán code bên dưới vào:
<style type="text/css">
#gb{
position:fixed;
bottom:5px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:74px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-5nyYkIoJSBo/TwvS9UWGRoI/AAAAAAAAAcE/0ZvmrsiZhWc/s1600/
widget-choi-nhac-an-hien-namkna-ngoctra.gif') no-repeat;
}
.gbcontent{
float:left;
background:none;
padding:3px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb"
>
 
 
 
 Trong đó: Mùa đỏ: là mã nhúng của đoạn nhạc

Màu xanh: là ảnh hiện thị khi bạn Click vào. Các bạn cso thể dùng Photoshop để
 tự thiết kế cho mình các ảnh đẹp nha. Nếu bạn nào chưa cài photoshop có thể thiết kế Online TẠI ĐÂY

Chúc thành công!
 
Xem thêm bài viết cùng chuyên mục:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn