Bài viết sau đây sẽ hướng dẫn các bạn thêm ANCPlayer vào Blogger. Chắc mọi người cũng đã biết về ANCPlayer rồi pluins play nhạc từ các sever khác nhau như Youtube,Zing,zippyshare,NhacSo,musik Soha,v.v
Pluins này mình lấy từ Template DJ của bên Ichiase Share trên mạng. Mình chỉ lấy những code chính trong template và edit lại một số thứ, và mình đã gở bỏ đi banner quảng cáo của nó, các bạn tha hồ mà sữ dụng nhé
Bước 1. Các bạn thêm toạn bộ đoạn Javascript này vào trên thẻ </body><!-- Player -->
<script type='text/javascript'>
//<![CDATA[
var $_ = function (a) {
if (document.getElementById) return document.getElementById(a)
}, M = new ANCMusic;
function ANCMusic() {
m_w = this.width;
i_1 = this.id1;
i_2 = this.id2;
au = this.auto;
this.r = function () {
var a = $_(i_1).innerHTML,
a = a.replace(/\[m\]/gi, "<span id='anc_ms' style='display: none;'>"),
a = a.replace(/\[\/m\]/gi, "</span>");
$_(i_1).innerHTML = a;
return z = $_("anc_ms").innerHTML
};
this.p = function (a) {
$_(i_2).innerHTML = M.l(a)
};
this.l = function (a) {
var d = "",
b = [];
- 1 != a.indexOf("zing.vn") && (b = a.match(/\w+/gi),d = o(b)[1]);
- 1 != a.indexOf("zippyshare.com") && (b = a.match(/\w+/gi),d = o(b)[2]);
- 1 != a.indexOf("nhacso.net") && (b = a.match(/[\d\w]+/gi), c = b.length - 2, d = o(b[c])[3], M.css("35"));
- 1 != a.indexOf("nhac.vui.vn") && (b = a.match(/[0-9]+/gi), d = o(b[0])[4]);
- 1 != a.indexOf("musik.soha.vn") && (b = a.match(/\bd[\w\d]+/gi), d = o(b[0].replace(/d/gi, ""))[5]);
- 1 != a.indexOf(".m4a") && (b = a.match(/\bd[\w\d]+/gi), d = o(b[0].replace(/d/gi, ""))[5]);
- 1 != a.indexOf(".mp3") && -1 == a.indexOf("zing.vn") && (d = o(a)[6]);
- 1 != a.indexOf("youtube.com") && (b = a.match(/\w+/gi),d = o(b)[7]);
return d
};
this.css = function (a) {
css = "<style>";
css += "#bomkhung_pl{margin:-" + a + "px 0;}";
css += "</style>";
document.write(css)
}
}
var o = function (a) {
_mode = 'quality="high" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always"';
return data = ['<embed width="' + m_w + '" height="0" src="http://static.mp3.zing.vn/skins/gentle/flash/mp3Player.swf?xmlURL=1212132312/play/?pid=' + a + "||4&songID=0&autoplay=" + au + '" ' + _mode + "/><br /><br />", '<div class="play-mp3"><iframe width="' + m_w + '" height="100" src="http://mp3.zing.vn/embed/song/'+a[11]+'?autostart=true" frameborder="0" allowfullscreen="true"></iframe></div>',
'<a href=\"http://www.ichiase.biz/\" title=\"iChiaSe.Biz - Blog chia sẻ kiến thức Lập trình web\" target=\"_blank\"><img height=\"300\" src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUr9uZAEZbQkZ8HUhUJBmS_xO8uQL5VJunLCq99CLOz9AZlh0XiuUgcF4bjcwdwoBRXG0NuMWpFjN3VL1cCqDbv4YxwnEeOEtPt6O6sfOkRwZbQusRkP4ENdFHb2k-vOzyzRsiWNR4DERJ/s1600/dich-vu-thiet-ke-web-gia-re.png\" width=\"100%\" /></a><embed loop="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" src="http://nhacdj.vn/skin/djtuoigiv4/plugin/jwplayer/player.swf" ' + _mode + ' flashvars="&file=http://nhacdj.vn/zippy/' + a[1] + '.zippyshare.com/v/' + a[5] + '/file.html.m4a&time=1&image=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoyca7_KbKqUiP0qXKZz6bwNUKg_-RkwbvUu96Montemx2bOuXgmhfzXrU-yJOsV6oSQJbqOePvZCpF8rcO3cZ7RZQsuF5R_Nnczw0hd0vAur4hXrOxUAUxtnQaaWtTTV1uNwwFjn5rY5j/s1600/logo.png&screencolor=000000&volume=100&replay=true&screencolor=000000&skin=http://nhacdj.vn/skin/djtuoigiv4/plugin/jwplayer/skins/vi/vi.xml&volume=100&autostart=true&repeat=always&controlbar.position=bottom" width="100%"/><br/><br/><center><a class="botton-ichiase" href="chia s\u1EBB" onclick=" window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;" title="Click chia se Facobook"><div class="sprites icons16 btn_like"></div>Chia sẻ lên Facebook</a><a class="botton-ichiase-dow" href="http://' + a[1] + '.zippyshare.com/v/' + a[5] + '/file.html" target="_blank" title="Click t\u1EDBi trang download"><div class="sprites icons16 btn_download"></div>Tải nhạc 320 Kbps</a><a class="botton-ichiase" href="#fb-root" title="Click t\u1EDBi b\xECnh lu\u1EADn"><div class="sprites icons16 btn_zoom"></div>B\xECnh lu\u1EADn</a><a class="botton-ichiase-tai" href="ymsgr:sendIM?tuantulap10a5&m=Xin ch\xE0o ADMIN!" title="Click b\xE1o l\u1ED7i"><div class="sprites icons16 btn_closeads"></div>B\xE1o l\u1ED7i</a></center>',
'<embed width="545"'+m_w+'" height="60" autostart="true" '+_mode+' flashvars="xmlPath=http://nhacso.net/flash/song/xnl/1/id/'+a+"&adsLink=&colorAux=0xff4a4a&colorMain=0xeffcfc&colorBorder=0x078939&typePlayer=single&mAuto="+au+'" src="http://st.nhacso.net/flash/v61/embedPlaylistjs.swf"/>',
'<embed width="'+m_w+'" height="127" flashvars="playlistfile=http://hn.nhac.vui.vn/asx2.php%3Ftype%3D1%26id%3D'+
a+"&frontcolor=1717f7&lightcolor=ff4a4a&screencolor=000000&bufferlength=10&volume=100&playlist=bottom&playlistsize=60&autostart="+au+'&repeat=always&controlbar=bottom&dock=false&plugins=http://hn.nhac.vui.vn/upload/players/spectrumvisualizer-1.swf&spectrumvisualizer.effect=reflection" src="http://hn.nhac.vui.vn/upload/nhacvui-player.swf"/>',
'<embed width="'+m_w+'" height="25" '+_mode+' flashvars="&autostart='+au+'" src="http://musik.soha.vn/share/k14/track/'+
a+'" />',"<embed "+_mode+' flashvars="&file='+a+"&image=https://lh4.googleusercontent.com/-9pzLDjXY4Lo/UTCdPCaHSFI/AAAAAAAAAJc/pHeYX1mISUs/h38/hieuw0n.tk.png&autostart="+au+'&repeat=always" src="http://dj.tuoigi.com/bay/Js/Player/player.swf" height="355" width="545"'+m_w+'" ></embed>',
'<iframe width="100%"'+m_w+'" height="390" src="https://www.youtube.com/embed/'+a[6]+'" frameborder="0" allowfullscreen></iframe>']};
//]]></script>
<script>
var z = { width: "720px", id1: "Blog1", id2: "bomkhung_pl", auto: "true", };
ANCMusic.call(z);
M.p(M.r());
</script>
<!-- Player -->
Bước 2. Rất đơn giản các bạn thêm đoạn code sau vào phần nào các bạn muốn nó hiển thị(Các bạn tự search Google nhé )<b:if cond='data:blog.pageType == "item"'>
<!-- 320 player --><div id='bomkhung_pl'>
</div><!-- end320 player -->
<div id='track-list'>
<!-- 320 button -->
<!-- end320 button -->
<div class='center '><a class='text-warning' href='#' target='_blank' title='Album Nhạc Sàn Đám Cưới'>Album nhạc sàn dành cho đám cưới</a></div>
<div class='center'><a class='text text-success' href='#' style='font-size: 13px;font-weight:bold;' target='_blank' title='Hướng dẫn sửa lỗi bật ra khung download khi nghe nhạc'>Hướng dẫn sửa lỗi bật ra khung download khi nghe nhạc</a></div>
<div class='largeshow addthis_toolbox addthis_default_style'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</div>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5216f78f348f6577' type='text/javascript'/>
<div class='seperator-line1'>
</div>
<div class='seperator-line2'>
</div>
<p><b>Thông tin bài hát:</b></p>
<div class='rows4' id='track-list-content'>
<data:post.body/>
</div>
<div class='clear'>
<!-- ########################### Comment-->
<div class='context-box'>
<!-- End Comment Box -->
</div> <!-- End Content Box Comment -->
<script>$(document).ready(function(){article.getcomment(82947,0,null,1);$('#cmitem').slimScroll({height: 'auto',railVisible: true,wheelStep : 5,railColor: '#444',color: '#777'});});
$('#sendpcomment').click(function(e){article.replycm(82947,0,'txtComment',null,1);})</script>
<div class='seperator-line1'/>
<div class='seperator-line2'/>
<div id='facebook-comment'>
<div class='cmt-box-title'>- Bình luận bằng tài khoản Facebook</div>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments expr:href='data:post.url' num_posts='10' style='' width='720'/>
</div>
</div>
</div>
</b:if>
Bước 3. Thêm đoạn CSS này vào trên thẻ </head><style>
/*botton*/
.botton-ichiase {margin: 2px;}
.botton-ichiase a:hover{color:#333 !important}
.botton-ichiase {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.botton-ichiase-dow {margin: 2px;}
.botton-ichiase-dow {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.botton-ichiase-tai {margin: 2px;}
.botton-ichiase-tai {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
border-color: #bd362f #bd362f #802420;
border: 1px solid #cccccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
</style>
Còn đây là Demo của mình !
Sever ZippyShare[id]http://www42.zippyshare.com/v/zbJMOIK3/file.html[/id]
[id]https://youtu.be/_q3SBT_ucSI[/id]
Chúc các bạn thành công !
