博客園頁面設置


注冊博客園已經老久老久了,現在依然是個老菜鳥。最近開始嘗試着寫寫博客,一來可以督促自己,二來可以回顧自己在過去到底學了些什么。看到很多人的博客都很炫,自己也就開始慢慢摸索。這里把自己摸索的一些經驗總結一下。

目錄

  一、編輯器

     1.鏈接

     2.書簽

     3.html

     4.插入代碼

 二、后台設置

     1.頁面定制CSS代碼

     2.公告欄

     3.首頁html代碼

     4.開通js權限

     5.推薦按鈕

  補充

    1.為什么沒效果

   2.代碼具體放哪里

一、編輯器

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&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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM