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


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/AVvXsEgP-pHSOFnxXuKfbhnqNyczkhzzHbrPu7nBGpc7QoAjGxfQ0fxG6wMz78smEBtm9eVZEwztfIIuddDVY9F6CQ9mq1TtU40tctAfIF0yS_81nglpjkMuFQHR04rfz8ybyXaXiDmtf__Nq8ys/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/AVvXsEgE5-9MAFGct09TJ-8g3m7hE5Kdvh1OKx4tQmj1S5WfEgZzoFQyn6H49CcOvc7_VvVvejdIaEO_8nm2ly_yIvILAKjMGK-v6Gv2AC_l4Z241xp7gSfBGee76qhG5Stxr3to7Y27pI0z_m5r/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 !

Hướng dẫn bình luận

Mọi người để lại bình luận góp ý, nhận xét về những bài viết mà mình chia sẽ văn minh lịch sự hay kích động, Không spam, không chèn link quảng cáo, bán hàng, Không sử dụng từ ngữ thô tục, xúc phạm, kích động, Link chỉ được phép khi thực sự liên quan đến nội dung bài viết, Không mạo danh người khác hoặc sử dụng email giả, Bình luận vi phạm sẽ bị xóa không cần thông báo trước.
Mọi người lưu ý răng, nếu muốn chia sẽ code ở bình luần thì cần mã hóa code trước khi bỏ vào khung nhé. :)
⑴ Chèn ℂ𝕤𝕤 theo mẫu : [pre css] ℂ𝕤𝕤 [/pre]
⑵ Chèn ℍ𝕥𝕞𝕝 theo mẫu : [pre html] ℍ𝕥𝕞𝕝 [/pre]
⑶ Chèn 𝕁𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥 theo mẫu : [pre js] 𝕁𝕒𝕧𝕒𝕤𝕔𝕣𝕚𝕡𝕥 [/pre]
🖼️ Chèn 𝕀𝕞𝕒𝕘𝕖 theo mẫu : [img] 𝕃𝕚𝕟𝕜 𝕀𝕞𝕒𝕘𝕖 [/img]
🎞️ Chèn Video 𝕐𝕠𝕦𝕥𝕦𝕓𝕖 theo mẫu : [youtube] 𝕃𝕚𝕟𝕜 𝕪𝕠𝕦𝕥𝕦𝕓𝕖 [/youtube]

5 nhận xét:

  1. 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
  2. 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
    1. Suối nguồn cuộc sốnglúc 04:52 29 tháng 8, 2015

      Bạn hỏi chơi thôi. Mình cứ youtube mà nhúng chả cần mấy host khác :))

      Xóa
    2. Văn Hùnglúc 02:46 30 tháng 8, 2015

      hehe.Chuẩn cứ nhúng youtube thì thể loại nào cũng xem đc.

      Xóa
  3. Huệ Lêlúc 04:31 29 tháng 11, 2015

    Rat huu it dung k

    Trả lờiXóa

@Bloggers Community

iconVN Coding iconTruongDevs iconAnh Trai Nắng icon.Thinhem Blog iconChiều Cuối Năm iconTrick Pro Software iconDân tộc KING iconFood VN iconanh Hí blog iconTrực Blog's iconHung EVN Blog

@Catalogics

CSS (31) Google (7)

@Total Pageviews