wordpress侧边栏免插件音乐播放

2014年11月12日 WordPress 1 次吐槽 8108次浏览
博客主机

为了添加网站音乐播放,上网查找了一些方法,虽然受到页面切换影响,不过只要每次文章是新打开页面就没关系,尤其是免插件音乐播放。

虾米播播

效果图

1、点击进入http://www.xiami.com/widget

2、依次添加歌曲到虾米播播

3、添加完后,复制FLASH代码,设置完成

 

小工具在线音乐:引用hao123音乐播放器

效果图

1、新建一个文本小工具,加入如下代码

<div id="indexmusic">
<iframe scrolling="no" width="250" height="67" frameborder="0" src="http://play.baidu.com/player/hao123/index_new.html#top/dayhot" style="border-bottom: 1px solid #dfdfdf;"></iframe></div>

2、然后编辑主题style.css,加入如下代码

/*边栏在线音乐*/
#indexmusic{width:350px;overflow:hidden;height:68px;}
.outmusic{height:298px;position:absolute;}

3、为了好看加了个jquery特效,默认播放器不显示歌曲列表,当鼠标悬停在这个播放器上面时,下拉歌曲列表就会出现。把如下代码加入标签中,需要加载jq库才行。

<script type="text/javascript">
$(document).ready(function(){
$("#indexmusic").mouseover(function(){
$("iframe",this).addClass("outmusic");});
$("#indexmusic").mouseout(function(){
$("iframe",this).removeClass("outmusic");});
});
</script>

或者可以直接跳过JQ代码部分。

1 条留言  访客:1 条  博主:0 条

  1. 南極正值冬天卻化冰,北極正值夏天卻擴冰。他們是不是有什麼東西沒說的?

博客主机

给我留言