博客園博客排版（js樣式實例）

時間 2019-11-19

原文原文鏈接

昨天在博客園中看到一位大神發的博客園樣式排版博客，我一看。媽呀，太漂亮了，二話不說趕快學起，昨天我花了一天的時間，終於把個人博客也弄得有一丟丟像樣了，有好東西，固然要分享給各位；javascript

大神的連接：http://www.javashuo.com/article/p-vjbdtdwx-ew.html，裏面講的很細很細，每個功能的講解都有。css

你們若是想仔細研究每個功能的實現就看一下大神的博客，想省事就看個人，簡單，快捷，省事。固然我在他的基礎上加了一些功能 如：背景音樂，背景圖片，電子時間，鼠標點擊特效等等

效果圖以下：你們也能夠訪問我博客主頁查看

博客排版

1.找到你博客的設置，位置如圖

2.首先你得申請一下你博客園的js權限；

不申請，大家的js代碼是沒有用的，申請成功是這個樣子的html

3.找到頁面定製CSS代碼區域，勾選禁用默認CSS；

4.在裏面粘貼下面代碼css代碼；

View Code

5.找到‘’博客側邊欄公告（支持HTML代碼）（支持JS代碼）‘’，在裏面加入以下代碼；

View Code

6.找到「頁首Html代碼」，加入下面的代碼

View Code

7.找到「頁腳Html代碼」，加入下面的代碼

View Code

8.點擊保存，你的界面就將和我同樣；

定製本身的界面

1.背景圖片

在定製CSS代碼區域，找到以下代碼，將「https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp」位置的代碼更換爲你想更改的「背景圖片的地址」java

body {
color: #000;
background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
min-height: 101%;
}canvas

2.更換背景音樂

a.

在「博客側邊欄公告（支持HTML代碼）（支持JS代碼）」中找到以下代碼；微信

<embed src="//music.163.com/style/swf/widget.swf?sid=2307767639&type=0&auto=1&width=310&height=90" width="330" height="110"     allowNetworking="all"   hidden=ture></embed>

b.

進入網易雲官網，找到你想設置爲背景音樂的音樂，點擊"生成外鏈播放器"，假如是下面的這樣子，說明要收費網絡

c.

咱們選擇可以生成外鏈的歌曲，固然也能夠選多首一塊兒生成外鏈,就像這樣ide

d.點擊生成外鏈

咱們選擇flash插件的版本，粘貼HTML代碼，替換咱們找到的代碼。大功告成。ui

　　9.15號之後，網易雲音樂音樂也不予許設置外部連接。因此我又新弄了一個背景音樂以下：url

<video width="330" height="54" controls>
    <source src="https://music.163.com/song/media/outer/url?id=16607982.mp3" type="video/mp4">
</video>

3.替換右側頭像

a.

在「博客側邊欄公告（支持HTML代碼）（支持JS代碼）」中找到以下代碼；

<a href="https://www.cnblogs.com/clwydjgs/">
<img src="https://files.cnblogs.com/files/clwydjgs/touxiang.bmp">
</a>

b.

將」https://files.cnblogs.com/files/clwydjgs/touxiang.bmp「替換成你頭像的地址，將"https://www.cnblogs.com/clwydjgs/"替換爲你點擊頭像想要連接的地址；

4.更換打賞裏面的付款碼

a.

在」頁首Html代碼「區域找到以下代碼；

 <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
    <script>  
    new tctip({
      top: '20%',
      button: {
        id: 9,
        type: 'dashang',
      },
      list: [
       {
         type: 'alipay',
         qrImg: 'https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp'
       }, {
         type: 'wechat',
         qrImg: 'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'
       }
     ]
   }).init()
   </script>

b.

將本身的微信和支付寶的付款碼，保存到網絡上或者上傳到文件中，以下（點擊便可獲取圖片地址）

c.

將代碼中的」https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp「替換成你的支付寶付款碼圖片地址

　將'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'替換爲你微信的付款碼地址，大功告成

4.更換」置頂「圖片

a.

在頁面定製CSS代碼區中找到以下CSS代碼：

/*scroll to top*/
  #scrollTop div{
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:149px;
    margin:0;
    padding:0
 }
 #scrollTop .level-2{
   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
   display:none;
   height:250px;
   opacity:0;
   z-index:1
 }
 #scrollTop .level-3{
   background:none repeat scroll 0 0 transparent;
   cursor:pointer;
   display:block;
   height:150px;
   z-index:2
 }
 #scrollTop{   background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
   cursor:default;
   display:block;
   height:180px;
   overflow:hidden;
   position:fixed;
   right:0;
   top:90%;
   width:149px;
   z-index:11;
   margin:-125px 0 0;
   padding:0
 }

b.

跟換「http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png」和「http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png」爲你想替換的圖片的新地址

5.鼠標點擊特效

在頁首去加入下面代碼

View Code

鼠標點擊特效傳送門 http://www.javashuo.com/article/p-frcehfxq-cx.html

6.增長看板娘：

在博客側邊欄公告加入以下代碼：

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
  <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
      <div class="waifu" id="waifu">
          <div class="waifu-tips" style="opacity: 1;"></div>
          <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
          <div class="waifu-tool">
              <span class="fui-home"></span>
              <span class="fui-chat"></span>
             <span class="fui-eye"></span>
             <span class="fui-user"></span>
             <span class="fui-photo"></span>
             <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
         </div>
     </div>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
     <script type="text/javascript">initModel()</script>