Saturday, July 25, 2015

Tạo list nhạc dạng ẩn hiện bên trái/phải cho blogspot/blogger


Như Demo của Hồ Hoàng Thái (hohoangthait.blogspot.com) bên phải web là 1 trình nghe nhạc thật là thú vị phải ko.
1 list nhạc dạng ẩn hiện bên trái/phải cực pro cho blogspot

Bạn thấy sao, bạn muốn làm điều ấy, thật đơn giản phải ko nào. Mình đã chia sẻ cách làm ở dưới. Đặc biệt với bản này, bạn có thể thêm chút gia vị để biến nó thành trình duyệt nghe nhạc trên Iphone đấy. Do không có nhiều thời gian, nên tạm thời mình chưa làm được, Dịp sau mình sẽ làm.

Các bước thực hiện khá đơn giản:
- Chọn Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript.
- Copy và Paste toàn bộ code bên dưới vào:

<!-- Facebook Widget Start -->
<script type="text/javascript">
/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N_abg3uAXdCflUaCb683MKkZZBFvYm4iw9jJkVGOll3KadSf4rPaIn3qVZJiw6sGtDjBc1xzHqrAqN_rcbzKJmScUkv6981lcevORI_mpl0afQ869WpZSudhnqnx5LSt9lGa2-nvFJew/s173/vbb_2%2520copy.PNG") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}</style>
<div class="noopslikebox"><div>

<iframe width="860" height="240" src="http://mp3.zing.vn/embed/album/ZWZBO7U9?start=true" frameborder="0" allowfullscreen="true"></iframe>
</div>
<!-- Facebook Widget End --></div>

Chú ý: Thay code màu đỏ bằng code list nhạc của bạn

Hãy để lại nhận xét để giúp blog ngày càng phát triển!