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

Đây là 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 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.

DEMO

áp dụng vào blogspot

Để tạo Widget nhạc ẩn hiện khi Click chuột ta cần tiến hành các bước sau đây:
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/-iKlTYViHA6I/UybG0aAbUqI/AAAAAAAAmLo/PuTfpF6dyOw/s1600/widget-choi-nhac-an-hien.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">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
 <iframe allowfullscreen="" frameborder="0" height="320" src="http://www.youtube.com/embed/WS8OMAmmuSY" width="520"></iframe></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (75-gb.offsetWidth).toString() + "px";
</script>

Trong đó: Màu đỏ: là mã nhúng của đoạn nhạc
Màu xanh: là ảnh hiện thị khi bạn Click vào.