Hướng dẫn thêm AncPlayer vào Blogger

Hung.Pro.VN

Developer Windows

20/08/2015
Views

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&amp;songID=0&amp;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/AVvXsEgXhbQj492vT6QyBrjiWYzPi5u6DIvLl-E2PCE8AkVDrhriRCVMOiiEmpIKcp5ElKij7VUKgtx7OUqd6Tg0JQttf9JQhmAHE6BvTQqVCmzDysOfF2cX0JbphzrI1GAHLLABFqZLyqfyHRew/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="&amp;file=http://nhacdj.vn/zippy/' + a[1] + '.zippyshare.com/v/' + a[5] + '/file.html.m4a&time=1&amp;image=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNSwXO-2ImitA0RQ1s6Qc8cBI2q7clm2kAhyphenhyphena6Kd_m_GdLUeKDLbxZuCFVbgU_hc07kx0pv1k-kivXpTM2v38osPcHL6JxCNXIqUmWBv-FF1GnAc712Z0q7BYeLmRF0dVxlGsm1siR_pMy/s1600/logo.png&amp;screencolor=000000&amp;volume=100&amp;replay=true&amp;screencolor=000000&amp;skin=http://nhacdj.vn/skin/djtuoigiv4/plugin/jwplayer/skins/vi/vi.xml&amp;volume=100&autostart=true&repeat=always&amp;controlbar.position=bottom" width="100%"/><br/><br/><center><a class="botton-ichiase" href="chia s\u1EBB" onclick="     window.open(       &#39;https://www.facebook.com/sharer/sharer.php?u=&#39;+encodeURIComponent(location.href),        &#39;facebook-share-dialog&#39;,        &#39;width=626,height=436&#39;);      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&amp;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+"&amp;adsLink=&amp;colorAux=0xff4a4a&amp;colorMain=0xeffcfc&amp;colorBorder=0x078939&amp;typePlayer=single&amp;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+"&amp;frontcolor=1717f7&amp;lightcolor=ff4a4a&amp;screencolor=000000&amp;bufferlength=10&amp;volume=100&amp;playlist=bottom&amp;playlistsize=60&amp;autostart="+au+'&amp;repeat=always&amp;controlbar=bottom&amp;dock=false&amp;plugins=http://hn.nhac.vui.vn/upload/players/spectrumvisualizer-1.swf&amp;spectrumvisualizer.effect=reflection" src="http://hn.nhac.vui.vn/upload/nhacvui-player.swf"/>',
'<embed width="'+m_w+'" height="25" '+_mode+' flashvars="&amp;autostart='+au+'" src="http://musik.soha.vn/share/k14/track/'+
a+'" />',"<embed "+_mode+' flashvars="&amp;file='+a+"&amp;image=https://lh4.googleusercontent.com/-9pzLDjXY4Lo/UTCdPCaHSFI/AAAAAAAAAJc/pHeYX1mISUs/h38/hieuw0n.tk.png&amp;autostart="+au+'&amp;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 == &quot;item&quot;'>
<!-- 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);$(&#39;#cmitem&#39;).slimScroll({height: &#39;auto&#39;,railVisible: true,wheelStep : 5,railColor: &#39;#444&#39;,color: &#39;#777&#39;});});
$(&#39;#sendpcomment&#39;).click(function(e){article.replycm(82947,0,&#39;txtComment&#39;,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=&#39;#ffffffff&#39;, endColorstr=&#39;#ffe6e6e6&#39;, 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=&#39;#ffffffff&#39;, endColorstr=&#39;#ffe6e6e6&#39;, 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=&#39;#ffffffff&#39;, endColorstr=&#39;#ffe6e6e6&#39;, 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 !

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Nhận xét

Suối nguồn cuộc sốnglúc 22:32 24 tháng 8, 2015
Cái này thêm tập 1, tập 2 như mấy trang phim được không Bờm?
Trả lờiXóa
Trả lời
Văn Hùnglúc 04:21 26 tháng 8, 2015
Hình như không nam ạ. B cũng chưa tìm hiểu kỷ lắm
Trả lờiXóa
Trả lời
Thiên Hoànglúc 21:32 28 tháng 8, 2015
Cảm ơn ad đã chia sẻ bài viết, rất nhiều thông tin hữu ích
Thiên Hoàng – Nhân viên Marketing
------------------------------------------------
Dịch vụ quay phim phóng sự cưới
Dich vu quay phim phong su cuoi
Trả lờiXóa
Trả lời
Huệ Lêlúc 04:31 29 tháng 11, 2015
Rat huu it dung k
Trả lờiXóa
Trả lời

Thêm nhận xét

Save on Premium Membership

Hướng dẫn thêm AncPlayer vào Blogger

Related post

Hung.Pro.VN

Nhận xét

Đăng nhận xét

Share this article