1. 程式人生 > >部落格園美化大集合2020最新!不用擔心失效問題!

部落格園美化大集合2020最新!不用擔心失效問題!

前言

不少人說我的部落格園佈置得好,今天就釋出一下我的部落格園美化。

最近更新:2020年3月13日

在這裡會有持續更新的內容,不必擔心外掛失效問題。

下面進入正文,希望對您有幫助。

樣板:

我的主部落格:https://www.cnblogs.com/laoguantongxiegogo/

我的附屬部落格:https://www.cnblogs.com/laoguantongxiegogofs/

部落格園美化準備

1.你要申請部落格。

2.申請js許可權(對管理員說點好話)

3.學會複製貼上。

部落格園美化外掛

每日圖片背景

必應每日圖片:https://area.sinaapp.com/bingImg/(每天都更新)

把下面的程式碼複製到css框即可,將自己的背景變成每日圖片

如果你想更改,就把url裡面的內容改成圖片地址即可。

html/* 必應每日隨機背景圖*/
{
background:url(https://area.sinaapp.com/bingImg/) top center no-repeat #000;
background-attachment:fixed;
}
body
{
 background: none;
}
點我展開

導航欄半透明

把你的導航欄變成半透明的。

將程式碼複製到css框中即可

#mainContent
{
    background: #fff0; /* 導航選單半透明*/
}
點我展開

設定簽名格式

將簽名格式變得更好看,顏色可以自己更改。

放置到css框中即可

/* 設定簽名格式 定製css樣式 */
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
}
點我展開

在部落格簽名裡貼上下面的程式碼,內容連結可以修改。

<div>作者:<a href="http://www.cnblogs.com/【你的地址】/">【你的名字】</a></div>
<div>出處:<a href="http://www.cnblogs.com/【你的地址】/">http://www.cnblogs.com/【你的地址】/
</a></div>
<p>-------------------------------------------</p>
<p>個性簽名:獨學而無友,則孤陋而寡聞。做一個靈魂有趣的人!</p>
<p>如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個<span>“推薦”</span>哦,博主在此感謝!</p>
<p></p>
<p>萬水千山總是情,打賞一分行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!</p>
點我展開

更改文章字型標題

整體設定文字,將標題上色置中。

放置在css框中即可,h1/h2可以按照習慣自行更改

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#cnblogs_post_body h1    {
    text-align:center;
    background: #333366;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    text-align:center;
    background: #006699;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
點我展開

 統計訪問次數/訪問總人數

以前很多人之前都會在http://www.amazingcounters.com/這個網站統計

但是現在不太穩定,我又在網上找到了另一個計數器網站,穩定可用。

https://www.cutercounter.com/traditional-chinese-n/

在這裡面申請後就可以使用,很多面板,很好看,獲得程式碼貼上到部落格側邊欄公告即可。

公告欄圓形時鐘

圓形大氣的時鐘,大小可自定義。

貼上到部落格側邊欄公告即可

<!-- 新增公告欄時鐘 -->
<div id="clockdiv">
    <canvas id="dom" width="250" height="250">時鐘canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
點我展開

公告欄人形時鐘

可愛有趣的人形時鐘。

貼上到部落格側邊欄公告即可

<!-- 新增公告欄人形時鐘 -->
<embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
<br />
點我展開

小老鼠遊戲控制元件

閒著沒事可以玩,可以更改顏色。

<!-- 小老鼠遊戲控制元件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div><p></p>
點選黃色小點讓小老鼠跑步,點選小老鼠周圍即可餵食。
點我展開

 網易音樂(側邊欄)

具體可以到網易雲音樂找

1.找出你想聽的歌/歌單

2.點選“生成外鏈播放器”

3.選擇合適大小

4.將首尾的iframe改為embed

5.貼上到部落格園側邊欄。

示例:

<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=4010198&auto=0&height=66"></embed>
點我展開

網易音樂(頁尾)

將下面的音樂貼上到頁尾框即可(這個似乎更加漂亮)

想要更改歌單,就按照上一條,更改裡面的ID即可

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="865331941" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/[email protected]/dist/Meting.min.js"></script>
點我展開

QQ靠靠找我

使用者點選旁邊的QQ即可想你通訊,但是提前要設定好QQ線上狀態

<!--靠靠找我-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=【你的QQ號】&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:【你的QQ號】:41" alt="點選按鈕前記得開啟QQ" title="點選按鈕前記得開啟QQ"/></a>
<p class="wenzi">有問題找我哦,如果點選按鈕失效,就直接向QQ:【你的號碼】傳送訊息</p>
點我展開

側邊欄滾動文字

更改內容新增到部落格園側邊欄即可

<marquee><a href="#"><font color="red" size="4">你的內容</marquee>
點我展開

新增頂部資訊

更改內容新增到頁首即可

<!-- 新增部落格頂部博主資訊-->
<p style="text-align: center;font-size:35px;margin-bottom:5px;margin-top:20px;opacity: 0.5">WELCOME</p>
點我展開

 新增頂部滾動公告

更改內容新增到頁首即可

<!-- 新增頂部滾動資訊(公告)-->
<div id="Scroll_info" style="text-align: center;color:blue;font-size:16px;padding:16px;opacity: 0.5">任何一個偉大的目標,都有一個微不足道的開始。</div>
點我展開

複製貼上警告

當別人複製貼上時,會有單獨的警告(個人是不推薦使用別人的禁止複製貼上了)

新增到頁首即可

<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
{
  var selected = window.getSelection();
  var copyFooter = '<br>-<br>著作權歸作者所有。<br>' 
                        + '商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。<br>'
                        + '作者:老官童鞋gogo<br> 源地址:' + document.location.href
                        + '<br>來源:部落格園cnblogs<br>© 版權宣告:本文為博主原創文章,轉載請附上博文連結!';
  var copyHolder = $('<div>', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}});
點我展開

更改滑鼠圖示

不在使用微軟預設圖示(僅在部落格內生效)

可以更改樣式

新增到css框

a:hover {
        cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/click_24px_1231393_easyicon.net.ico),auto;
 }
body {
        cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/pointer_24px_1231389_easyicon.net.ico),auto;
 }
點我展開

 返回頂部按鈕

點選返回頂部。

方便你我

貼上到頁首

<!-- 返回頂部 -->
<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 8px;
     z-index: 99;
}
#back-top span {
     width: 70px;
     height: 140px;
     display: block;
     background:url(https://images.cnblogs.com/cnblogs_com/laoguantongxiegogo/1667745/o_200312023941%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 400) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
點我展開

滑鼠點選特效1

點選後出現社會主義核心價值觀。

處處要學習

貼上到頁尾。

<script type="text/javascript">
/* 滑鼠特效 */
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>
點我展開

滑鼠點選特效2

點擊出現煙花。

貼上到頁尾

 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
點我展開

頁面雪花特效

天上飄雪花

css部分程式碼

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
}
點我展開

頁尾部分程式碼

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>

<script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script>
點我展開

兩個都要有

改變標題欄logo

圖片可以自行選擇

我的是一個小電腦

貼上到頁尾

<script type="text/javascript" language="javascript">
  //Setting ico for cnblogs
  var linkObject = document.createElement('link');
  linkObject.rel = "shortcut icon";
  linkObject.href = "https://blog-static.cnblogs.com/files/laoguantongxiegogo/macbook_128px_1225720_easyicon.net.ico";
  document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
點我展開

訪客來源統計1

這個放在側邊欄,列表式的。

不過和flag counter不一樣(flag counter被部落格園禁用了)

從下面的這個網站獲取程式碼後貼上到側邊欄

http://www.harlanc.vip/

訪客來源統計2

一個小地球,個人感覺放在頁尾好看一些。

從下面的這個網站獲取程式碼後貼上到頁尾

https://www.revolvermaps.com/

隨筆分類空隙修改

定製左側隨筆分類上下項之間的間距,左側隨筆分類顯示有多少項,你就在後面增加多少項

貼上到css:

/* 定製左側隨筆分類上下項之間的間距,左側隨筆分類顯示有多少項,你就在後面增加多少項 */
#CatList_LinkList_0_Link_0{
}
#CatList_LinkList_0_Link_1{
    margin-top:10px;
}
#CatList_LinkList_0_Link_2{
    margin-top:10px;
}
#CatList_LinkList_0_Link_3{
    margin-top:10px;
}
#CatList_LinkList_0_Link_4{
    margin-top:10px;
}
#CatList_LinkList_0_Link_5{
    margin-top:10px;
}
#CatList_LinkList_0_Link_6{
    margin-top:10px;
}
#CatList_LinkList_0_Link_7{
    margin-top:10px;
}
#CatList_LinkList_0_Link_8{
    margin-top:10px;
}
#CatList_LinkList_0_Link_9{
    margin-top:10px;
}
#CatList_LinkList_0_Link_10{
    margin-top:10px;
}
#CatList_LinkList_0_Link_11{
    margin-top:10px;
}
#CatList_LinkList_0_Link_12{
    margin-top:10px;
}
#CatList_LinkList_0_Link_13{
    margin-top:10px;
}
#CatList_LinkList_0_Link_14{
    margin-top:10px;
}
點我展開

看板娘

可愛的看板娘

每天開啟部落格看到她心情好極了

這個較為複雜,詳情看這位大佬的部落格

https://www.cnblogs.com/kousak/p/9726514.html

日曆美化

讓日曆更好看一些

貼上到css

/* 公告欄日曆樣式設定 */
.Cal {
    border: 1px solid #F5F5F5;
    width: 190px;   /*日曆寬度*/
    font-family: Arial;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 180px;
    background-color: #F5F5F5;   /*日曆背景顏色*/
    margin-left: 0;
}
/*日曆的第一行標題  年份/月份這一欄配置*/
.CalTitle {
    background-color: #F5F5F5;
    border-color: #adf;
    font-family: Arial;
    font-size: 14px;
    color: #000;
    margin-left: 0;
    padding: 0;
    height: 100%;
    font-weight: bold;
}
/*日曆的第二行  星期資訊這一行配置*/
.CalDayHeader {
    background-color: #F5F5F5;
}
點我展開

 部落格園新型面板(各位大佬製作的!)

這些面板是現成的,不推薦私自更改,如有能力可以嘗試。

由BNDong大佬製作的面板

具體的下載、操作請去他的部落格檢視https://github.com/BNDong/Cnblogs-Theme-SimpleMemory。

我的附屬部落格就是採用他的面板,十分好看,作者持續更新!

我的附屬部落格

bili面板

具體的下載、操作請去他的部落格檢視https://www.cnblogs.com/gshang/p/biliTheme.html。

這個部落格也很好看的,作者持續更新!

後記

就說到這裡,未完待續,如果對你有一點小小的幫助的話,點個贊和關注吧。