玛丽笔记 ❤

Follow Me

bloggie facebook instagram

HOME キ Disclaimer ツ Tutorial サ Links ス Archive

我要尽情享受人生

Officially design by Cici 2011 .
I wont be crediting anyone :)

Instagram

Hover music box 扩展式播放器

Saturday, April 21, 201211:22 AM ❤(2 notes[s] )

如果要传载教程记得注明我的部落格

不然我就TAKE YOU AS COPY CAT 再让你名臭

大家一直问我，我的那个Music Box怎样弄

Good news ：我现在就教 xD

Step 1

FOR BLOG TEMPLATE 你们都用的先到设计 - 修改 Html - Ctrl + F 寻找【]]></b:skin>】然后就在【]]></b:skin>】的上面添加以下的代码

FOR BLOG SKIN
在</b:skin> 上面拷贝这个上去 * 如果没有bskin 就在上面的随便一个code下面

#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;}

NOTE**

红色的字 -- 音乐器的位置
橙色的字 -- 音乐器的高度
黄色的字 -- 音乐器的宽度
浅蓝的字 -- 外框的厚度
浅紫的字 -- 框框的种类
粉色的字 -- 框框的颜色

青色的字 -- 背景的颜色
深蓝的字 -- 框框的外形

框框的形状代码如下：

Example A

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

Example B

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

Example C

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

Example D

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

Example E

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

Example F

-moz-border-radius: 35px;

border-radius: 35px;

先preview看看有没有问题再保存，然后就去下一步

Step2
FOR BLOG TEMPLATE 你们都用的设计 - 添加小工具 - Html / Jave Script 把以下的代码放下去

FOR BLOG SKIN
接着 : 在 <body> 下面Paste以下的代码

<div id="music">

●_⌒

<br><br>

<center>

<center><object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/so6ExplQlaY?fs&autoplay=1&hl=en_US&color1=0xFFFFFF&color2=0xffffff" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/so6ExplQlaY?fs&autoplay=1&hl=en_US&color1=0xE84976&color2=0x2752D0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object></center>

<br>

要显示的字

</center>

</div>

NOTE**
红色的字 -- Youtube 音乐器可以放自己的（MP3也可以自己改）
橙色的字 -- 要显示的字
浅紫的字 -- Youtube的音乐代码
深蓝的字 -- 颜色代码

PREVIEW 看有没有 :D 有的话就 SAVE ><

祝你们成功 >< ! 成功记得感谢还有Follow (死要脸