<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d2369078377165236643\x26blogName\x3dMali+//+\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://baby-cici.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://baby-cici.blogspot.com/\x26vt\x3d4622623652247836756', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>
Follow Me
bloggie facebook instagram
我要尽情享受人生

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**
 红色的字 -- 音乐器的位置
 橙色的字 -- 音乐器的高度
 黄色的字 -- 音乐器的宽度
 浅蓝的字 -- 外框的厚度
 浅紫的字 -- 框框的种类
 粉色的字 -- 框框的颜色
 青色的字 -- 背景的颜色
 深蓝的字 -- 框框的外形
框框的形状代码如下:
A
B
C
D
D
E









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&amp;autoplay=1&amp;hl=en_US&amp;color1=0xFFFFFF&amp;color2=0xffffff" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/so6ExplQlaY?fs&autoplay=1&amp;hl=en_US&amp;color1=0xE84976&amp;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 (死要脸