博客園美化大集合2020最新！不用擔憂失效問題！

時間  2020-05-21
標籤 博客 美化 集合 最新 不用 擔憂 失效 問題 欄目 快樂工作 简体版
原文   原文鏈接

前言

很多人說個人博客園佈置得好，今天就發佈一下個人博客園美化。javascript

最近更新：2020年3月14日css

在這裏會有持續更新的內容，沒必要擔憂插件失效問題。html

下面進入正文，但願對您有幫助。java

我先在這裏說一下，本文章僅在老官童鞋gogo的博客和附屬博客發佈，其餘均爲盜版抄襲！git

樣板：github

個人主博客：https://www.cnblogs.com/laoguantongxiegogo/web

個人附屬博客：https://www.cnblogs.com/laoguantongxiegogofs/npm

博客園美化準備

1.你要申請博客。canvas

2.申請js權限（對管理員說點好話）app

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/aplayer@1.10.0/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/meting@1.2/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;
}
點我展開

看板娘

可愛的看板娘

天天打開博客看到她心情好極了

這個較爲複雜，詳情看這位大佬的博客

http://www.javashuo.com/article/p-usgyoguo-r.html

日曆美化

讓日曆更好看一些

粘貼到css

評論區帶頭像而且支持旋轉

評論區再也不單調

1.將代碼粘貼到css框

.feedbackCon img:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg);
} .feedbackCon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
點我展開

2.創建一個名爲Comments.js的文件（粘貼到記事本，其中txt的後綴名也要更改）

3.將下面代碼粘貼到Comments.js文件中並保存

function customTimer(inpId, fn) { if ($(inpId).length) { fn(); } else { var intervalId = setInterval(function () { if ($(inpId).length) {  //若是存在了
                clearInterval(intervalId);  // 則關閉定時器
                customTimer(inpId, fn);              //執行自身
 } }, 100); } } //添加 評論區的 形象照
function addImage() { var spen_html = "<span class='bot' ></span>\ <span class='top'></span>"; $(".blog_comment_body").append(spen_html); $(".blog_comment_body").before("<div class='body_right' style='float: left;'><a target='_blank'><img  /></a></div>"); var feedbackCon = $(".feedbackCon").addClass("clearfix"); for (var i = 0; i < feedbackCon.length; i++) { var span = $(feedbackCon[i]).find("span:last")[0].innerHTML || "http://pic.cnitblog.com/face/sample_face.gif"; $(feedbackCon[i]).find(".body_right img").attr("src", span); var href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href"); $(feedbackCon[i]).find(".body_right a").attr("href", href); } } //頁面加載完成是執行
$(function () { //添加 評論區的 形象照
    customTimer(".blog_comment_body", addImage); });
點我展開

4.將這個文件上傳到博客園後臺的文件中

5.頁腳粘貼以下代碼，並寫上你的地址

<script type="text/javascript" src="http://files.cnblogs.com/files/本身的博客名稱/Comments.js"></script>
點我展開

可能有一點麻煩~

炫酷的支持與反對

在頁面的有下角會顯示支持與反對的懸浮窗

把下面的代碼粘貼到css框中

/*推薦和反對*/ #div_digg { padding: 10px; position: fixed; _position: absolute; z-index: 1000; bottom: 20px; right: 0; _right: 17px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8;
} .icon_favorite { background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0; padding-left: 16px;
} #blog_post_info_block a { text-decoration: none; color: #5B9DCA; padding: 3px;
}
點我展開

博客園背景鼠標跟隨線條

頁面背景會有線條跟着鼠標跑

把下面的代碼粘貼到頁首中

<canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

<scriptsrc="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>
點我展開

博客園隱藏反對按鈕

維護自尊心，誒嘿嘿~

粘貼到css框中

/* 隱藏反對按鈕 */ .buryit { display:none; }
點我展開

博客園禁止複製粘貼（不包括代碼）

就在剛纔，我在某度引擎搜索了個人這篇博客，發現有不少人在沒有通知個人狀況下盜取了個人文章。

我很氣憤，爲了維護我的正當權益，我決定加入這個代碼，有須要的能夠拿走！

在頁首添加以下代碼

<script language="Javascript"> document.body.onselectstart = document.body.ondrag = function(){return false;} </script>
點我展開

博客園新型皮膚（各位大佬製做的！）

這些皮膚是現成的，不推薦私自更改，若有能力能夠嘗試。

個人皮膚模板

若是想採用個人主博客的皮膚的基本模板的話就去這裏看一看吧！

具體的下載、操做請去他的博客查看https://www.cnblogs.com/netube/p/10160706.html

由BNDong大佬製做的皮膚

具體的下載、操做請去他的博客查看https://github.com/BNDong/Cnblogs-Theme-SimpleMemory。

個人附屬博客就是採用他的皮膚，十分好看，做者持續更新！

個人附屬博客

由GShang製做的bili皮膚

具體的下載、操做請去他的博客查看https://www.cnblogs.com/gshang/p/biliTheme.html。

這個博客也很好看的，做者持續更新！

atum皮膚

具體的下載、操做請去他的博客查看https://www.cnblogs.com/cjunn/#/cnblog/works/article/12436930

這個博客看起來很充實，電腦端手機端的側邊欄採起不同的形式，喜歡能夠按照教程製做。

做者持續更新！

由DIY狂魔大佬製做的awesCnb皮膚

具體的下載、操做請去他的博客查看http://www.javashuo.com/article/p-bxwlrdar-ck.html

你能夠在本文的評論區見到這位大佬！

這個皮膚十分清新，色彩豔麗，舒服養眼！

我目前尚不肯定是否是這位大佬把皮膚髮在bilibili中。

後記

就說到這裏，未完待續，若是對你有一點小小的幫助的話，點個贊和關注吧。

在後面若是容許的話我會逐漸加入圖片的，有興趣的能夠持續關注

原文出處：https://www.cnblogs.com/laoguantongxiegogo/p/12488696.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程