教程 | 下滑式 YouTube 播放器

- Tutorial requested by Vanessa -

就是这一类的 YouTube 播放器噜 ^-^

1. 设计 → Edit HTML

2. 按 Ctrl + F 寻找代码 ]]></b:skin>

3. 在 ]]></b:skin> 上面添加以下代码：

#youtube {

border-radius: 8px;

margin-bottom: 8px;

width: 210px;

text-align: center;

font-size: 10px;

background: #fff;

border: 1px solid #eee;

}

#player {

position:fixed;

left: 20px;

top:-70px;

text-align: center;

-webkit-transition: all .5s ease-in-out;

-moz-transition: all .5s ease-in-out;

-o-transition: all .5s ease-in-out;

z-index:999;

}

#player:hover {

top:8px;

}

4. 按保存后，到 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

5. 添加以下代码：

<div id="player">
<div id="youtube">
<div style="border:1px solid #eee; width:210px;height:65px;overflow:auto; ">
<center><br /> // Can't Hurt - Yisa <br />
<object width="160" height="25"><param name="movie" value="YouTube代码?fs=1&amp;autoplay=0&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="YouTube代码?fs=0&amp;autoplay=1&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="160" height="25"></embed></object>
</center></div></div>
<img src="图片 url"/></div>

6. 保存即可。

小解释
紫色代码：可选择删除或留下，写你想要写的话 / 歌名也可以
红色代码：YouTube 的代码（如何获得 YouTube 代码：点我）
蓝色代码：Click Here 的图片（可更改）

* 附注图片两张

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/clickhere-1.gif

http://i1198.photobucket.com/albums/aa448/shehjing/blogger%20material/clickhere1.gif