當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

博客园博客排版（js样式实例）

發布時間：2023/12/18 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了博客园博客排版（js样式实例）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

昨天在博客園中看到一位大神發的博客園樣式排版博客，我一看。媽呀，太漂亮了，二話不說趕快學起，昨天我花了一天的時間，終于把我的博客也弄得有一丟丟像樣了，有好東西，當然要分享給各位；

大神的鏈接：https://www.cnblogs.com/hafiz/p/9276689.html，里面講的很細很細，每一個功能的講解都有。

大家如果想仔細研究每一個功能的實現就看一下大神的博客，想省事就看我的，簡單，快捷，省事。當然我在他的基礎上加了一些功能如：背景音樂，背景圖片，電子時間，鼠標點擊特效等等

效果圖如下：大家也可以訪問我博客主頁查看

博客排版

1.找到你博客的設置，位置如圖

2.首先你得申請一下你博客園的js權限；

不申請，你們的js代碼是沒有用的，申請成功是這個樣子的

3.找到頁面定制CSS代碼區域，勾選禁用默認CSS；

?4.在里面粘貼下面代碼css代碼；

@font-face {font-family: 'FontAwesome';font-style: normal;font-weight: normal;src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); } * {margin: 0;padding: 0; } body {background: #eee;color: #444;font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;font-size: 14px;text-shadow: 0 0 1px transparent;color:#505050; } @media screen and (max-width: 1260px) {body {margin: 0px;} } @media screen and (max-width: 600px) {body {font-size: 13px;} } h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } h1 {font-size: 1.8em; } h2 {font-size: 1.5em; } h3 {font-size: 1.3em; } a {text-decoration: none;color: #258fb8; } a:hover {text-decoration: underline; } #home{margin: 0 auto;width: 85%;background-color: #fff;padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);border-radius: 20px; } #tbCommentBody {width: 100%;} #blogTitle {width:23%;margin-top: -10px;text-align: center;} .alignright {float: right;} #header, #main, #footer {width: 100%;margin: 0 auto;} @media screen and (max-width: 1260px) {#main {width: 95%;} } #mainContent {width: 75%;float: left;margin-left: 10px; } @media screen and (max-width: 1260px) {#main-col {width: 100%;margin-right: -300px;} } @media screen and (max-width: 900px) {#main-col {margin-right: 0;float: none;} } @media screen and (max-width: 1260px) {#wrapper {margin-right: 300px;} } @media screen and (max-width: 900px) {#wrapper {margin-right: 0;} } #header {text-shadow: 0 0 1px #fff;margin: 20px auto 30px;position: relative;height: 60px;color: #999; } #header a {color: #999; } #header a:hover {color: #258fb8;text-decoration: none; } #header h1 {font-weight: normal;font-size: 30px; } #header h2 {font-weight: normal;font-size: 0.9em;margin-top: 10px;margin-left: 30px; } #header #navigator {font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;width: 100%;font-size: 16px;border-bottom: 1px solid #ededed;border-top: 1px solid #ededed;height: 50px;line-height: 50px;clear: both;margin-top: 25px; } #header #navigator ul {list-style: none; } #header #navigator ul li {float: left;width: 10%;text-align: center;margin-right: 15px; } #header .blogStats {float: right;font-size: 13px; } .topicListFooter {margin-top:30px;margin-bottom: 30px;margin-right: 0 !important; } .topicListFooter a {display: inline !important;padding: 10px 20px;background: #ddd;color: #999;font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;text-shadow: 0 0 1px #fff;border-radius: 5px; } .topicListFooter a:hover {background: #258fb8;color: #fff;text-decoration: none;text-shadow: none; } .topicListFooter .prev:before {content: '\f053';padding-right: 10px;font-family: FontAwesome; } .topicListFooter .next:after {content: '\f054';padding-left: 10px;font-family: FontAwesome; } article {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;background: #fff; } article.page {padding-left: 20px; } article.page .icon {display: none; } .postIcon:before {content: '\f016'; } article.photo .icon:before {content: '\f030'; } article.link .icon:before {content: '\f0c1'; } article.link .title a:after {content: '\f08e';color: #999;font: 12px FontAwesome;padding-left: 10px;vertical-align: super; } /******************************************以下自定義樣式***********************************************/ #MySignature{ border-top: 2px solid #ccc;padding-top: 20px; } .pager{border-bottom: 1px dashed #ddd;padding-bottom: 30px;margin-bottom: -10px; } #blog-calendar{width:0px;height:0px;display: none !important; } #TopViewPostsBlock ul li{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;display: inline-block;height: 30px;line-height: 30px; } .day .dayTitle{display: none !important; } /* 去掉廣告 */ #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{display: none !important; } /******************************************以上自定義樣式***********************************************/ .postTitle, .entrylistPosttitle {font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 1.8em;padding: 20px 20px 15px 0px;background: #fff;border-radius: 10px 10px 0px 0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .entrylistPostSummary, .postCon, .postBody {padding: 0 20px 15px 0px;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 0 2px 0 #ddd;background: #fff;position: relative; } .postDesc, .entrylistItemPostDesc {padding: 0px 20px 15px 0px;color: #999;font-size: 0.9em;line-height: 16px;position: relative;min-height: 16px;background: #fff;border-bottom: 1px dashed #ccc; } /* 去掉博客園自帶日歷控件 */ #blog-calendar {display: none; } @media screen and (max-width: 600px) {.postCon {padding-left: 0px;} } .postIcon {height: 0px;margin-right: 25px;position: relative;top: 25px;left: 25px;color: #258fb8; } @media screen and (max-width: 600px) {article header .icon {display: none;} } .postIcon:before {position: absolute;font: 32px FontAwesome;top: 0;left: 0;width: 32px;text-align: center; } article header time {color: #999;font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;margin-bottom: 5px;display: block;line-height: 1; } article header .title {font-weight: normal; } article header .title a {color: #444; } article header .title a:hover {color: #258fb8;text-decoration: none; } #cnblogs_post_body {text-align: justify;line-height: 1.6; } #cnblogs_post_body p, #cnblogs_post_body blockquote, #cnblogs_post_body ul, #cnblogs_post_body ol, #cnblogs_post_body dl, #cnblogs_post_body table, #cnblogs_post_body iframe, #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5, #cnblogs_post_body h6, #cnblogs_post_body .video-container {margin-top: 15px; } #cnblogs_post_body blockquote {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;font-style: italic;font-family: "Georgia", serif;font-size: 1.2em;padding: 0 30px 15px; } #cnblogs_post_body blockquote footer {border-top: none;font-size: 0.8em;line-height: 1;margin: 20px 0 0;padding-top: 0; } #cnblogs_post_body blockquote footer cite:before {content: '—';color: #ccc;padding: 0 0.5em; } #cnblogs_post_body code, #cnblogs_post_body pre {font-family: Monaco, Menlo, Consolas, Courier New, monospace; } #cnblogs_post_body code {background: #eee;color: #666;padding: 0 5px;margin: 0 2px;font-size: 0.9em;border: 1px solid #ddd;-webkit-border-radius: 3px;border-radius: 3px; } #cnblogs_post_body pre {background: #eee;overflow: auto;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px; } #cnblogs_post_body pre code {background: none;padding: 0;margin: 0;border: none;-webkit-border-radius: 0;border-radius: 0; } #cnblogs_post_body ul ul, #cnblogs_post_body ol ul, #cnblogs_post_body dl ul, #cnblogs_post_body ul ol, #cnblogs_post_body ol ol, #cnblogs_post_body dl ol, #cnblogs_post_body ul dl, #cnblogs_post_body ol dl, #cnblogs_post_body dl dl {margin-top: 0; } #cnblogs_post_body h1, #cnblogs_post_body h2 {font-weight: bold;border-bottom: 1px solid #ddd;padding-bottom: 10px;margin-top: 20px; } #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5, #cnblogs_post_body h6 {font-weight: normal;background: #eee;border-radius: 6px;color: Red;font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;min-height: 25px;line-height: 25px;margin: 18px 5px !important;padding: 8px;opacity: 0.8;border: 1px dashed #aaa; } #cnblogs_post_body h4 {padding-left:20px !important;color:Green !important; } .postBody img, .entrylistPostSummary img, .postCon img, .postBody video {max-width: 100%;height: auto;border: none; } #cnblogs_post_body iframe {border: none; } #cnblogs_post_body .caption {display: block;margin-top: 5px;color: #999;position: relative;font-size: 0.9em;padding-left: 25px; } #cnblogs_post_body .caption:before {content: '\f040';position: absolute;font: 1.3em FontAwesome;position: absolute;left: 0;top: 3px; } #cnblogs_post_body .video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; } #cnblogs_post_body .video-container iframe, #cnblogs_post_body .video-container object, #cnblogs_post_body .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin-top: 0; } #cnblogs_post_body .pullquote {float: right;border: none;padding: 0;margin: 1em 0 0.5em 1.5em;text-align: left;width: 45%;font-size: 1.5em; } #blog-comments-placeholder, #comment_form {padding: 20px;background: #fff;-webkit-box-shadow: 1px 10px 10px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 50px;border: 1px solid #ccc;padding-top:0; } .feedback_area_title {margin-bottom: 15px;font-size: 1.8em; } .feedbackItem {border-bottom: 1px dashed #CCC;margin-bottom: 10px;padding: 5px; } .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; } #ad_under_post_holder {display: none; } .entrylistTitle {color: #999;font-weight: normal;margin-bottom: 30px;text-shadow: 0 0 1px #fff; } .entrylistTitle:before {font-family: FontAwesome;content: '\f07b';padding-right: 15px; } .archive {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;border-bottom: 1px solid #ddd;margin-bottom: 50px; } .archive article {-webkit-box-shadow: none;box-shadow: none; } .archive article .post-content {margin-bottom: 0; } #sideBar{width: 22%;line-height: 1.8em;float: right; } @media screen and (max-width: 900px) {#sideBar {float: none;width: 100%;} } .catListLink, .catListMyTeams, .catListComment, .catListFeedback {display: none; } .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {background: #fff;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 30px;word-wrap: break-word;border-radius: 10px;margin-top: 10px;border: 1px solid #ddd; } #blog-sidecolumn h3, .newsItem h3 {padding: 15px 20px;font-size: 1em;border-bottom: 1px solid #ddd;font-weight: normal; } #blog-sidecolumn ul, .newsItem #blog-news {font-size: 0.9em;padding: 15px 20px; } #blog-sidecolumn ul, #blog-sidecolumn ol, #blog-sidecolumn dl {list-style: none; } #blog-sidecolumn ul ul, #blog-sidecolumn ol ul, #blog-sidecolumn dl ul, #blog-sidecolumn ul ol, #blog-sidecolumn ol ol, #blog-sidecolumn dl ol, #blog-sidecolumn ul dl, #blog-sidecolumn ol dl, #blog-sidecolumn dl dl {list-style: disc;margin-left: 20px; } #q {background: #fff;font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;font-style: italic;font-size: 1em;padding: 10px 15px;border: 1px solid #ddd;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;color: #999;height: 100%; } #q:focus {color: #444; } /*隱藏搜索框中的無用組件*/ .mySearch {display: none; }#sideBar .tag small {margin-left: 15px;color: #999; } #sideBar .tag small:before {content: '('; } #sideBar .tag small:after {content: ')'; } #sideBar .twitter li {border-bottom: 1px solid #ddd;padding: 15px 20px;font-size: 0.9em; } #sideBar .twitter li:last-of-type {border-bottom: none; } #sideBar .twitter small {display: block;margin-top: 10px;color: #999;line-height: 1; } #sideBar .tagcloud .entry {padding-right: 5px; } #sideBar .tagcloud a {margin-right: 10px;display: inline-block; } #footer {color: #999;margin-bottom: 50px;font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;text-shadow: 0 0 1px #fff;text-align:center;margin: 30px 0px 50px; } .entry .gist {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;color: #666; } .entry .gist .gist-file {border: none;font-family: inherit;margin: 0;font-size: 0.9em; } .entry .gist .gist-file .gist-data {background: none;border-bottom: none; } .entry .gist .gist-file .gist-data pre {padding: 0 !important;font-family: Monaco, Menlo, Consolas, Courier New, monospace; } .entry .gist .gist-file .gist-meta {background: none;color: #999;margin-top: 5px;padding: 0;text-shadow: 0 0 1px #fff;font-size: 100%; } .entry .gist .gist-file .gist-meta a {color: #258fb8; } .entry .gist .gist-file .gist-meta a:visited {color: #258fb8; } figure.highlight {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;position: relative;font-size: 0.9em; } figure.highlight figcaption {color: #999;margin-bottom: 5px;text-shadow: 0 0 1px #fff; } figure.highlight figcaption a {position: absolute;right: 15px; } figure.highlight pre {border: none;padding: 0;margin: 0; } figure.highlight table {margin-top: 0;border-spacing: 0; } figure.highlight .gutter {color: #999;padding: 7px 10px 7px 5px !important;border-right: 1px solid #ddd;text-align: right; } figure.highlight .code {padding: 7px 7px 7px 10px !important;border-left: 1px solid #fff;color: #666; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc {color: #93a1a1;font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title {color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {color: #2aa198; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl, pre .literal, pre .id {color: #268bd2; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type {color: #b58900; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title {color: #cb4b16; } pre .deletion {color: #dc322f; } .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right; } .cnblogs_code_toolbar {display: none; } #cnblogs_post_body {overflow: hidden; } #cnblogs_post_body ol {padding-left: 40px; } #cnblogs_post_body ul {margin-left: 35px; } .fixedReadRank {position: fixed;top: 20px;width: 270px; } .fixedRecRank {position: fixed;top: 360px;width: 270px; } figure.highlight {margin-top: 0;padding: 0; } figure table {width: 100%;margin: 0 !important; } #cnblogs_post_body pre {padding: 0; } #cnblogs_post_body th, #cnblogs_post_body td {padding: 0; } .cnblogs_code pre {padding: 7px 15px !important;background: #f5f5f5;border: 0;margin-top: 0; } .cnblogs_code th {border: 1px solid silver;padding: 3px; } .cnblogs_code {padding: 0; } /*評論標題*/ .feedback_area_title {padding:10px;font-size:24px;font-weight:bold;color:#aaa;border-bottom:1px dashed #ccc; } .feedbackListSubtitle {font-size:12px;color:#888; } .feedbackListSubtitle a {color:#888; } .comment_quote {background: #eee;padding: 15px;border: 1px dashed #aaa;border-radius: 5px; } #commentform_title {color:#aaa;background-image:none;background-repeat:no-repeat;margin-bottom:10px;padding:10px 20px 10px 10px;font-size:24px;font-weight:bold;border-bottom:1px dashed #ccc; } /*評論框*/ #comment_form {margin:10px 0;padding:25px;border-radius: 10px;height: 343px;overflow: hidden; } .commentform {margin:10px 0;padding:10px 20px;background:#fff; } /*評論輸入域*/ #tbCommentBody {font-family:'MIcrosoft Yahei';margin-top:10px;background:white;color:#333;border:2px solid #fff;box-shadow:inset 0 0 8px #aaa;height:120px;font-size:14px;min-height:120px;border-radius: 10px; } /*評論條目*/ .feedbackItem {font-size:14px;line-height:24px;margin:10px 0;padding:20px;padding-top:5px; } .feedbackListSubtitle {font-weight:normal; }/*green_channel*/ #green_channel {text:align:right;padding-left:0px;font-weight:normal;font-size:13px;width:100%;border:1px dashed #ccc;color:#fff;border-radius:4px;margin:5px auto; } @media screen and (max-width: 768px) {body {font-size: 13px;}#main{padding:0px !important;}#mainContent{width: 96%;float: left;margin: 0px 2%;}#sideBar {display: none;}#blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;}#header {height:auto !important;margin: 20px auto 5px;}#header #navigator {width: 100%;text-align: center;float:none;}#header #navigator ul {width: 100%;margin-left: 6%;}#header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}.postTitle, .entrylistPosttitle {font-size:14px;padding: 20px 20px 15px 0px;}.postDesc, .entrylistItemPostDesc {padding: 0px 20px 15px 0px;}#green_channel {padding:0px !important;}#blog_stats {display: none;} } #blog-news label {box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px; } div.commentform textarea.comment_textarea {padding: 10px; } #tbCommentBody{width:98%; } #cnblogs_post_body h3:hover {color: green;font-size: large;font-weight: bold; }/* 文章title自定義帶動畫樣式 */ .postTitle {font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;clear: both;background-color: #FBF9F9;margin-bottom: 8px;padding-top: 5px;padding-bottom: 5px;margin-top: 20px;border-left: 3px solid #21759b;padding-left: 20px;font-size: 20px;border-radius:0px; } .postTitle a:hover {text-decoration: none;margin-left: 20px;color: #E00000; } .postTitle a:link, .postTitle a:visited, .postTitle a:active {transition: all 0.4s linear 0s; }/*scroll to top*/ #scrollTop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0 } #scrollTop .level-2{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; display:none;height:250px;opacity:0;z-index:1 } #scrollTop .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2 } #scrollTop{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;cursor:default;display:block;height:180px;overflow:hidden;position:fixed;right:60px;top:70%;width:149px;z-index:11;margin:-125px 0 0;padding:0 }/*好看的滾動條*/ ::-webkit-scrollbar{width:10px!important;height:10px!important;-webkit-appearance:none; } ::-webkit-scrollbar-thumb{height:5px;border:1px solid transparent;border-top:none;border-bottom:none;-webkit-border-radius:6px;background-color:rgba(0,0,0,.3);background-clip:padding-box; }#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; }img {border: 0;height: 146px;width: inherit;max-width: 80%; }body { color: #000; background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp ) fixed; background-size: 100%; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; min-height: 101%; }#blogLogo{height: 0; }h2 {text-align: center;box-shadow: 10px 10px 5px #888888;background-color: #5FBDCE;color: #015666; } View Code

5.找到‘’博客側邊欄公告（支持HTML代碼）（支持JS代碼）‘’，在里面加入如下代碼；

6.找到“頁首Html代碼”，加入下面的代碼

7.找到“頁腳Html代碼”，加入下面的代碼

8.點擊保存，你的界面就將和我一樣；

定制自己的界面

1.背景圖片

在定制CSS代碼區域，找到如下代碼，將“https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp”位置的代碼更換為你想更改的“背景圖片的地址”

body {
color: #000;
background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
min-height: 101%;
}

2.更換背景音樂

?a.

在“博客側邊欄公告（支持HTML代碼）（支持JS代碼）”中找到如下代碼；

b.

進入網易云官網，找到你想設置為背景音樂的音樂，點擊"生成外鏈播放器"，假如是下面的這樣子，說明要收費

c.

我們選擇能夠生成外鏈的歌曲，當然也可以選多首一起生成外鏈,就像這樣

d.點擊生成外鏈

我們選擇flash插件的版本，粘貼HTML代碼，替換我們找到的代碼。大功告成。

　　9.15號以后，網易云音樂音樂也不予許設置外部鏈接。所以我又新弄了一個背景音樂如下：

3.替換右側頭像

a.

在“博客側邊欄公告（支持HTML代碼）（支持JS代碼）”中找到如下代碼；

b.

將”https://files.cnblogs.com/files/clwydjgs/touxiang.bmp“替換成你頭像的地址，將"https://www.cnblogs.com/clwydjgs/"替換為你點擊頭像想要鏈接的地址；

4.更換打賞里面的付款碼

a.

在”頁首Html代碼“區域找到如下代碼；

b.

將自己的微信和支付寶的付款碼，保存到網絡上或者上傳到文件中，如下（點擊即可獲取圖片地址）

c.

將代碼中的”https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp“替換成你的支付寶付款碼圖片地址

　將'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'替換為你微信的付款碼地址，大功告成

4.更換”置頂“圖片

a.

在頁面定制CSS代碼區中找到如下CSS代碼：

/*scroll to top*/#scrollTop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0}#scrollTop .level-2{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; display:none;height:250px;opacity:0;z-index:1}#scrollTop .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2}#scrollTop{ background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;cursor:default;display:block;height:180px;overflow:hidden;position:fixed;right:0;top:90%;width:149px;z-index:11;margin:-125px 0 0;padding:0}

b.

跟換“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”和“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”為你想替換的圖片的新地址

?5.鼠標點擊特效

在頁首去加入下面代碼

1 <script type="text/javascript"> 2 (function(window, document, undefined) { 3 var hearts = []; 4 window.requestAnimationFrame = (function() { 5 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 6 function(callback) { 7 setTimeout(callback, 1000 / 60); 8 } 9 })(); 10 init(); 11 function init() { 12 css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); 13 attachEvent(); 14 gameloop(); 15 } 16 function gameloop() { 17 for (var i = 0; i < hearts.length; i++) { 18 if (hearts[i].alpha <= 0) { 19 document.body.removeChild(hearts[i].el); 20 hearts.splice(i, 1); 21 continue; 22 } 23 hearts[i].y--; 24 hearts[i].scale += 0.004; 25 hearts[i].alpha -= 0.013; 26 hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color; 27 } 28 requestAnimationFrame(gameloop); 29 } 30 function attachEvent() { 31 var old = typeof window.onclick === "function" && window.onclick; 32 window.onclick = function(event) { 33 old && old(); 34 createHeart(event); 35 } 36 } 37 function createHeart(event) { 38 var d = document.createElement("div"); 39 d.className = "heart"; 40 hearts.push({ 41 el: d, 42 x: event.clientX - 5, 43 y: event.clientY - 5, 44 scale: 1, 45 alpha: 1, 46 color: randomColor() 47 }); 48 document.body.appendChild(d); 49 } 50 function css(css) { 51 var style = document.createElement("style"); 52 style.type = "text/css"; 53 try { 54 style.appendChild(document.createTextNode(css)); 55 } catch(ex) { 56 style.styleSheet.cssText = css; 57 } 58 document.getElementsByTagName('head')[0].appendChild(style); 59 } 60 function randomColor() { 61 return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"; 62 } 63 })(window, document); 64 </script> View Code

鼠標點擊特效傳送門?https://www.cnblogs.com/yadongliang/p/9318639.html?

6.增加看板娘：

在博客側邊欄公告加入如下代碼：

說了那么多，就是希望大家能夠讓自己的博客美觀大方，謝謝大家，歡迎大家提意見。

溫馨提示：

這個版本在手機端，目錄會遮住文章的內容，已提供解決辦法：
你真的了解博客園的目錄么。。

小舟從此逝，江海寄余生。 --狐貍

總結

以上是生活随笔為你收集整理的博客园博客排版（js样式实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：智能语音爬天井
下一篇：使用curl完成POST数据给飞信接口