Hướng dẫn chèn trình chơi nhạc HTML5 Music có Playlist cho Blogger

Demo

Bạn là người mê âm nhạc và đang xây dựng một blog về chủ đề Music tổng hợp những bài hát chất lượng nhưng bạn thấy các công cụ chèn code nhạc hiện nay cho blogger quá đơn giản và xấu, bạn muốn một mã code phức tạp hơn, trình chơi nhạc thông minh và chuyên nghiệp như một website chuyên về âm nhạc thực thụ thì có lẽ bạn nên dùng mã HTML5. Sau đây mình sẽ hướng dẫn các bạn chèn trình chơi nhạc đẹp và chuyên nghiệp bằng HTML5 cho blog. Demo đẹp như hình trên luôn nhé! Đơn giản thôi!
Bước 1: Đăng nhập vào blogger, chọn Mẫu, chọn chỉnh sửa mẫu ở chế độ HTML

Chỉnh sửa mẫu ở chế độ HTML

Bước 2: Coppy đoạn code sau và dán lên trước thẻ </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script>

Bước 3: Coppy đoạn mã sau và chèn vào nơi muốn cái máy chơi nhạc đó xuất hiện

<div class="mbl">
<div class="mbl_player" id="mnplp">
<div class="mbl_art_bg"></div>
<img class="mbl_cover" src="" alt=""/>
<span class="mnpl_title"></span>
<span class="mnpl_author"></span>
<div class="mnpl_volume_min"></div>
<div class="mnpl_volume"></div>
<div class="mbl_volume_max"></div>
<div class="mnpl_toolbar">
<div class="mnpl_tlb_prev"></div>
<div class="mnpl_tlb_stop"></div>
<div class="mnpl_tlb_next"></div>
<div class="mnpl_current"></div>
<div class="mnpl_long"></div>
<div class="mnpl_all"></div>
</div>
<div class="mbl_playlist">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
]
});
});
</script>

Thưởng thức thôi!