博客園美化終章

時間 2019-11-13

標籤博客美化简体版

原文原文鏈接

博客園美化終章

美化教程其實不少的，不過本身一個一個弄的話仍是多多少少會花很多時間，直接用我給的這套設置仍是很不錯的。導航欄部分能夠自行修改便可javascript

$navList.cnblogsNav('addNav', 4, '本身改爲本身想要的導航', '本身分類的url');

音樂部分我外鏈的音樂，要增長音樂，添加這樣的語句塊就能夠了，圖片和音樂都是能夠外鏈的。php

{
            title: '盜將行',
            author: '花粥',
            url: 'http://www.ytmp3.cn/down/48303.mp3',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic2.png'
        }

點擊出現的內容本身更改添加這個數組裏面的內容就能夠了css

var a = new Array("關注","點贊","分享");

在pc端點贊部分給弄成了懸浮在下面，無論看到哪裏都會始終在下面，不過對於手機端就有bug了，點贊部分直接就沒有了。不過對我來說沒什麼影響。html

不喜歡這樣弄的刪掉下面這部分便可前端

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

個人設置內容以下

主題

BuildtoWinjava

頁面定製css代碼

.postTitle2:hover{
margin-left:40px;
}
/* 定製公告欄音樂插件的樣式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音樂插件字體*/
    margin: 0px;  /*音樂插件與公告欄左邊的邊距，0px就是直接抵到公告欄左邊的邊上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

博客側邊欄公告jquery

<!-- 爲博客底部添加音樂組件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自動播放 -->
    showlrc: false,
    theme: '#F5F5F5',      <!-- 插件背景顏色，建議和你的公告欄背景色同樣，這樣融爲一體的感受 -->
    music: [{
            title: '東京不太熱',
            author: '洛天依',
            url: 'http://www.ytmp3.cn/down/37520.mp3',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic4.png'
        },
        {
            title: '富士山下',
            author: '陳奕迅',
            url: 'http://www.ytmp3.cn/down/44428.mp3',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
        },
        {
            title: '盜將行',
            author: '花粥',
            url: 'http://www.ytmp3.cn/down/48303.mp3',
            pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic2.png'
        }
    ]
});
ap.init();
</script>

頁首html代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.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-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/kousak/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/kousak/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

頁腳html代碼

<script type="text/javascript" color="255,255,255" opacity='0.7' zIndex="-2" count="150" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

<script>
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("關注","點贊","分享");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<script src="//blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>
<script>
    $(function() {
        var $navList = $('#navList');
        $navList.cnblogsNav('addNav', 4, 'php', '//www.cnblogs.com/chenguosong/category/1542009.html');
        $navList.cnblogsNav('addNav', 4, '前端', '//cnblogs.com/chenguosong/category/1446770.html');
 　　$navList.cnblogsNav('addNav', 5, '黑客', '//www.cnblogs.com/chenguosong/category/1551092.html');
        $navList.cnblogsNav('removeNav', 2);    
    });
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。