博客園的基礎設置 博客園頁面設置

博客園頁面設置

閱讀目錄

• 目錄
• 1、編輯器
• 1.連接
• 2.書籤
• 3.html
• 4.插入代碼
• 2、後臺設置
• 1.頁面定製CSS代碼
• 2.公告欄
• 例1：
• 例2：
• 例3：
• 例4：
•  例5：
• 3.頁首Html代碼
• 4.開通js權限
• 5.推薦按鈕
• 1.爲何沒有效果
• 2.代碼具體放哪裏

註冊博客園已經老久老久了，如今依然是個老菜鳥。最近開始嘗試着寫寫博客，一來能夠督促本身，二來能夠回顧本身在過去到底學了些什麼。看到不少人的博客都很炫，本身也就開始慢慢摸索。這裏把本身摸索的一些經驗總結一下。

目錄

  1、編輯器

     1.連接

     2.書籤

     3.html

     4.插入代碼

 2、後臺設置

     1.頁面定製CSS代碼

     2.公告欄

     3.首頁html代碼

     4.開通js權限

     5.推薦按鈕

  補充

    1.爲何沒效果

   2.代碼具體放哪裏

1、編輯器

1.連接

咱們不少時候須要引用別人或本身之前的代碼。這裏能夠很方便的加上連接。

一個添加連接 一個取消連接

選中要連接的文字右鍵就能夠選中連接。

填入URL地址，目標通常選擇在新窗口打開。

 

2.書籤

插入書籤

寫入書籤名

這樣能夠在文章開始寫目錄 跳到任意的書籤。右鍵插入連接的時候能夠綁定到書籤。

 

3.html

點擊能夠看到源碼，任意修改。

 

4.插入代碼

這裏能夠選中編程語言。若是代碼量比較多能夠所有摺疊。

 

2、後臺設置

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&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="200" height="160"> <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"> <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&amp;uin=XXXXXXXX&amp;site=qq&amp;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;">訪次:&nbsp;<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=XXXXXXXX&amp;c=XXXXXXXX" alt="AmazingCounters.com"></a>&nbsp;次</div>

 例5：

園友補充 這個詳細記錄了ip什麼   功能詳細 強大  http://www.clicki.cn/

3.頁首Html代碼

這個我見得比較多的就是你們的GitHub，源碼管理。

如：

這裏還有不少別的樣式圖片 （注意，要將上圖連接中的you換成本身的在Github上的帳號） 

GitHub在windows中的使用

 

4.開通js權限

博客園默認是沒有開通js權限的。能夠向管理員申請開通。郵箱：contact@cnblogs.com

開通js權限後能夠作不少事。

如：在公告欄中本身寫個日曆或者時鐘表什麼的。個人就是本身加了個時鐘表

 時鐘代碼

View Code

 

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  &nbsp;|&nbsp;\ 28  <a href='#top'>頂部</a>\ 29  &nbsp;|&nbsp;\ 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

轉載於http://www.cnblogs.com/zhaopei/p/4174811.html