☼ Cách tạo một tiện ích nhạc ẩn hiện khi click chuột cho blogspot

Theo yêu cầu của một số bạn 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

Các bạn có thể xem demo của mình ở link bên dưới để kiểm tra xem tiện ích này hoạt động như thế nào nha:

Xem Demo

Bạn nào thích dạng tự động ẩn hiện khi dê chuột vào thì xem Tại đây

1. Đăng nhập vào tài khoản blogger

2. Vào bố cục (Layout) => Chọn phần Thêm tiện ích (Add widget) - Chọn để tạo một tiện íchHTML/Javarscripts và dán code bên dưới vào phần nội dung của tiện ích đó nha:

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJxIe2VcNp3Luryy2JMsmJygmEEelCQ5tEGQFBXIxoO1Hlbu9T-xbgYASq83DXPjRf4twNlCKqGvyWlaSeoIo6uFH1V4xVvd6_zP0AAfPntZHcLA3-8SM20eCsANzYDbUJVx7TpFyxL_P/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">
<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>

» Tùy biến code:

• Phần màu đỏ là mã nhúng của đoạn nhạc, video hoặc là khung chatbox của bạn. Bạn có thể chèn bất cứ thứ gì bạn muốn ở đó.
• Link ảnh Màu xanh là ảnh luôn luôn hiện thị, Nó đóng vai trò như một chiếc công tắc để bạn bật hoặc tắt trình nghe nhạc hoặc chat box của bạn bằng cách Click vào link ảnh đó. 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

3- Giờ lưu tiện ích đó lại và quay trở lại giao diện blog của bạn để xem tiện ích này hoạt động như thế nào nha.

Cuối cùng hãy để lại một comment ở bên dưới nếu bạn gặp bất cứ khó khăn nào khi áp dụng thủ thuật này, và đừng quyên chia sẻ bài viết nếu cảm thấy bài viết này có ích bới bạn nha :)