[新]扩展音乐播放器[教学+解剖]

[Blogskin]【此贴只供参考 谢谢！TT】

以下是解释，其实大概都可以改的哦，随个人而定。

#如果要循环播放，请各在Autoplay=1的后面 加入"&loop=1"。
形成：&autoplay=1&loop=1&
-------------------------------------------------------------------

#cornerplayer [音乐播放器Intro开头的字]
{z-index:999;
border:0px dashed #fcfcfc[框框的厚度,类型,颜色]/可以用框框改变让外观更漂亮特别;
background:#585858;[这是我另外加下去的，背景颜色]
width:45px;[宽度]
height:45px;[高度]
-moz-border-radius: 35px;[形状]
border-radius: 50px;[50是圆形/=弧度]
position:fixed;
overflow:hidden;
top:15px;[离上面有多远]/可以改去bottom
right:15px;[离右边有多远]/可以改去left
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornericon
{margin-top:10px;[图片在里面，离上面有多远]
margin-bottom:20px;[图片在里面，离下面有多远]
margin-left:1px;[图片在里面，离左边有多远]
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornerplayer:hover
{width:80px;[扩展后的宽度]
height:80px;[扩展后的高度]
-moz-border-radius:0px;[扩展后的形状]
border-radius:50px;}
#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:4px;}
</style>
<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://33.media.tumblr.com/tumblr_mbij24cSqo1qid2nw.gif[要显示的图片网址]"/></div>
<div><object width="60" height="25">[播放按钮的宽/高]<param name="movie" value="http://www.youtube.com/v/HkALH_c7GZc[Youtube播放页的网址]?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=FFE5E4[播放按钮的颜色/不需要加入‘#’]&amp;color2=fcfcfc[播放按钮的颜色]" /><param name="allowFullScreen" value="false" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/HkALH_c7GZc[Youtube播放页的网址]?version=2&autoplay=1&hl=en_US&color1=fcfcfc[播放按钮的颜色]&color2=fcfcfc[播放按钮的颜色]" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="60" height="25"[播放按钮的宽/高]></embed></object></div>

</center> </div><!--cornerplayer-->[播放器代码相关结束]



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

Highlight,复制(Ctrl+C)框内的代码。↓

模板 > 修改模板HTML。

键盘寻找(Ctrl+F)，“</style>”。

在“</style>”的下面，把框内的代码paste(Ctrl+V)进去。

预览，没问题の话，“保存模板”。

 

第I款:
这款是典型的，基本是无框白背景
-位置右下角

<style>
#cornerplayer
{z-index:999;
border:0px double #ccc;width:50px;
height:50px;
border-radius:50px 0px 0px 0px;
-moz-border-radius:50px 0px 0px 0px;
position:fixed;
overflow:hidden;
bottom:0px;
right:0px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornericon
{margin-top:25px;
margin-bottom:20px;
margin-left:-5px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornerplayer:hover
{width:200px;
height:100px;
-moz-border-radius:0px;
border-radius:0px;}
#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:4px;}
</style>


<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://media.tumblr.com/tumblr_m7w0seu08Y1r6o8v2.gif"/></div>
<div><object width="60" height="25"><param name="movie" value="http://www.youtube.com/v/背后字样?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=FFFFFF&amp;color2=FFFFFF" /><param name="allowFullScreen" value="false" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/背后字样?version=2&autoplay=1&hl=en_US&color1=FFFFFF&color2=FFFFFF" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="60" height="25"></embed></object></div>
   
</center> </div><!--cornerplayer-->

第II款:

哈尔的移动城堡中的卡西法

- 居住在圆形里面的概念
-歌曲也是“哈尔移动城堡的歌”/这是适合我另个blog的主题才制作的哦

扩展后:

<style>
#cornerplayer
{z-index:999;
border:0px dashed #fcfcfc;width:45px;
background:#585858;
height:45px;
-moz-border-radius: 35px;
border-radius: 50px;
position:fixed;
overflow:hidden;
top:15px;
right:15px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornericon
{margin-top:10px;
margin-bottom:20px;
margin-left:1px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;}
#cornerplayer:hover
{width:80px;
height:80px;
-moz-border-radius:0px;
border-radius:50px;}
#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:4px;}
</style>
<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://33.media.tumblr.com/tumblr_mbij24cSqo1qid2nw.gif"/></div>
<div><object width="60" height="25"><param name="movie" value="http://www.youtube.com/v/HkALH_c7GZc?version=2&amp;autoplay=1&amp;hl=en_US&amp;color1=FFE5E4&amp;color2=fcfcfc" /><param name="allowFullScreen" value="false" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/HkALH_c7GZc?version=2&autoplay=1&hl=en_US&color1=fcfcfc&color2=fcfcfc" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="60" height="25"></embed></object></div>
</center> </div><!--cornerplayer-->