隨便說幾句：
自己一直學的都是 C++和 Java 以及 Python語言，根本不懂高大上的 CSS 和 著名的 HTML5.感覺那些能自己設計那么漂亮的博客的朋友都好厲害。可以自己加上博客公告欄的小寵物和微博以及加上背景音樂，都感覺好牛逼，好高大上，博客的親切感立馬就上來了。
可是我又沒學過 CSS等前端的東西，心想，搞這么漂亮的博客會不會很難啊？那些</class>這些什么鬼？會不會很繁瑣？難道要我把 前端的東西學習一邊才行？
開始：
然而並非如此，我不會前端，可是我也可以弄：小寵物和微博以及加上背景音樂。
一：加入微博
首先，在 http://open.weibo.com/connect 登錄自己的微博，然后點擊“微博直播”：
進入后，在左邊欄，點擊“微博秀”后：
設置好自己想要的樣式后點擊下面的 “復制代碼”：
然后進入到博客園的后台設置 --》 博客設置：
在博客側邊欄公告處寫入：
<div id="weiboIframe"> </div>
然后把剛才復制過來的代碼粘貼到<div> </div> 之間，保存，就OK了。
二 . 添加背景音樂：
參考博客：http://www.07net01.com/2015/08/890253.html
在歌曲/歌單頁面下，點擊“生成外鏈播放器”（網易）就可以看到歌曲的HTML代碼了。
把代碼復制到剛才的 博客側邊欄公告的編輯器 就可以了：
<embed border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=18607260&auto=1&height=66"></embed>
三. 領養寵物：
到這個網站去：http://abowman.com/google-modules/找到自己想要的寵物:
復制代碼：
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?" width="290" height="300"> <param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?" /> <param name="AllowScriptAccess" value="always" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="tl" /></object>
同樣是放到：博客園側邊欄的編輯器里。
四. 添加回到頂部
在"頁面定制CSS代碼"中添加如下css樣式，當然你可以改為自己喜歡的樣式
#back-to-top { background-color: #00CD00; bottom: 0; box-shadow: 0 0 6px #00CD00; color: #444444; padding: 10px 10px; position: fixed; right: 50px; cursor: pointer; }
在"頁腳Html代碼"中添加如下代碼，可以將文字改為圖片
<span id="back-to-top"><a href="#top">TOP</a></span>
五. 添加分享
添加分享的方法可以自己搜索一下“百度分享”，然后一步一步跟着就可以了，同樣是把得到的代碼復制到 公告欄編輯器里。
需要注意的是，這個需要向du du發郵件申請開通 js 權限
六. 添加目錄
沒有文章目錄的文章不是好文章。（一大堆文字，條理不清淅，讓人怎么看？）
Tips:
博客園中博文編輯器的第二級標題作為文章的第一級標題（當然也可以自己更改，不過我覺得，標題太大了會嚇到小朋友的）
支持文中返回跳轉，在閱覽二級標題下的內容時可以跳轉回到目錄
支持二級目錄
<script language="javascript" type="text/javascript"> // 生成目錄索引列表 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html // modified by: zzq function GenerateContentList() { var mainContent = $('#cnblogs_post_body'); var h2_list = $('#cnblogs_post_body h2');//如果你的章節標題不是h2,只需要將這里的h2換掉即可 if(mainContent.length < 1) return; if(h2_list.length>0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul>'; for(var i=0; i<h2_list.length; i++) { var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>'; $(h2_list[i]).before(go_to_top); var h3_list = $(h2_list[i]).nextAll("h3"); var li3_content = ''; for(var j=0; j<h3_list.length; j++) { var tmp = $(h3_list[j]).prevAll('h2').first(); if(!tmp.is(h2_list[i])) break; var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; $(h3_list[j]).before(li3_anchor); li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; } var li2_content = ''; if(li3_content.length > 0) li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; else li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; content += li2_content; } content += '</ul>'; content += '</div><p> </p>'; content += '<p style="font-size:18px"><b>正文</b></p>'; if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } var qqinfo = '<p style="color:navy;font-size:12px">討論QQ群：135202158</p>'; $(mainContent[0]).prepend(qqinfo); } GenerateContentList(); </script>
引用自：【博文】
使用方法：登錄到博客園之后，打開博客園的后台管理，切換到“設置”選項卡，將上面的代碼，粘貼到 “頁腳HTML代碼” 區保存即可。
注意：上述js代碼中提取的h3作為章節的標題，如果你的標題不是h3請在代碼注釋的地方自行修改。該代碼除了在文章的最開始生成目錄索引之外，還會在每一個章節最后右下角(也就是下一個章節標題的右上角)會生成一個“回到頂部”的鏈接，以方便讀者回到目錄。本篇文章的目錄結構就是自動生成的效果，如果你覺得有用，就趕快試用一下吧。
七. 讓評論框動起來
#div_digg{ position:fixed; bottom:5px; width:140px; right:390px; border:2px solid #6FA833; padding:10px; background-color:#fff; border-radius:5px 5px 5px 5px !important; box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }
直接把代碼放到博客園設置的定制CSS那里就 OK 了。
好了，大功告成，不過，博客版面畢竟是使用別人的模板，想自定義的話比較難，所以，作為顏值控，學習一下 前端也無妨哈。。。