注冊博客園已經老久老久了，現在依然是個老菜鳥。最近開始嘗試着寫寫博客，一來可以督促自己，二來可以回顧自己在過去到底學了些什么。看到很多人的博客都很炫，自己也就開始慢慢摸索。這里把自己摸索的一些經驗總結一下。
目錄
一、編輯器
1.鏈接
我們很多時候需要引用別人或自己以前的代碼。這里可以很方便的加上鏈接。
一個添加鏈接 一個取消鏈接
選中要鏈接的文字右鍵就可以選中鏈接。
填入URL地址，目標一般選擇在新窗口打開。
2.書簽
插入書簽
寫入書簽名
這樣可以在文章開始寫目錄 跳到任意的書簽。右鍵插入鏈接的時候可以綁定到書簽。
3.html
點擊
可以看到源碼，任意修改。
4.插入代碼
這里可以選中編程語言。如果代碼量比較多可以全部折疊。
二、后台設置
1.頁面定制CSS代碼
這里就可以和前面編輯器聯合起來。在編輯器里面的文字選中格式時
如果選擇的是標題 那么對應的是<h>標簽，這樣就可以在用CSS控制其樣式。
顯示效果，風格統一的小標題。
2.公告欄
公告欄一般大家都是貼上自己的靚照，加上自己的簡單介紹。
還有的就是掛個漂亮的flash。
例1：
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
例2：
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160"> <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> <param name="AllowScriptAccess" value="always"> <param name="wmode" value="opaque"></object> <span style="color: #3E8BD6;font-size: 9pt;">求投食~（點圖即可）</span>
補充：發現新大陸 好多時鍾flash 地址
例3：
還可以貼上
<!--把“XXXXXXXX”替換成你的QQ號--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=XXXXXXXX&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:XXXXXXXX:13" alt="有事您Q我" title="有事您Q我"></a>
例4：
還可以貼上你的主頁被訪問次數
先注冊
<div style="font-size:20px;font-weight:bold;">訪次: <a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&c=XXXXXXXX" alt="AmazingCounters.com"></a> 次</div>
例5：
園友補充 這個詳細記錄了ip什么 功能詳細 強大 http://www.clicki.cn/
3.頁首Html代碼
這個我見得比較多的就是大家的GitHub，源碼管理。
如：
這里還有很多別的樣式圖片 （注意，要將上圖鏈接中的you換成自己的在Github上的賬號）
4.開通js權限
博客園默認是沒有開通js權限的。可以向管理員申請開通。郵箱：contact@cnblogs.com
開通js權限后可以做很多事。
如：在公告欄中自己寫個日歷或者時鍾表什么的。我的就是自己加了個時鍾表
時鍾代碼
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 </head> 7 <body> 8 <div style="text-align: center; color: #ffffff;"> 9 <canvas id="canvas" height="160" width="160"> 10 您的瀏覽器不支持html5的canvas 11 </canvas> 12 <div style="height: 10px"> 13 </div> 14 <div style="background-color: #0094ff;"> 15 <div id="div1"> 16 </div> 17 <div id="div2"> 18 </div> 19 </div> 20 </div> 21 <script type="text/javascript"> 22 window.onload = function () { 23 var canvas = document.getElementById("canvas"); 24 var can = canvas.getContext("2d"); 25 var radius = 80; //半徑 26 var centre = [80, 80]; //中心點 27 28 setInterval(function () { 29 mydrawclock(); 30 31 }, 1000); 32 // mydrawclock(); 33 34 function mydrawclock() { 35 //清空畫布 36 can.clearRect(0, 0, 500, 500); 37 //鍾的大小（圓） 38 can.fillStyle = "#ebf0eb"; 39 can.beginPath(); 40 can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true); 41 can.closePath(); 42 can.fill(); 43 //中心點 44 can.fillStyle = "#0094ff"; 45 can.beginPath(); 46 can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true); 47 can.closePath(); 48 can.fill(); 49 //畫鍾 寬度 度數 顏色 長度 50 function drawclock(w, d, c, l) { 51 can.beginPath(); 52 can.strokeStyle = c; 53 can.lineWidth = w; 54 can.moveTo(centre[0], centre[1]); 55 can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d)); 56 can.stroke(); 57 } 58 59 var date = new Date(); 60 //因為畫圓是從3點鍾方向開始的 所以要減去 61 var hours = date.getHours(); 62 var minutes = date.getMinutes(); 63 var seconds = date.getSeconds(); 64 var day = date.getDay(); 65 66 drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33); 67 drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22); 68 drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1); 69 70 document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds; 71 72 switch (day) { 73 case 0: 74 day = "星期天"; 75 break; 76 case 1: 77 day = "星期一"; 78 break; 79 case 2: 80 day = "星期二"; 81 break; 82 case 3: 83 day = "星期三"; 84 break; 85 case 4: 86 day = "星期四"; 87 break; 88 case 5: 89 day = "星期五"; 90 break; 91 case 6: 92 day = "星期六"; 93 break; 94 default: 95 break; 96 } 97 98 document.getElementById("div2").innerHTML = day; // "</br>" + day; 99 // centre[0], centre[1] 100 //畫分鍾刻度 101 for (var i = 0; i < 60; i++) { 102 var angle = i * 6 * Math.PI / 180; 103 can.strokeStyle = "red"; 104 can.beginPath(); 105 can.lineWidth = 1; 106 can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle)); 107 can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle)); 108 can.stroke(); 109 } 110 //畫時鍾刻度 111 for (var i = 0; i < 12; i++) { 112 var angle = i * 30 * Math.PI / 180; 113 can.strokeStyle = "#0094ff"; 114 can.lineWidth = 2; 115 can.beginPath(); 116 can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle)); 117 can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle)); 118 can.stroke(); 119 } 120 } 121 122 123 } 124 </script> 125 </body> 126 </html>
5.推薦按鈕
原本的推薦按鈕是在最底下，不熟悉的人有時候可能找都找不到。
為了方便我們可以設置樣式，使之懸浮。
/*快速評論*/
#div_digg {
position: fixed;
bottom: 10px;
right: 15px;
border: 2px solid #ECD7B1;
padding: 10px;
width: 140px;
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);
}
如果開通了js權限的話，我們還可以動態添加別的快捷按鈕。
如：關注，回到頂部，快速評價。
1 <script type="text/javascript"> 2 /** 3 不知道為什么頁面加載完成時還讀不到div_digg。可能也是動態生成的。 4 所以這里只能用定時器 不斷的讀取，當讀取到了再給它動態添加快捷按鈕 5 **/ 6 7 //自定義 定時器[當元素加載完成是執行回調函數] 8 function customTimer(inpId, fn) { 9 if ($(inpId).length) { 10 fn(); 11 } 12 else { 13 var intervalId = setInterval(function () { 14 if ($(inpId).length) { //如果存在了 15 clearInterval(intervalId); // 則關閉定時器 16 customTimer(inpId, fn); //執行自身 17 } 18 }, 100); 19 } 20 } 21 22 //頁面加載完成是執行 23 $(function () { 24 customTimer("#div_digg", function () { 25 var div_html = "<div class=''>\ 26 <a href='javascript:void(0);' onclick='c_follow();'>關注</a>\ 27 | \ 28 <a href='#top'>頂部</a>\ 29 | \ 30 <a href='javascript:void(0);' onclick=\" $('#tbCommentBody').focus();\">評論</a>\ 31 </div>"; 32 $("#div_digg").append(div_html); 33 //tbCommentBody 34 }); 35 }); 36 </script>
ps：平時看大家的博客看得特爽。今天才知道原來寫博客是件費時又費力的事情。不過寫博客的好處也只有誰寫誰知道！
大家如果有自己的竅門謝謝分享到評論區。
-----------------------------------------------------分割線---------------------------------------------------------------------------------------
有朋友問代碼具體放哪里，有朋友問放入了代碼為什么沒有效果。那么我在這里詳細說說。
1.為什么沒有效果
注意沒有效果很有可能是沒有開通js權限。那么怎么測試自己是否有js權限呢？很簡單放入一段測試代碼就ok了。
<script type="text/javascript">console.log("測試成功~");</script>
把這句代碼放入“頁腳Html代碼”保存即可。然后刷新你的頁面。按F12點擊Console，是否有打印了“測試成功”。（博客園貌似屏蔽了alert函數，所以不能彈出測試。）
如果沒有，那么你可以發郵件到contact@cnblogs.com確認是否開通，沒有開通的話可以申請開通。
2.代碼具體放哪里
具體步驟圖片分解
公告，頁首和腳本地方都可以放html和js代碼。
這里最后注意了！！之前我沒有測試 原來代碼直接貼進去是有問題的。不知道博客園有什么限制還是什么。
像我這樣引用js是沒有問題的。至於你的js代碼放哪里？你可以上傳到博客園的文件，也可以用https://git.oschina.net 或 https://github.com