背景知識了解

圖片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://img.uj5u.com/2021/06/18/2453421806222417.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://img.uj5u.com/2021/06/18/2453421806222419.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 代碼

/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.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 {
font-size: 14px!important;
}
#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);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{  
display: none !important;
}
body {
color: #000;
background: url(http://XXXX.jpg  //你自己的背景圖片url
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
}

div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋體, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}

#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}

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

滑鼠點擊文字特效、煙花特效

煙花特效

將以下代碼復制粘貼到頁尾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代碼

<!-- 滑鼠點擊特效 -->
<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/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="http://files.cnblogs.com/files/Merak21/cnblog-scroller3.css" type="text/css" rel="stylesheet">
<script src="http://files.cnblogs.com/files/Merak21/scrollspy.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/Merak21/stickUp.min.js" type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/Merak21/cnblog-scroller.js" type="text/javascript"></script>

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

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

說明：

h1-h6標題都會顯示

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

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

我的博客-->管理-->選項-->側邊欄控制元件-->全部不選
效果圖展示：

懸浮點贊，反對隱藏效果

將以下代碼復制到頁面定制 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="https://www.cnblogs.com/Merak21/p/#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(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.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="https://www.cnblogs.com/Merak21/p/#top"><span></span></a></p>

效果圖展示

標題樣式特效

將以下代碼復制到頁面定制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 language="Javascript">
document.body.onselectstart = document.body.ondrag = function() {return false; }
</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>
    // 高度大于300的添加滾動條
     $('pre').each(function (ind, dom) {
        if ($(dom).css('height').slice(0, -2) > 300) {
             $(dom).css('height', '300px');
             $(dom).css('overflow', 'auto');
         }
     })
</script>

說明：這個是設定的高度大于300的代碼添加滾動條，如果需要其他高度，請在 slice(0, -2) > 300 'height', '300px' 中更改相應值
效果圖展示

超過固定高度給代碼添加顯隱按鈕

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

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

    // 高度大于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 >
    <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>

效果圖展示

動態線條特效

將以下代碼復制到博客側邊欄公告處

<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、效果圖展示

櫻花飄落特效

櫻花飄落特效一

效果：飄落兩三頁會停

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

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

效果圖展示：

櫻花飄落特效二

效果：一直飄落

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

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

效果圖展示：

著作權資訊效果

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>

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

正文圖片懸停放大特效

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

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

效果圖展示

評論效果

將以下代碼復制到頁首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  src="'+avatar+'"/>')
    });
}

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

效果展示

打賞效果

將以下代碼復制到頁首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 里改成自己上傳的微信收款碼圖片鏈接
效果圖展示

附:特效位置顏色除錯

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

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

參考鏈接

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

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

博客園添加著作權簽名

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

博客園美化（最全）

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288078.html

標籤：Html/Css

上一篇：前端 | 隱藏搜索框：CSS 影片正反向序列

下一篇：前端 | 隱藏搜索框：CSS 影片正反向序列

自定義博客園主題樣式

背景知識了解

圖片url獲取

JS權限申請

自定義設定位置

模板設定

JS檔案的下載和上傳

彩帶跳轉

Gitee彩帶跳轉

Github彩帶跳轉

github彩帶顏色

透明圖片背景

滑鼠點擊文字特效、煙花特效

煙花特效

文字特效

目錄導航效果

目錄導航效果一

目錄導航效果二

懸浮點贊，反對隱藏效果

小火箭置頂特效

標題樣式特效

禁止頁內復制

代碼復制操作移入代碼框內懸停顯示

代碼添加滾動條、顯示隱藏代碼按鈕

超過固定高度給代碼添加滾動條

超過固定高度給代碼添加顯隱按鈕

雪花飄落特效、動態線條特效

雪花特效一

雪花特效二

動態線條特效

櫻花飄落特效

櫻花飄落特效一

櫻花飄落特效二

著作權資訊效果

正文圖片懸停放大特效

評論效果

打賞效果

附:特效位置顏色除錯

參考鏈接