昨天閑著無聊，就給自己的電腦裝了一個Ghost的博客，打開博客的第一眼就被震撼到了，我們可以發(fā)現(xiàn)界面十分的簡介。。。。上面的都是廢話
我們來看一看我我選擇的音樂播放器——網(wǎng)易云音樂，這個播放器就是在一個歌曲上點(diǎn)開之后有一個生成外鏈播放器的按鈕，然后讓我們看一看模板長個什么樣子

手機(jī)版

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=32"></iframe>

電腦版

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=66"></iframe>

這里我們可以調(diào)整auto的參數(shù)0\1來調(diào)整是否自動播放，通過調(diào)整iframe的width來對當(dāng)前窗口的大小進(jìn)行調(diào)整這里推薦200， 我們可以發(fā)現(xiàn)


通過Chrome我們可以發(fā)現(xiàn)其中Navbar的寬度為240其中下面的按鈕的寬度是200那么我們也設(shè)置成200就行了，然后我們打開

然后在頁腳的位置加入以下的代碼
example:

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script>$(document).ready(function(){var isOnPc=!(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent));if(!isOnPc){$(".nav ul:first").append('<iframe id="music-if" frameborder="no" border="0" marginwidth="0" marginheight="0" width='+200+' height=52 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=32"></iframe>');$("#music-if").css("margin-top", "0px");$("#music-if").css("margin-bottom", "0px");$("#music-if").css("position", "fixed");$("#music-if").css("bottom", "80px");$("#music-if").css("z-index", "10000000");}else{$(".nav ul:first").append('<iframe id="music-if" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=86 src="http://music.163.com/outchain/player?type=2&id=103035&auto=1&height=66"></iframe>');$("#music-if").css("margin-top", "0px");$("#music-if").css("margin-bottom", "0px");$("#music-if").css("position", "fixed");$("#music-if").css("bottom", "80px");$("#music-if").css("z-index", "10000000");}});
</script>

當(dāng)然你可以將.append()中的內(nèi)容替換成你自己生成的播放器，同時記得將寬度調(diào)整為220或者新建一個div然后把這個div的寬度設(shè)置為200px就行了

轉(zhuǎn)載于:https://www.cnblogs.com/JeremyGJY/p/5921589.html

總結(jié)

以上是生活随笔為你收集整理的【Ghost Blog】如何给Ghost Blog添加背景音乐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。