Widget Nhạc Ẩn Hiện Khi Click Chuột Cho Blogspot

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

Live Demo

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

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/AVvXsEgM-thdnt417uWOLxLGME4w5foCEqokr8doZzQ6Zb4Ra6G0w3NBNjdzbNzye-v9WFLvVoYRwczowaxk-JfmItYrDO-aZo7hO-9FsFjW7MGozgT2QBvGwtjiZ6VGopFvD3uOEU5Ltp9fjZ5x/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.

Nguồn: http://www.terocket.com/2012/01/widget-nhac-hien-khi-click-chuot.html