自定義博客園主題樣式

背景知識了解

圖片url獲取

1.將選定的背景圖上傳至博客園服務器

將選定的圖片上傳至自己博客園的相冊中

2.獲取上傳至博客園服務器背景圖的url

打開相冊，選擇需要的背景圖片-->單擊-->在打開的圖片上方右鍵-->復制圖片地址

JS權限申請

目的：后面的添加js特效需要用到

我的博客園-->管理

設置-->博客園側邊欄公告-->點擊 申請JS權限

編寫申請js權限內容

例：

尊敬的博客園管理員：

請問是否可以幫我開通js權限，我想對文章的樣式和布局需要js代碼進行調整外觀。

謝謝您的幫助。

尊敬的博客園管理員：

您好，我希望用JS美化下我的博客頁面，麻煩通過下我的JS權限申請。

謝謝您的幫助。

隨便寫一個就行,比較快的話大概一兩個小時就能通過,審核不通過多換幾個內容試試

通過審核的狀態:

自定義設置位置

進入 個人首頁--->管理--->設置

頁面定制css代碼 位置

博客側邊欄公告（支持HTML代碼） 位置

頁首 HTML 代碼 位置

頁腳 HTML 代碼 位置

模板設置

選擇一個你喜歡的模板，后面的代碼都是基於你選擇的這個模板修改的，可以和我一樣選擇red_autumnal_leaves

JS文件的下載和上傳

目的：把別人服務器上的文件替換你服務器上的，防止別人刪除文件你也不能用了。

打開鏈接，ctrl+s保存

我的首頁-->管理-->文件-->選擇文件-->選擇你剛才下載的js文件-->上傳

點擊下載可以看到對應的鏈接

替換前后對比：

https://blog-static.cnblogs.com/files/Merak21/scrollspy.js

https://blog-static.cnblogs.com/files/你的用戶名/scrollspy.js

即只要你將文件上傳到了你自己的博客園服務器，直接替換用戶名就可

彩帶跳轉

Gitee彩帶跳轉

將以下代碼復制粘貼到 頁首 HTML 代碼

<a href="https://gitee.com/sunny_21">  
<img style="position: fixed; top: 0; left: 0; border: 0; z-index:9999;" 
     src="https://images.cnblogs.com/cnblogs_com/Merak21/1978140/o_210521135414Gitee.png" 
     alt="Fork me on Gitee">
</a>

效果圖展示:

Github彩帶跳轉

• 將以下代碼復制粘貼到 頁首 HTML 代碼

<a href="https://github.com/sunny21">  
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
  	 src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png" 
  	 alt="Fork me on GitHub">
</a>

• 說明：

  ​ a href=""中的鏈接換成你自己的 GitHub 主頁地址

github彩帶顏色

綠色

將src中鏈接替換成以下鏈接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png

黑色

將src中鏈接替換成以下鏈接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png

橘黃色

將src中鏈接替換成以下鏈接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png

灰色：

將src中鏈接替換成以下鏈接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png

白色：

將src中鏈接替換成以下鏈接:

https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png

透明圖片背景

• 將以下代碼復制粘貼到 頁面定制 CSS 代碼

/* 背景圖片，背景透明度 */
#home {
opacity: 0.80;
margin: 0 auto;
width: 85%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
color: #000;
background: url(https://你自己的背景圖片.jpg) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}

• 說明 ：
  #home 中的 opacity: 0.80; 表示主頁面透明度 width: 85%;表示主頁面所占寬
  將body模塊下的參數"background”url的值修改為你上傳到博客園的背景圖片url，保存就可以了

• 效果圖展示

  

個人信息特效

將以下代碼復制到 頁面定制CSS代碼

/* 個人信息特效 */
#header {
    position: relative;
    height: 167px;
    margin: 0;
    background: transparent url(https:你的頭部背景圖片.jpg) no-repeat 0 0;
    -webkit-box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%);
}
#header h1 a {
    font-family: "Comic Sans MS";
    color: #b15900;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 14px;
    color: #ff7f34;
    line-height: 1.5em;
    margin-top: 10px;
    margin-left: 30px;
    width: 50%;
    margin-left: 6em;
    float: left;
}
#navList a:link, #navList a:visited, #navList a:active {
    color: #00b11b;
    font-weight: bold;
    font-size: 15px;
}
#navList a:hover {
color: #00ff27;
text-decoration: none;
}
.blogStats {
    float: right;
    color: #b1b1b1;
    margin-top: 14px;
    margin-right: 180px;
    position: absolute;
    right: 77px;
    top: 35px;
    font-size: 14px;
}

• 效果圖展示

標題樣式特效

• 將以下代碼復制到 頁面定制CSS代碼

/* 標題樣式 */
#cnblogs_post_body h1 {
    background: linear-gradient(to bottom , #f37001,rgb(255 255 255 / 10%));
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #ffb9a9, 1px 1px 4px 1px rgb(255 95 95 / 78%);
    color: #FFFFFF;
    font-family: "微軟雅黑", "宋體", "黑體", Arial;
    font-size: 20px;
    font-weight: bold;
    height: 30px;
    line-height: 29px;
    margin: 18px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #a70505;
    text-align:center
}
#cnblogs_post_body h2 {
    background: linear-gradient(to bottom , #b930ff,rgb(255 255 255 / 10%));
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #ebbaff, 1px 1px 4px 1px rgb(156 56 181 / 72%);
    color: #FFFFFF;
    font-family: "微軟雅黑", "宋體", "黑體", Arial;
    font-size: 15px;
    font-weight: bold;
    height: 23px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #9d65ca;
    text-align:center
}
#cnblogs_post_body h3 {
    background: linear-gradient(to bottom , #5efd35,rgb(255 255 255 / 10%));
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #ccffab, 1px 1px 6px 1px rgb(4 117 8 / 84%);
    color: #FFFFFF;
    font-family: "微軟雅黑", "宋體", "黑體", Arial;
    font-size: 12px;
    font-weight: bold;
    height: 21px;
    line-height: 21px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #36a019;
    text-align:center
}
#cnblogs_post_body h4 {
    background: linear-gradient(to bottom , #37fff6,rgb(255 255 255 / 10%));
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #afffff, 1px 1px 6px 1px rgb(4 101 101 / 78%);
    color: #FFFFFF;
    font-family: "微軟雅黑", "宋體", "黑體", Arial;
    font-size: 13px;
    font-weight: bold;
    height: 16px;
    line-height: 18px;
    margin: 18px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #059081;
    text-align:center
}
/* 標題樣式設置結束 */

• 說明: text-align:center 標題居中顯示 font-size: 13px; 字體值大小 line-height: 18px; 字體位置 ，可自行更改
• 效果圖展示
  

目錄導航效果

目錄導航效果一

• 將以下代碼復制粘貼到 頁腳HTML代碼

<script src="https://blog-static.cnblogs.com/files/Merak21/bootstrap.min.js"></script>
<link href="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/Merak21/marvin.nav.my1502.WhiteTears.js"></script>

• 說明：
  只有h1標題會顯示
• 效果圖展示
  

目錄導航效果二

將以下代碼復制到 頁首HTML代碼

<!-- 導航效果 -->
<link href="https://blog-static.cnblogs.com/files/blogs/634602/cn-cnblog-scroller.css" type="text/css" rel="stylesheet"> 
<script src="https://blog-static.cnblogs.com/files/blogs/634602/cn-scrollspy.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/634602/cn-stickUp.min.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/634602/cn-cnblog-scroller.js" type="text/javascript"></script>
<script src="https://blog-static.cnblogs.com/files/blogs/634602/cn.js" type="text/javascript"></script>

將以下代碼復制到 頁面定制 CSS 代碼

/*添加滾動條*/
#sideBarMain ul {
    line-height: 1.5em;
    overflow: auto;
    max-height: 600px;
}

• 說明：

  h1-h6標題都會顯示

  max-height 可以自定義導航欄的最大高度

  為了不影響觀看效果，可以將博客側邊欄的選項全部關閉

  我的博客-->管理-->選項-->側邊欄控件-->全部不選

  

• 效果圖展示：

正文圖片懸停放大特效

• 將以下代碼復制到 頁面定制 CSS 代碼

.post img {
    cursor: pointer;
    transition: all 0.5s;
}
.post img:hover {
    transform: scale(1.3);
}

• 效果圖展示

禁止頁內復制

• 將以下代碼復制到 頁首HTML代碼

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

markdown特效

代碼高亮顯示

• 復制以下代碼到 頁面定制 CSS 代碼

/* markdown配置 */
.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #ecf2ff !important;
    border: 1px solid #fdfdfd !important;
    color: #272727;
    white-space: pre;
    word-break: normal;
    font-family: "Consolas",sans-serif!important;
    font-size:14px!important;
}

• 復制以下代碼到 頁腳 HTML 代碼

<!-- markdown配置 -->
<link href="https://blog-static.cnblogs.com/files/Merak21/mk.min.css" rel="stylesheet"/>
<script src="https://blog-static.cnblogs.com/files/Merak21/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

• 說明：

如果想要其他顏色樣式，可以從highlightjs官網下載

選擇一個你喜歡的樣式，上傳至博客園后台后，將 link標簽的鏈接 更換成你博客園里的css鏈接就可

如果對官網的樣式也不滿意，可以進入CSS文件自行修改相應值

• 效果圖展示：

代碼行號顯示

• 將以下代碼復制到 頁腳 HTML 代碼

<script src="https://blog-static.cnblogs.com/files/Merak21/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

• 效果圖展示

代碼復制顯示

• 將以下代碼復制到 頁面定制 CSS 代碼

/*添加按鈕*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  display:none;
}
.cnblogs-markdown pre:hover > span {
  display:block;
}
.cnblogs-markdown pre > .copyed {
  background: #0c7100;
}

• 將以下代碼復制到 頁腳 HTML 代碼

<script src="https://blog-static.cnblogs.com/files/Merak21/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/Merak21/cp.js"></script>

• 效果圖展示

代碼滾動條顯示

縱向滾動條顯示

​ 效果：縱向顯示自動，橫向顯示滑到markdown最底部才會顯示，高度大於300顯示

• 復制以下代碼到 頁腳html代碼

<script>
    // 高度大於300的添加滾動條
     $('pre').each(function (ind, dom) {
        if ($(dom).css('height').slice(0, -2) > 300) {
             $(dom).css('height', '300px');
             $(dom).css('overflow', 'auto');
         }
     })
</script>

• 說明：如果需要其他高度，請在 slice(0, -2) > 300 'height', '300px' 中更改相應值
• 效果圖展示
  

橫向+縱向滾動條顯示

​ 效果：超過固定長寬都會顯示，與行號顯示，縱向顯示，顯隱按鈕會有沖突，用這個最好把其他幾個注釋

• 復制以下代碼到 頁面定制CSS代碼

.cnblogs-markdown .hljs {
    max-width: 970px;
    max-height: 300px;
    overflow: auto;
}

• 效果圖展示

  

代碼顯隱按鈕

給高度大於600的代碼添加顯示隱藏按鈕，與行號顯示，滾動條顯示沖突，最好只選一個

• 將以下代碼復制到 頁腳HTML代碼

<script>
    // 高度大於600的添加顯示隱藏按鈕
    $('pre').each(function (ind, dom){
        if ($(dom).css('height').slice(0, -2) > 500) {
            var mybtn = document.createElement('button');
            $(mybtn).html('↓ShowCode↓');
            $(mybtn).css({'border-radius': '4px','background-color':'lightblue','cursor':'pointer','border-color':'lightblue'});
            $(mybtn).insertBefore($(dom));
            $(dom).css('display', 'none');
            $(mybtn).click(function () {
                if($(mybtn).html()=='↓ShowCode↓'){
                    $(dom).css('display', 'block');
                    $(mybtn).html('↓CloseCode↓');
                }else {
                    $(dom).css('display', 'none');
                    $(mybtn).html('↓ShowCode↓');
                }
            })
        }
    });
</script>

• 說明：這個是設置的高度大於600的代碼添加按鈕，如果需要其他值，請自行更改相應值

• 效果圖展示

  

雪花飄落特效

雪花特效一

• I、將以下代碼復制到 頁面定制CSS代碼

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}

II、將以下代碼復制到 博客側邊欄公告處(要申請支持js代碼)

<!--雪花-->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/Merak21/snow.js"></script>

• 效果圖展示
  

雪花特效二

• 將以下代碼復制到 頁腳HTML代碼

<script type="text/javascript">
   window.onload = function () {
                var minSize = 10; //最小字體
                var maxSize = 20;//最大字體
                var newOne = 100; //生成雪花間隔
                var flakColor = "#f5f5f5fa"; //雪花顏色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("✽");//定義一個雪花
                var dhight = $(window).height(); //定義視圖高度
                var dw =$(window).width()-80; //定義視圖寬度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //產生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是隨機的left值
                var startOpacity = 0.7+Math.random()*0.3; //隨機透明度
                var endTop= dhight-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*3000; //雪花飄落速度不同
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });
                },newOne);
            }
 </script>

• 效果圖展示
  

櫻花飄落特效

櫻花飄落特效一

效果：飄落兩三頁會停

• 將以下代碼復制粘貼到 頁首HTML代碼

  <script src="https://files.cnblogs.com/files/Merak21/sakuraPlus.js"></script>
  

• 效果圖展示：

  

櫻花飄落特效二

效果：一直飄落

• 將以下代碼復制粘貼到 頁首HTML代碼

<script src="https://files.cnblogs.com/files/Merak21/sakura.js"></script>

• 效果圖展示：

  

鼠標特效

點擊特效

文字特效

• 將以下代碼復制粘貼到 頁腳HTML代碼

<!-- 鼠標點擊特效 -->
<script type="text/javascript">
$(document).ready(function(){
var a_index = 0;
$("body").click(function(e){
var a = new Array("❤北冥是個❤","❤陽光❤","❤灑脫❤","❤孑然❤","❤真淳❤","❤不羈❤","❤隨和❤","❤浪漫❤","❤富有責任心❤","❤愛你❤","❤的美男子❤");
var $i = $("<span/>").text(a[a_index]);
a_index = (a_index + 1) % a.length;
var x = e.pageX,y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": randomColor()
});
$("body").append($i);
$i.animate({"top": y-180,"opacity": 0},1500,function() {
$i.remove();
});
function randomColor(){
let r = Math.floor(Math.random()*256)
let g = Math.floor(Math.random()*256)
let b = Math.floor(Math.random()*256)
return "rgb("+r+','+g+','+b+")"
}
});
});
</script>

• 效果圖展示

  

煙花特效

• 將以下代碼復制粘貼到 頁尾HTML代碼

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

• 效果圖展示

  

動態追隨

動態線條特效

將以下代碼復制到 頁腳HTML代碼

<div style = "display:none;">動態線條</div>
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
<div style = "display:none;"> 動態線條end</div>

2、效果圖展示

鼠標顯示

鼠標指針特效

• 將以下代碼復制到 頁面 定制CSS 代碼

/* 鼠標指針特效 */
body{
    background-repeat: repeat;
    background-attachment: fixed;
    background-size:cover;
    cursor: url(https://images.cnblogs.com/cnblogs_com/Merak21/1978140/o_210521150418shub.png),auto;
}
/*提交按鈕*/
#btn_comment_submit{
    width:73px;height:35px;border:none;
    background-color:#0cbb00;
    -webkit-border-radius: 10px;color:white;
    font-weight: bold;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    font-size: 10pt;
}

將以下代碼復制到 頁腳 HTML 代碼

<!-- 鼠標指針特效 -->
<script src="https://blog-static.cnblogs.com/files/Merak21/cursor-effects.js"></script>
<canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

• 說明：body url中替換成你自已的鼠標指針圖片鏈接

• 效果圖展示

  

點贊特效

• 將以下代碼復制到 頁面定制 CSS 代碼

#div_digg{
  padding: 5px;
  border-radius: 5px;
  position: fixed;
  left: 0;
  bottom: 80px;
  width:80px;
  z-index:100;
}
.diggit{
  background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
  width: 60px;
  height: 60px;
}
#div_digg .diggnum{
  position: absolute;
  bottom: -20px;
  left: 6px;
  background: #D0D0D0;
  padding: 2px 0;
  display: block;
  color: #555;
  font-size: 12px;
  text-align: center;
  width: 60px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  font-weight: bold;
}
/* 刪除反對按鈕,有點邪惡了 */
.buryit{
  display: none;
}

• 說明：如果需要調整點贊位置，可用F12進行調試，詳細可參考本博客最后一條
• 效果圖展示
  

置頂特效

• 將以下代碼復制到 頁首HTML代碼

<!-- 置頂特效 -->
<script>
    function func(){
        var tag = document.getElementById('i1');
        var content = tag.innerText;
        var f = content.charAt(0);
        var l = content.substring(1,content.length);
        var new_content = l + f;
        tag.innerText = new_content;
    }
    setInterval('func()',1600);
</script>
<span id="back-to-top"><a href="#top"></a></span>
<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(https://images.cnblogs.com/cnblogs_com/Merak21/1978205/o_210522231213hj.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() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

• 效果圖展示
  

版權信息效果

1、 將以下代碼復制到 頁面定制CSS代碼

#MySignature　　{　　 border:solid 1px #E5E5E5;

　　　　　　　　　　　　　　padding:10px;

　　　　　　　　　　　　　　background:#FFFEFE url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
　　　　　　　　　　　　　　padding-left:80px;}
#MySignature div{line-height: 25px;}

2、將以下代碼復制貼到 博客簽名

<div>作者：<a href="https://www.cnblogs.com/Merak21/" target="_blank">Merak</a></div>
<div>出處：<a href="https://www.cnblogs.com/Merak21/" target="_blank">https://www.cnblogs.com/Merak21/</a></div>
<div>本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須在文章頁面給出原文連接，否則保留追究法律責任的權利。 </div>

• 說明：
  博客簽名位置：管理-->博客簽名-->標題(隨便寫)-->內容(上面代碼)-->保存
  
  
• 效果圖展示
  

打賞效果

• 將以下代碼復制到 頁首html

<!-- 打賞插件 -->
<script>
window.tctipConfig = {
imagePrefix: "http://files.cnblogs.com/files/kdy11/",
cssPrefix: "http://files.cnblogs.com/files/kdy11",
buttonImageId: 4,
buttonTip: "dashang",
list:{
alipay: {qrimg: "http://files.cnblogs.com/files/xxx/zfb.bmp"}, 
weixin:{qrimg: "http://files.cnblogs.com/files/xxx/wx.bmp"},
}
};
</script>
<script src="https://blog-static.cnblogs.com/files/Merak21/ch_tctip01.js"></script>

• 說明

  ​ 將支付寶收款碼和微信收款碼上傳到博客園相冊

  ​ alipay:{qrimg:"xxx.bmp"}， xxx.bmp 里改成自己上傳的支付寶收款碼圖片鏈接

  ​ weixin:{qrimg:"xxx.bmp"}， xxx.bmp 里改成自己上傳的微信收款碼圖片鏈接

• 效果圖展示

評論效果

• 將以下代碼復制到 頁首html代碼

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

​ 將以下代碼復制到 頁腳html代碼

<script type="text/javascript">
$(function(){
    $('#blogTitle h1').addClass('bounceInLeft animated');
    $('#blogTitle h2').addClass('bounceInRight animated');
    // 刪除反對按鈕
    $('.buryit').remove();
    initCommentData();
});
function initCommentData() {
    $('.feedbackItem').each(function() {
        var text = $(this).find('.feedbackListSubtitle .layer').text();
        // 將樓層信息放到data里面
        // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
        if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
        var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
        $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
    });
}

$(document).ajaxComplete(function(event, xhr, settings) {
  // 監聽獲取評論ajax事件
  if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
    initCommentData();
  }
});
</script>

• 效果展示
  

附:特效位置顏色調試

調試好后將CSS樣式放在 頁面定制CSS代碼 保存即可

可參考【詳細圖解】一步一步教你自定義博客園（cnblog）界面

參考鏈接

小白如何在博客園上創建一個自己的超美化博客

如何在博客園添加 Fork me on GitHub 彩帶效果

博客園添加版權簽名

【詳細圖解】一步一步教你自定義博客園（cnblog）界面

博客園美化（最全）

【CSS】漸變背景（background-image）

一行代碼引入博客園櫻花飄落特效

博客園文章自動生成導航目錄

博客園Markdown編輯器修改代碼配色、添加代碼行號

博客園個人首頁背景設置

CSS 顏色