部落格園美化介面

首先進入設定，在設定中勾選禁用模板預設css，

然後就可以把對應的程式碼複製上去了

注：這些程式碼是之前網上找的，不是自己寫的，時間太長不知道原作者是那位了，沒辦法轉載了...

頁面定製 CSS 程式碼，可以根據自己的喜好選擇

#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a  
{
    display: none;
}


@charset "utf-8";
/* CSS Document */

/**************************************************
第一部分：所有的模板都使用的公共樣式。公告樣式是為了更好的向前和向後相容。
如果不符合你面板的要求，你可以在後面通過更好的優先順序覆蓋著這些樣式，但是
你不能刪除這些樣式。
**************************************************/
#EntryTag {
    margin-top: 20px;
    font-size: 9pt 
;
    color: gray;
}
.topicListFooter {
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
}
#divRefreshComments{
    text-align: right; 
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 9pt;
}
/*****第一部分結束*******************************/

/**************************************************
第二部：公共樣式（全域性樣式）。公共會對所有頁面的標籤都起作用。這個部分你
可以隨意的更改，並不會牽扯到其他的面板模板。但是每次更改都要注意你的面板
模板所有頁面的變化。因為它們是全域性的。
************************************************* 
*/
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555494385396&di=b99bb2f585f6d0b0147b81fe3ba53df1&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F547a9bfcbcde28cdf038b436ddeb94684a45ede6.jpg) no-repeat fixed;
    background-size:cover;
    color:#000;
    font-family: "微軟雅黑","verdana","ms song","宋體","Arial", "Helvetica", "sans-serif";
    font-size: 15px;
    min-height: 101%;
    width:75em;
    margin-left:auto;
    margin-right:auto;
    z-index:0;
}

#Uleft, #Uright,#Dleft, #Dright{
    /* Firefox 4 */
    -moz-transition-property:top; 
    -moz-transition-duration:1s;

    /* Safari and Chrome */
    -webkit-transition-property:top; 
    -webkit-transition-duration:1s;

    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:1s;
    position: fixed;
    width: 80px;
    height: 80px;
    line-height: 500px;
    text-align: center;
    z-index:1;
}
#Uleft{
    width: 80px;
    height: 80px;
    top:-60px;
    left: 50px;
}
#Uright{
    width: 110px;
    height: 110px;
    top: -75px;
    right: 50px;
}
#Dleft{
    bottom:10px;
    left: 10px;
    width: 200px;
    height: 200px;
}
#Dright{
    bottom:-50px;
    right: 0px;
    width: 200px;
    height: 250px;
}

#MagicArray{
    /* Firefox 4 */
    -moz-transition-property:width height bottom right; 
    -moz-transition-duration:1s;

    /* Safari and Chrome */
    -webkit-transition-property:width height bottom right; 
    -webkit-transition-duration:1s;

    /* Opera */
    -o-transition-property:width height bottom right;
    -o-transition-duration:1s;

    position: fixed;
    bottom:107px;
    right: 108px;
    width: 0px;
    height: 0px;
    text-align: center;
    z-index:2;
}
#Tab1{
    -moz-transition-property:fontSize width height; 
    -moz-transition-delay:0.8s;

    -webkit-transition-property:fontSize width height; 
    -webkit-transition-delay:0.8s;

    -o-transition-property:fontSize width height;
    -o-transition-delay:0.8s;

    color:#8B0A50;
    position: fixed;
    font-size: 0px;
    text-align: center;
    z-index:3;
    font-weight:500;
    text-shadow:
        -1px 0 #7A67EE,
1px #7A67EE,
        1px 0 #7A67EE,
-1px #7A67EE;
}

::selection{background:#698B22;color:#FFF;}
::-moz-selection{background#698B22;color:#FFF;}
body{cursor:url(''),auto;}
A{cursor:url(''),auto;}
input{cursor:url(''),auto;}
wait{cursor:url(''),auto;}
input{outline:medium;}
/*

*/
/*滑鼠*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
ul {
    word-break: break-all;
}
li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
a:link {
    color:black;
    text-decoration:none;
}
a:visited {
    color:#111;
    text-decoration: none;
}
a:hover {
    color: #7B68EE;
    -moz-border-radius: 9px;
    -khtml-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    transition: all 0.4s linear 0s;
}
a:active {
    color: black;
    text-decoration: none;
}
.clear {
    clear: both;
}
/*****第二部分結束*******************************/

/**************************************************
第三部分：各個頁面元素的樣式。你可以根據需要隨意的更改，並不會牽扯到其他
的面板模板。這個部分是最能展現你想象力的部分。其中頭部和側邊欄部分是此皮
膚公共的部分。而每個頁面特有的部分會有相應的註釋和說明。
**************************************************/
/*****home和頭部開始**************************/
#home {
    margin: 0 auto;
    width:95%;
    min-width: 60em;
}
#header {
    padding-bottom: 0.4em;
    margin-top: 0.8em;
}
#blogTitle {
    height: 7em;
    clear: both;
    border:1px solid #000;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 12px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    text-shadow:1px 1px 1px #e9f3e8
}
#blogTitle h1 {
    font-size: 300%;
    font-weight: bold;
    margin-left: 1em;
    margin-top: 0.4em;
    width: 50%;
    float: left;
}
#blogTitle h2 {
    margin-left: 6em;
    line-height: 1.5em;
    width: 50%;
    float: left;
    text-shadow:-1px 0 #ddd,
1px #ddd,
                1px 0 #ddd,
-1px #ddd;
}
#blogLogo {
    float: right;
}
#navigator {
/*    background-color: black;
    height: 30px;
    clear: both;*/

    margin-top:0.3em;
    height: 2em;
    clear:both;
    border:1px solid #999;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    background:#FFF;
    opacity: 0.60;
}
#navList {
    min-height: 1.5em;
    float: left;
}
#navList li {
    float: left;
}
#navList a {
    display: block;
    padding-left:0.5em;
    padding-right:0.5em;
    line-height:2em;
    float: left;
    text-align: center;
    border-right: 1px solid #999;
}
#navList a:link, #navList a:visited, #navList a:active {
/*    color: #ccc;*/
}
#navList a:hover {
    color: #7B68EE;
    padding-left:0.8em;
    padding-right:0.8em;
}

.blogStats {
    float: right;
    font-size:0.8em;
    color: #000;
    margin-top: 0.9em;
    margin-right: 0.2em;
    text-align: right;
}
/*****home和頭部結束**************************/

/*****主頁文章列表開始**************************/
#main{
    width: 100%;
    min-width: 70em;
    text-align: left;
    background:#FFF5EE;
    opacity: 0.90;
}
#mainContent .forFlow{
    margin-left: 12em;
    float: none; 
    width: auto;
}

#mainContent {
    min-height: 18em;
    padding: 0px 0px 10px 0;
    *padding-top:10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    
    float: right;
    margin-left: -26em;
    width: 100%
}
.day {
    min-height: 10px;
    _height: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.dayTitle {
    width: 100%;
    color: #666;

    font-weight: bold;
    line-height: 1.5em;
    font-size: 90%;
    margin-top: 3px;
    margin-bottom: 10px;
    clear:both;
    border-bottom: 2px solid #e9f3e8;
    text-align:center;

}
.postTitle {
    font-size: 150%;
    font-weight: bold;
    /*border-bottom: 1px solid #9DAAF4;*/
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    text-shadow:-3px 3px 3px #999
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #000;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 10px;
    color: #7B68EE;
    text-decoration: none;
    text-shadow:-13px 3px 3px #999
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    padding: 10px 0;
}
.postDesc {
    float: right;
    width: 100%;
    clear:both;
    text-align: right;
    padding-right: 5px;
    color: #666;
    margin-top: 5px;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #666;
    padding-right: 10px;
}
.postDesc a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.postSeparator {
    clear: both;
    height: 1px;
    border-top: 1px dotted #666;
    width: 100%;
    clear:both;
    float: right;
    margin: 0 auto 15px auto;
}
.diggit{
    text-align: center;
    width:50px;
    height:40px;
    background:url(http://fq.wc.lt//up/1503755899.png);
    background-size:100% 100%;
}
.buryit{
    font-size:0px;
    width:0;
    height:0;
}
.burynum{
    font-size:0px;
    width:0;
    height:0;
}
/*****主頁文章列表結束**************************/

/*****側邊欄開始********************************/
#sideBar {
    width: 14em;
    min-height: 14em;
    padding: 0px 0px 0px 5px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size:0.7em;
    opacity:0.85;
}
.counter{
}
.notice{
    font-size:xx-small;
}
.btn_my_zzk{
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #a55b97;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #999;
}
.newsItem .catListTitle {
    display: none;
}
.newsItem {
    padding: 15px 0 5px 0px;
    font-weight:bold;
    font-size:14px;
    margin-bottom: 8px;
}
/**日曆控制元件樣式開始**/
#calendar {
    width: 14em;
}
#calendar .Cal {
    width: 100%;
    line-height: 1.5em;
}
.Cal {/**日曆容器table**/
    border: none;
    color: #111;
}
#calendar table a:link, #calendar table a:visited, #calendar table a:active {
    font-weight: bold;
}
#calendar table a:hover {
    color: #7B68EE;
    text-decoration: none;
    background-color: #7B68EE;
}
.CalTodayDay{/**今天日期樣式**/
    color: #EE82EE;
}
#calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上個月、下個月箭頭樣式**/
    font-weight: bold;
    background-color: #7B68EE;
}
.CalDayHeader{
    border-bottom:1px solid #ccc;    
}
.CalTitle{/**日曆年月頭部樣式**/
    width:100%;
    background:#FFF;
    color:black;
    border-bottom:1px solid #666;    
}
/**日曆控制元件樣式結束**/
.catListTitle {
    font-weight: bolder;
    font-family:STCaiyun;
    color:     #B03060;
    line-height: 2em;
    font-size: 150%;
    margin-top: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9f3e8;
    text-align: center;
}
.catListComment {
    line-height: 1.5em;
}
.divRecentComment {
    color: #666;
    margin-bottom:1em;
}
.c_b_p_link_desc{
    color: #666;
    font-size: 30%;
    margin-bottom:1.5em;
}
#sideBarMain ul {
    line-height: 1.5em;
}
.catListEssay{
    font-weight: bolder;
}
.catListTag{
    font-size: 90%;
    font-weight: bolder;
}
.catList{
    font-weight: bolder;
}
.catListFeedback{
    font-weight: bolder;
}
.catListView{
    font-weight: bolder;
}
.recent_comment_title{
    font-weight: bolder;
}
.recent_comment_body{
    font-size: 30%;
}
.recent_comment_author{
    color:#666;
    font-size: 30%;
}
/*****側邊欄結束********************************/


/****檢視文章頁面開始*************************/
#topics {
    width: 100%;
    min-height: 18em;
    padding: 0px 0px 10px 0;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
#topics .postTitle {
    font-size: 200%;
    font-weight: bold;
    border-bottom: 1px solid #999;
    float: left;
    line-height: 1.5em;
    width: 100%;
    text-align: center;
}
.postBody {
    padding: 5px 2px 5px 5px;
    line-height: 1.5em;
    color: #000;
    border-bottom: 1px solid #8686FF;
}
#EntryTag {
    color: #000;
}
#EntryTag a {
    margin-left: 5px;
}
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
    color: #000;
}
#EntryTag a:hover {
    color: #7B68EE;
}
#topics .postDesc {
    float: right;
    width: 100%;
    font-size:0.9em;
    text-align: right;
    padding-right: 5px;
    color: #000;
    margin-top: 5px;
}
.feedback_area_title {
    font-weight: bold;
    margin-top: 20px;
    border-bottom: 1px solid #8686FF;
    margin-bottom: 10px;
    padding-left: 8px;
}
.louzhu {
    background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top;
    padding-right:16px;
}
.layer{
    font-family:STFangsong;
    font-size:15px;
    padding-left: 8px;
}
.feedbackListSubtitle {
    margin-left: 10px;
    color: #666;
    font-size:0.9em;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
    font-weight:bold;
    color: #666;
    font-weight: normal;
}
.feedbackListSubtitle a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.feedbackManage {
    width: 160px;
    text-align: right;
    float: right;
}
.feedbackCon {
    font-weight:bold;
    border-bottom: 1px solid #ccc;
    padding: 15px 18px 20px 50px;
    min-height: 35px;
    _height: 35px;
    margin-bottom: 1em;
    line-height: 1.5em;
    width:80%;
}
#divRefreshComments {
    text-align: right;
    margin-bottom: 10px;
}
.commenttb {
    width: 320px;
}
.cnblogs_code{
}
.comment_actions{
    margin-right:30px;
    font-size:16px;
    font-family:STFangsong;
}
.comment_digg{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
.comment_bury{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
/****檢視文章頁面結束************************

/****列表頁面開始******************************/
.entrylistTitle,.PostListTitle,.thumbTitle{/**幾個分類列表的標題樣式**/
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #8686FF;
    text-align: right;
    padding-bottom: 3px;
    padding-right: 10px;
}

.entrylistDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.entrylistItem {
    min-height: 20px;
    _height: 20px;
    margin-bottom: 30px;
    padding-bottom: 5px;
    width: 100%;
}
.entrylistPosttitle {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #666;
    line-height: 1.5em;
    width: 100%;
    padding-left: 5px;
}
.entrylistPosttitle a:hover {
    text-decoration: none;
}
.entrylistPostSummary {
    margin-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
}
.entrylistItemPostDesc {
    padding-left: 50px;
    text-align: right;
    color: #666;
}
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
    color: #666;
}
.entrylistItemPostDesc a:hover {
    color: #7B68EE;
}
.entrylist .postSeparator {
    clear: both;
    width: 100%;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
}

.pager {
    text-align: right;
    margin-right: 10px;
}
.PostList {
    border-bottom: 1px solid #ccc;
    clear: both;
    min-height: 1.5em;
    _height: 1.5em;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}
.postTitl2 {
    float: left;
    font-size:0.9em;
    color: #666;
}
.postDesc2 {
    color: #666;
    float: right;
    margin-right: ;
    font-size:0.9em;
}
.postText2 {
    clear: both;
    
}
.pfl_feedback_area_title {
    text-align: right;
    line-height: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
}
.pfl_feedbackItem {
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}
.pfl_feedbacksubtitle {
    width: 100%;
    border-bottom: 1px dotted #666;
    height: 1.5em;
}
.pfl_feedbackname {
    float: left;
}
.pfl_feedbackManage {
    float: right;
}
.pfl_feedbackCon {
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pfl_feedbackAnswer {
    color: #F40;
    text-indent: 2em;
}
.tdSentMessage {
    text-align: right;
}
.errorMessage {
    width: 300px;
    float: left;
}

/****列表頁面結束******************************/*/
/****相簿頁面開始******************************/
.divPhoto {
    border: 1px solid #ccc;
    padding: 2px;
    margin-right: 10px;
}

.thumbDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
/****相簿頁面結束******************************/


/*****留言頁面開始*****************************/
#footer {
    text-align: center;
    min-height: 15px;
    _height: 15px;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
}
/*留言檢視頁面的個人資訊*/
.personInfo {
    margin-bottom: 20px;
}
/*留言分頁區域*/
.pages {
    text-align: right;
}
/*****留言頁面結束*****************************/
/*****第三部分結束*******************************/

/**************************************************
第四部分：文章內容常用標籤格式。這個部分是設定作者寫作內容的部分。例如：
如果作者的文章用有p標籤，則可通過這個對這些文章中的p標籤進行設定。前面
的".postBody"明確的指出了這裡樣式的作用範圍。僅僅適用於文章主體部分。
建議這個不要設定過於詳細的細節。因為，一些樣式，一篇文章比較適合的話，
並不能保證所有的文章都適合。
**************************************************/
/*文章內部常用標籤格式*/
.postBody {
    line-height: 1.5em;
}
.postBody p,.postCon  p{
    text-indent: 2em;
    margin: 0 auto 1em auto;
}
.postBody h2{
    font-size: 150%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h3 {
    font-size: 120%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h4{
    font-size:110%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody h5{
    font-size:100%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody a:link,.postBody a:visited,.postBody a:active{
    text-decoration:none;
}
.postCon a:link,.postCon a:visited,.postCon a:active{
    text-decoration:none;
}
.postBody ul,.postCon ul{
    margin-left:2em;    
}

.postBody li,.postCon li{
    list-style-type:disc;
    margin-bottom:1em;
}

.postBody blockquote{
    background:url('/images/comment.gif') no-repeat 25px 0px;
    padding:10px 60px 5px 60px;
    min-height:35px;
    _height:35px;
    line-height:1.6em;
    color:#333;
}
/*****第四部分結束*******************************/
.spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;}
#message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-45px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
.mumu{width:175px;height:246px;cursor: move;
background:url(https://i.loli.net/2017/08/02/598187babf39e.gif) no-repeat;}

部落格側邊欄公告（支援HTML程式碼）（支援 JS 程式碼）

<link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--程式碼放置於</body>上方-->
 
<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, 255"),n:n(i,"count",123)
 
}
 
}
 
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 class="head_img"><img width="160" height="160" alt="我的頭像" src="https://i.loli.net/2017/08/02/598187babf39e.gif" class="img_avatar"></div>
<link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

頁首 HTML 程式碼

<style>#nav { width: 150px; height: 400px; border: 1px solid #D4CD49; position: fixed; left: 0; top: 30% }</style>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right: 78px; bottom: 165px">部落格園</a>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/ECJTUACM-873284962/" style="right: 150px; bottom: 130px">首頁</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/Angel_Kitty" style="right: 10px; bottom: 130px">私信博主</a>
<a name="Tab" id="Tab1" style="right: 120px; bottom: 50px">顯示目錄</a>
<a name="Tab" id="Tab1" style="right: 20px; bottom: 50px">隱藏目錄</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right: 85px; bottom: 10px">管理</a>

頁尾 HTML 程式碼

<div class="fixedIndexs" style="position: fixed; opacity: 0.5; bottom: 300px; display: none"></div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/mouse.js"></script>

<script>
//右鍵選單
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage("祕密通道:<br />    <img src=\"http://pic.sc.chinaz.com/Files/pic/Listfaces/3646/02.gif\"/><br/><a href=\"http://cnblogs.com/zwfymqz\" title=\"自為風月馬前卒\">自為風月馬前卒</a>  ",10000);
}
});
$("#spig").bind("contextmenu", function(e) {
    return false;
});
});

//滑鼠在訊息上時
jQuery(document).ready(function ($) {
    $("#message").hover(function () {
       $("#message").fadeTo("100", 1);
     });
});


//滑鼠在上方時
jQuery(document).ready(function ($) {
    //$(".mumu").jrumble({rangeX: 2,rangeY: 2,rangeRot: 1});
    $(".mumu").mouseover(function () {
       $(".mumu").fadeTo("300", 0.3);
       msgs = ["我隱身了，你看不到我", "我會隱身哦！嘿嘿！", "別動手動腳的，把手拿開！", "把手拿開我才出來！"];
       var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    $(".mumu").mouseout(function () {
        $(".mumu").fadeTo("300", 1)
    });
});


//開始
jQuery(document).ready(function ($) {
    if (isindex) { //如果是主頁
        var now = (new Date()).getHours();
        if (now > 0 && now <= 6) {
            showMessage(visitor + ' 你是夜貓子呀？還不睡覺，明天起的來麼你？', 6000);
        } else if (now > 6 && now <= 11) {
            showMessage(visitor + ' 早上好，早起的鳥兒有蟲吃噢！早起的蟲兒被鳥吃，你是鳥兒還是蟲兒？嘻嘻！', 6000);
        } else if (now > 11 && now <= 14) {
            showMessage(visitor + ' 中午了，吃飯了麼？不要餓著了，餓死了誰來挺我呀！', 6000);
        } else if (now > 14 && now <= 18) {
            showMessage(visitor + ' 中午的時光真難熬！還好有你在！', 6000);
        } else {
            showMessage(visitor + ' 快來逗我玩吧！', 6000);
        }
    }
    else {
        showMessage('歡迎' + visitor + '來到《' + title + '》', 6000);
    }
    $(".spig").animate({
        top: $(".spig").offset().top + 300,
        left: document.body.offsetWidth - 185
    },
    {
        queue: false,
        duration: 1000
    });
});

//滑鼠在某些元素上方時
jQuery(document).ready(function ($) {
    $('h2 a').click(function () {//標題被點選時
        showMessage('萌萌地載入《<span style="color:#0099cc;">' + $(this).text() + '</span>》中，請稍候');
    });
    $('h2 a').mouseover(function () {
        showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》這篇隨筆麼？');
    });
    $('#prev-page').mouseover(function(){
        showMessage('要翻到上一頁嗎?');
    });
    $('#next-page').mouseover(function(){
        showMessage('要翻到下一頁嗎?');
    });
    $('#index-links li a').mouseover(function () {
        showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');
    });
    $('.tbCommentBodys').mouseover(function () {
        showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向評論欄出發吧！');
    });
    $('#submit').mouseover(function () {
        showMessage('確認提交了麼？');
    });
    $('#s').focus(function () {
        showMessage('輸入你想搜尋的關鍵詞再按Enter(回車)鍵就可以搜尋啦!');
    });
    $('#go-prev').mouseover(function () {
        showMessage('點它可以後退哦！');
    });
    $('#go-next').mouseover(function () {
        showMessage('點它可以前進哦！');
    });
    $('#refresh').mouseover(function () {
        showMessage('點它可以重新載入此頁哦！');
    });
    $('#go-home').mouseover(function () {
        showMessage('點它就可以回到首頁啦！');
    });
    $('#addfav').mouseover(function () {
        showMessage('點它可以把此頁加入書籤哦！');
    });
    $('#nav-two a').mouseover(function () {
        showMessage('噓，從這裡可以進入控制面板的哦！');
    });
    $('.post-category a').mouseover(function () {
        showMessage('點選檢視此分類下得所有文章');
    });
    $('.post-heat a').mouseover(function () {
        showMessage('點它可以直接跳到評論列表處.');
    });
    $('#tho-shareto span a').mouseover(function () {
        showMessage('你知道嗎?點它可以分享本文到'+$(this).attr('title'));
    });
    $('#switch-to-wap').mouseover(function(){
        showMessage('點選可以切換到手機版部落格版面');
    });
});


//無聊講點什麼
jQuery(document).ready(function ($) {

    window.setInterval(function () {
        msgs = [ "陪我聊天吧！", "好無聊哦，你都不陪我玩！", "…@……!………", "^%#&*!@*(&#)(!)(", "我可愛吧！嘻嘻!~^_^!~~","誰淫蕩呀?~誰淫蕩?，你淫蕩呀!~~你淫蕩！~~","從前有座山，山上有座廟，廟裡有個老和尚給小和尚講故事，講：“從前有座……”"];
        var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i], 8000);
    }, 15000);
});
//評論資料
jQuery(document).ready(function ($) {
    $("#author").click(function () {
        showMessage("留下你的尊姓大名！");
        $(".spig").animate({
            top: $("#author").offset().top - 70,
            left: $("#author").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#email").click(function () {
        showMessage("留下你的郵箱，不然就是無頭像人士了！");
        $(".spig").animate({
            top: $("#email").offset().top - 70,
            left: $("#email").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#url").click(function () {

        showMessage("快快告訴我你的家在哪裡，好讓我去參觀參觀！");
        $(".spig").animate({
            top: $("#url").offset().top - 70,
            left: $("#url").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
    $("#tbCommentBody").click(function () {
        showMessage("認真填寫哦！不然會被認作垃圾評論的！我的乖乖~");
        $(".spig").animate({
            top: $("#tbCommentBody").offset().top - 70,
            left: $("#tbCommentBody").offset().left - 170
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

var spig_top = 50;
//滾動條移動
jQuery(document).ready(function ($) {
    var f = $(".spig").offset().top;
    $(window).scroll(function () {
        $(".spig").animate({
            top: $(window).scrollTop() + f +300
        },
        {
            queue: false,
            duration: 1000
        });
    });
});

//滑鼠點選時
jQuery(document).ready(function ($) {
    var stat_click = 0;
    $(".mumu").click(function () {
        
            stat_click++;
            if (stat_click > 4) {
                msgs = ["你有完沒完呀？", "你已經摸我" + stat_click + "次了", "非禮呀！救命！OH，My ladygaga"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            } else {
                msgs = ["筋斗雲！~我飛！", "我跑呀跑呀跑！~~", "別摸我，大男人，有什麼好摸的！", "惹不起你，我還躲不起你麼？", "不要摸我了，我會告訴老婆來打你的！", "幹嘛動我呀！小心我咬你！"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            }
        s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
        var i1 = Math.floor(Math.random() * s.length);
        var i2 = Math.floor(Math.random() * s.length);
            $(".spig").animate({
            left: document.body.offsetWidth/2*(1+s[i1]),
            top:  document.body.offsetheight/2*(1+s[i1])
            },
            {
                duration: 500,
                complete: showMessage(msgs[i])
            });
        
    });
});


//顯示訊息函式 
function showMessage(a, b) {
    if (b == null) b = 10000;
    jQuery("#message").hide().stop();
    jQuery("#message").html(a);
    jQuery("#message").fadeIn();
    jQuery("#message").fadeTo("1", 1);
    jQuery("#message").fadeOut(b);
};

//拖動
var _move = false;
var ismove = false; //移動標記
var _x, _y; //滑鼠離控制元件左上角的相對位置
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        _move = true;
        _x = e.pageX - parseInt($("#spig").css("left"));
        _y = e.pageY - parseInt($("#spig").css("top"));
     });
    $(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x; 
            var y = e.pageY - _y;
            var wx = $(window).width() - $('#spig').width();
            var dy = $(document).height() - $('#spig').height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控制元件新位置
            ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});
</script>
<!--部落格精靈 start*-->
<div id="spig" class="spig">
    <div id="message">……</div>
    <div id="mumu" class="mumu"></div>
</div>

<script type="text/javascript">
var isindex=true;
var title="";
var visitor="這位怪蜀黍";
</script>
<!--精靈end*-->

這些做完，效果基本就出來了

部落格園美化介面

部落格園美化介面

部落格園美化日記

部落格園裝飾樣式部落格園美化樣式

部落格園美化

我的部落格園美化

部落格園美化去除預設左側的通知欄、正文全屏、隱藏底部第三方、添加回到頂部按鈕

部落格園美化——全面

部落格園美化工程

隨筆-部落格園美化

部落格園美化：JS實現頁面複製內容時自動新增版權資訊

部落格園美化：新增live2d看板娘

部落格園美化：新增雪花特效

部落格園美化：新增滑鼠點選特效

部落格園美化——左下角插入懸浮音樂外掛

部落格園美化 | 自定義js<01>-新增文章markdown連結一鍵複製按鈕

部落格園美化 | part03-新增目錄

部落格園美化面板

部落格園美化[SimpleMemory主題+tctip外掛]

部落格園美化[SimpleMemory主題+tctip外掛] _

部落格園介面美化

部落格園美化介面

相關推薦