在部落格放可爱扩展式播放器

這可爱扩展式播放器真的很可愛喲 xD 按了他就會出現整體 ., : )

這教學有人問我怎麼弄了 ., 現在很閒空 ., 就放教學吧 : )

給Lesley & Mis Han

當然 ., 你們也可以試喔 : ) 

 

指向他就會出現紅色寬寬  

 

登入你的Blogger >>設計>>Edit HTML

找 ]]></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 形状的代码：

-oz-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: 25px 10px / 10px 25px; 
border-radius: 25px 10px / 10px 25px; 

看看有沒有問題 ., 沒問題就按保全 .,

還沒好喔 .,  

按設計>>添加小工具>>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 播放器的)
 

青色的字 - 播放器的颜色
 

橙色的字 - 在播放器下显示的字 ., 像我寫【I LOVE SONG】

如果想要使用这个 Youtube 播放器的话去www.youtube.com寻找你要找的歌

选择好你的歌后看视频下面的”Share”

跟著圖片走

 

第4就是你音樂的代碼

提示 ::

Highlight了按Ctrl + C同時按 ., 因為可能copy不到你的代碼 C:

好了就按保存 ,.

看有沒有成功 ^3^ 有問題的話 ., 就留言和我說 : )

這是從韓兒那裡轉的 ., 我只是拿了他的代碼 : )

這也是BABY CICI的教程 : )

          

轉請貼上博主部落格!!

謝謝合作 : )