部落格園美化大集合2020最新！不用擔心失效問題！
- 2020 年 3 月 13 日
- 筆記
前言
不少人說我的部落格園布置得好，今天就發布一下我的部落格園美化。
最近更新：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&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><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被部落格園禁用了）
從下面的這個網站獲取程式碼後粘貼到側邊欄
訪客來源統計2
一個小地球，個人感覺放在頁腳好看一些。
從下面的這個網站獲取程式碼後粘貼到頁腳
隨筆分類空隙修改
訂製左側隨筆分類上下項之間的間距，左側隨筆分類顯示有多少項，你就在後面增加多少項
粘貼到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。
這個部落格也很好看的，作者持續更新！
後記
就說到這裡，未完待續，如果對你有一點小小的幫助的話，點個贊和關注吧。
