美化下下個人博客園

時間 2020-07-02

標籤美化下下個人博客简体版

原文原文鏈接

美化博客園

整天面對着單調的博客頁面是否以爲單調？javascript

這麼有個性的你，難道不想DIY一下本身的博客園私屬空間嗎？css

那麼今天咱們就來美化一下本身的博客園，讓它看起來不同凡響。html

1.更換博客園背景和鼠標皮膚

Come Baby這個很簡單的說：java

(1).登陸到個人博客園以下圖所示web

點擊管理按鈕就會看到以下圖所示的這樣canvas

點擊選擇文件選擇你喜歡的背景圖還有你的鼠標皮膚圖片（分兩張，一張是普通圖片，一張是鼠標移動到超連接的圖片），再點擊上傳文件。app

以後在文件列表裏找到你上傳的文件，右鍵單擊複製背景圖片的地址。dom

（2）.設置基礎博客模板

點擊設置，以下圖所示：post

選擇上圖紅箭頭所指的模板ui

複製如下CSS樣式的代碼到下圖的紅框裏

  1 /*simplememory*/
  2 #google_ad_c1, #google_ad_c2 {display:none;}
  3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
  4 font-size: 14px!important;
  5 }
  6 #home {
  7 opacity: 0.80;
  8 margin: 0 auto;
  9 width: 85%;
 10 min-width: 950px;
 11 background-color: #f2f2f2;
 12 padding: 30px;
 13 margin-top: 30px;
 14 margin-bottom: 50px;
 15 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 16 }
 17 #blogTitle h1 {
 18 font-size: 30px;
 19 font-weight: bold;
 20 font-family: "Comic Sans MS";
 21 line-height: 1.5em;
 22 margin-top: 20px;
 23 color: #515151;
 24 }
 25 #navList a:hover {
 26 color: #4C9ED9;
 27 text-decoration: none;
 28 }
 29 #navList a {
 30 display: block;
 31 width: 5em;
 32 height: 22px;
 33 float: left;
 34 text-align: center;
 35 padding-top: 18px;
 36 }
 37 #navigator {
 38 font-size: 15px;
 39 border-bottom: 1px solid #ededed;
 40 border-top: 1px solid #ededed;
 41 height: 50px;
 42 clear: both;
 43 margin-top: 25px;
 44 }
 45 .catListTitle {
 46 margin-top: 21px;
 47 margin-bottom: 10.5px;
 48 text-align: left;
 49 border-left: 10px solid rgba(82, 168, 236, 0.8);
 50 padding: 10px 0 14px 10px;
 51 background-color: #f5f5f5;
 52 }
 53 #ad_under_post_holder #google_ad_c1,#google_ad_c2{ 
 54 display: none !important;
 55 }
 56 body {
 57 color: #000;
 58 background: url(http://images.cnblogs.com/cnblogs_com/lemon-Net-Skill/1315822/o_bg7.jpg) fixed;//在這裏將你以前上傳的圖片地址粘貼過來
 59 background-size: 100%;
 60 background-repeat: no-repeat;
 61 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 62 font-size: 12px;
 63 min-height: 101%;
 64 cursor:url(https://files.cnblogs.com/files/lemon-Net-Skill/666.gif),default;//在這裏把你鼠標平時的皮膚圖片地址粘貼過來
 65 }
 66 a:hover {
 67 cursor:url('https://files.cnblogs.com/files/lemon-Net-Skill/999.gif'),default;//在這裏把你鼠標移動到超連接的皮膚圖片粘貼過來
 68 }
 69 #topics .postTitle {
 70 border: 0px;
 71 font-size: 200%;
 72 font-weight: bold;
 73 float: left;
 74 line-height: 1.5;
 75 width: 100%;
 76 padding-left: 5px;
 77 }
 78 
 79 
 80 div.commentform p{
 81 margin-bottom:10px;
 82 }
 83 .comment_btn {
 84 padding: 5px 10px;
 85 height: 35px;
 86 width: 90px;
 87 border: 0 none;
 88 border-radius: 5px;
 89 background: #ddd;
 90 color: #999;
 91 cursor:pointer;
 92 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
 93 text-shadow: 0 0 1px #fff;
 94 display: inline !important;
 95 }
 96 .comment_btn:hover{
 97 padding: 5px 10px;
 98 height: 35px;
 99 width: 90px;
100 border: 0 none;
101 border-radius: 5px;
102 background: #258fb8;
103 color: white;
104 cursor:pointer;
105 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
106 text-shadow: 0 0 1px #fff;
107 display: inline !important;
108 }
109 #commentform_title {
110 background-image:none;
111 background-repeat:no-repeat;
112 margin-bottom:10px;
113 padding:0;
114 font-size:24px;
115 }
116 #commentbox_opt,#commentbox_opt + p {
117 text-align:center;
118 }
119 .commentbox_title {
120 width: 100%;
121 }
122 #tbCommentBody {
123 font-family:'Microsoft Yahei', Microsoft Yahei, 宋體, sans-serif;
124 margin-top:10px;
125 max-width:100%;
126 min-width:100%;
127 background:white;
128 color:#333;
129 border:2px solid #fff;
130 box-shadow:inset 0 0 8px #aaa;
131 // padding:10px;
132 height:250px;
133 font-size:14px;
134 min-height:120px;
135 }
136 .feedbackItem {
137 font-size:14px;
138 line-height:24px;
139 margin:10px 0;
140 padding:20px;
141 background:#F2F2F2;
142 box-shadow:0 0 5px #aaa;
143 }
144 .feedbackListSubtitle {
145 font-weight:normal;
146 }
147 
148 #blog-comments-placeholder, #comment_form {
149 padding: 20px;
150 background: #fff;
151 -webkit-box-shadow: 1px 2px 3px #ddd;
152 box-shadow: 1px 2px 3px #ddd;
153 margin-bottom: 50px;
154 }
155 .feedback_area_title {
156 margin-bottom: 15px;
157 font-size: 1.8em;
158 }
159 .feedbackItem {
160 border-bottom: 1px solid #CCC;
161 margin-bottom: 10px;
162 padding: 5px;
163 background: rgb(248, 248, 248);
164 }
165 .color_shine {background: rgb(226, 242, 255);}
166 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
167 #comment_form .title {
168 font-weight: normal;
169 margin-bottom: 15px;
170 }

OK 到這裏咱們的背景和鼠標皮膚都變了。

2.給博客園添加雪花漂浮特效

一進去就像下雪了似的呢

ヾ(●´∇｀●)ﾉ哇～

好噠咱們去實現它

這時候咱們須要向博客園大大申請下下博客園的JS權限了。

通常申請幾個小時就審批了

拿到JS權限後咱們就能夠進行下一步的操做了啦

咱們還須要一個JQ文件和JQ的雪花插件

幫你整理好了，下載地址在這裏喲！

網盤連接：https://pan.baidu.com/s/1Kmn-aKHLVbI2FzwX4YU40g 提取碼：9ddt

把這個壓縮包解壓後的兩個文件，按照以前的上傳方式上傳到博客園的文件裏

只要把下面代碼添加到（管理-》設置-》頁腳HTML代碼）中就能夠了，非簡單！

1.在頁面引入 jQuery 庫再引入 jQuery.snow.js，注意前後順序哦！！！

就像這樣

注意這裏要把連接換成你本身的喲！

而後在下面複製如下代碼

1 <script>
2 (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
3 $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#2894FF' });
4 </script>

咱們能夠根據本身的喜愛自定義如下的參數，改變雪花的大小顏色頻率哦！

1 minSize  /* 雪花的最小尺寸，默認值 10 */
2 
3 maxSize /* 雪花的最小尺寸，默認值 20 */
4 newOn /* 每毫秒雪花出現的頻率，默認是 500 */
5 flakeColor /* 雪花的顏色，默認值是白色 #FFFFFF */

保存好返回本身的博客主頁就會看到飄雪的特效了

ヾ(●´∇｀●)ﾉ哇～

3.給博客園添加鼠標點擊特效

這個超簡單的說

ヾ(●´∇｀●)ﾉ哇～

複製如下代碼，粘貼到你的頁腳Html代碼裏保存就能夠了

<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>

4.給博客園添加超卡哇伊的板娘

有沒有注意到我右下角的小板娘呢

是否是很可愛啊

快把她請到你的博客園裏吧

首先咱們須要往博客園上傳一些板孃的關鍵文件

幫你整理好了，下載地址在這裏喲！

連接：https://pan.baidu.com/s/1AJ-q7uy6h5e9Z9SzL3wyFw
提取碼：o1kf

而後在你的頁腳Html代碼裏添加如下代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="你上傳的waifu1.css文件路徑"/>
    <link rel="stylesheet" type="text/css" href="你上傳的flat-ui.min1.css文件路徑"/>
</head>
<body>    
    <div class="waifu">
        <div class="waifu-tips"></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="你上傳的waifu-tips.js路徑"></script>
    <script src="你上傳的live2d.js路徑"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>

OK 大功告成你的頁面有沒有變漂亮了呢？？？

相關標籤/搜索

每日一句

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