可爱扩展式播放器

      -->     

这个就是在鼠标指向过后会扩展开来的，是个蛮可爱的播放器 XD

先到设计 --> 修改 Html --> Ctrl + F 寻找【]]></b:skin>】

然后就在【]]></b:skin>】的上面添加以下的代码
#music{
position:fixed !important;
right:30px; padding-top:12px;
top:25px;
padding-bottom:12px;
text-align:center;
height:15px;
width:35px;
overflow:hidden;
border:2px dashed #ffd6d6;
-moz-border-radius: 17px 17px 17px 17px;border-radius:17px 17px 17px 17px;-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
background: #fff;
z-index:999;
}
#music:hover{
border:1px dashed #ffd6d6;
padding:5px;
height:75px;
width:200px;
-moz-border-radius: 0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}
注：那个【#music:hover{】后面的代码都是鼠标指向音乐器后的效果哦

温馨小提示❤
❤ 红色的字 --> 音乐器的位置
❤ 橙色的字 --> 音乐器的高度
❤ 黄色的字 --> 音乐器的宽度
❤ 浅蓝的字 --> 外框的厚度
❤ 浅紫的字 --> 框框的种类
❤ 粉色的字 --> 框框的颜色
❤ 青色的字 --> 背景的颜色
❤ 深蓝的字 --> 框框的外形

框框的种类可根据下图显示所选择：

框框的外形可根据下图显示所选择：


A 形状的代码：
-moz-border-radius-bottomright: 50px;
 border-bottom-right-radius: 50px;
B 形状的代码：
-moz-border-radius-bottomright: 50px 25px;
 border-bottom-right-radius: 50px 25px;
C 形状的代码：
-moz-border-radius-bottomright: 25px 50px;
 border-bottom-right-radius: 25px 50px;
D 形状的代码：
-moz-border-radius: 1em 4em 1em 4em;
 border-radius: 1em 4em 1em 4em;
E 形状的代码：
-moz-border-radius: 25px 10px / 10px 25px;
 border-radius: 25px 10px / 10px 25px;
F 形状的代码：
-moz-border-radius: 35px;
 border-radius: 35px;
好了就保存起来

再去设计 --> 添加小工具 --> Html / Jave Script 把以下的代码放下去
<div id="music">
要显示的字 Or 表情<br /><br />
<center><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="音乐代码?&amp;hl=en_GB&amp;color1=FFFFFF&amp;color2=0xFFFFFFrel=0&FFFFFF;&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></center>要显示的字</div>
温馨小提示❤
❤ 粉色的字 --> 就像下图显示的一样，中间那个表情就是要显示的字
❤ 红色的字 --> Youtube 视频的代码
❤ 紫色的字 --> 这些都是播放器的代码，你也可以把它们全都删除然后放你的音乐播放器的代码下去或者添加任何的东西 (我这个代码是 Youtube 播放器的哦)
❤ 青色的字 --> 播放器的颜色
❤ 橙色的字 --> 在播放器下显示的字，像下图显示的【Now Playing❤ Beast - Fiction】

如果想要使用这个 Youtube 播放器的话请到【点我】寻找你要找的歌

选择好你的歌后请点击视频下面的【Share】

然后再跟着下图的步骤去做


那个 4 号框框显示的就是你的 Youtube 的代码哦

记得一 Highlight 完就马上点击右键选择【Copy】，这样才 Copy 的到代码啊

好了就保存起来就好了

这篇转载于 ❤ Baby Cici ❤，再由本博主改版成 Blog Templete，请勿随意转载，谢谢
❤

38 条评论:

  1. 吡愛珉宇2012年4月25日 10:00

    成功 ^^ 謝謝 : )

    回复删除
  2. 吡愛珉宇2012年4月25日 10:04

    想問你 ., 可以拿你的代碼麼 ? ><

    回复删除
  3. Dannie ヾ(o◕∀◕)ﾉヾ2012年4月25日 16:35

    吡愛珉宇：

    可以哦，不过记得贴上Logo，因为改过代码 ^^

    回复删除
  4. 吡愛珉宇2012年4月25日 20:28

    怎麼說LOGO ?? 要寫上你的名 ?

    回复删除
  5. itzelchien2012年4月25日 22:16

    为什么我不能><试过很多次了～

    回复删除
    回复
    1. Loong @ Huii2012年6月24日 15:31

      那個 “ 要顯示的字 or 表情 ”
      怎麼放表情啊
      我放 Direct link、它還真寫一大串亂碼 ><
      教教我 :'(

      删除
  6. Dannie ヾ(o◕∀◕)ﾉヾ2012年4月26日 06:37

    吡愛珉宇：

    你是说你要转载？

    Itzel blog：

    是怎么说不能呢？

    回复删除
  7. 吡愛珉宇2012年4月26日 10:27

    算轉 ., 我只要拿代碼就好了 ., 可以麼 ?

    回复删除
  8. Dannie ヾ(o◕∀◕)ﾉヾ2012年4月26日 14:24

    吡愛珉宇：

    记得贴上原博主的 Logo

    回复删除
  9. 吡愛珉宇2012年4月26日 18:38

    好的 : )

    回复删除
  10. C.A2012年5月2日 17:37

    谢谢你!!成功了!!XD

    回复删除
  11. ♔ Miss J. ♔2012年6月20日 17:58

    博主，我弄了两次都不成功

    回复删除
  12. Dannie ヾ(o◕∀◕)ﾉヾ2012年6月20日 18:05

    ♔ Queen.Life ♔：

    请问是哪里不成功呢 ??

    回复删除
  13. ♔ Miss J. ♔2012年6月21日 20:17

    我照着方法去做了，可是就是不会变成扩展式

    回复删除
  14. Dannie ヾ(o◕∀◕)ﾉヾ2012年6月21日 21:43

    ♔ Queen.Life ♔：

    怎么会这样呢，其他人都成功了啊

    回复删除
  15. ♔ Miss J. ♔2012年6月24日 00:41

    不清楚啊..到目前为止试了很多次了
    真的要博主帮帮忙 >.<

    回复删除
  16. Dannie ヾ(o◕∀◕)ﾉヾ2012年6月24日 11:40

    ♔ Queen.Life ♔：

    Okay，我能帮你 :)

    加我面子书，在那里给我你的hotmail 和 密码 > <

    回复删除
  17. ♔ Miss J. ♔2012年6月24日 15:58

    加你了

    回复删除
  18. Dannie ヾ(o◕∀◕)ﾉヾ2012年6月24日 20:27

    请问一下你是什么名字啊 > <

    回复删除
  19. ♔ Miss J. ♔2012年6月25日 18:14

    Jane Tang

    回复删除
  20. ♔ Miss J. ♔2012年6月25日 19:10

    Jane Tang

    回复删除
  21. ♔ Miss J. ♔2012年6月26日 20:42

    Jane Tang

    回复删除
  22. Lii Min2012年7月7日 17:38

    偷走了 :]

    回复删除
  23. I'm Selemon2012年7月30日 21:06

    我不成功 /.\ 他不放歌

    回复删除
  24. Dannie ヾ(o◕∀◕)ﾉヾ2012年8月3日 12:40

    I'm Selemon：

    那样就是里面的那个播放器的问题了 :)

    回复删除
  25. ๑P.K๑2012年8月12日 01:46

    嗯..怎么会出现 (Video player too small) 的呢.?

    回复删除
    回复
    1. Dannie ヾ(o◕∀◕)ﾉヾ2012年10月19日 20:20

      那个就是 Youtube 的问题了哦

      如果还是不可以的话就更换播放器嗯

      删除
  26. jackcline2012年10月18日 14:05

    为什么不会播的？

    回复删除
    回复
    1. Dannie ヾ(o◕∀◕)ﾉヾ2012年10月19日 20:18

      如果不可以播的话就尝试更换别的播放器啊 =D

      删除
  27. Unknown2012年11月4日 16:49

    终于弄到了 :) 很可爱 ^___^
    I'm Ms. Jie YinG :D

    回复删除
  28. 匿名2012年11月12日 18:01

    弄到了
    但是只是可以放1首歌ba le 吗?

    回复删除
  29. Jenny Sia2013年1月5日 15:36

    怎么加不到进小工具里?:(

    回复删除
    回复
    1. Dannie ヾ(o◕∀◕)ﾉヾ2013年1月7日 16:25

      加不到？
      是说 Copy 不到吗？
      Ctrl + C Copy 代码 =D

      删除
  30. Jenny Sia2013年2月20日 23:34

    那个四号框框...highlight之后copy去哪里???

    回复删除

留言规则 请勿犯规 :)

--------------------------------------------------------------------------------

1、由于评论太哆，有些我不能一一评论

2、如有捣乱着，恕我删除留言

3、有些博友要的教程，请勿再三询问，请到教程列表里仔细寻找

谢谢 :)

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*