博客園頁面設置
1、編輯器
1.連接
咱們不少時候須要引用別人或者本身之前的代碼。這裏能夠很方便地加上連接。javascript
一個添加連接，一個取消連接php
選中要連接的文字右鍵就能夠選中連接。html
填入URL地址，目標通常選擇在新窗口打開。java
2.書籤
插入書籤git
寫入書籤名github
這樣能夠在文章開始寫目錄 跳到任意的書籤。右鍵插入連接的時候能夠綁定到書籤。編程
3.html
點擊能夠看到源碼，任意修改。windows
4.插入代碼
這裏能夠選中編程語言。若是代碼量比較多能夠所有摺疊。app
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&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>
例3：還能夠貼上
<a target="_blank" href="http://shang.qq.com/email/stop/email_stop.html?qq=749294824&sig=a1c657365db7e82805ea4b2351081fc3ebcde159f8ae49b1&tttt=1"><img border="0" src="http://pub.idqqimg.com/qconn/wpa/button/button_old_131.gif" alt="有事您Q我" title="有事您Q我"/></a>
<!--把「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上的帳號）
GitHub在windows中的使用
4.開通js權限
博客園默認是沒有開通js權限的。能夠向管理員申請開通。郵箱：contact@cnblogs.com
開通js權限後能夠作不少事。
如：在公告欄中本身寫個日曆或者時鐘表什麼的。
下面是16種動態圖片時鐘代碼
-
<IFRAME border=0 frameBorder=0 height=230 scrolling=no
src="http://www.1t2t.com/1t/so2.htm"
width=230></IFRAME> -
<IFRAME border=0 frameBorder=0 height=52 scrolling=no
src="http://www.1t2t.com/1t/so1.htm"
width=172></IFRAME> -
<IFRAME border=0 frameBorder=0 height=217 scrolling=no
src="http://www.1t2t.com/1t/so3.htm"
width=240></IFRAME> -
<IFRAME border=0 frameBorder=0 height=50 scrolling=no
src="http://www.1t2t.com/1t/so4.htm"
width=170></IFRAME> -
<IFRAME border=0 frameBorder=0 height=184 scrolling=no
src="http://www.1t2t.com/1t/so5.htm"
width=199></IFRAME> -
<IFRAME border=0 frameBorder=0 height=189 scrolling=no
src="http://www.1t2t.com/1t/so6.htm"
width=250></IFRAME> -
<IFRAME border=0 frameBorder=0 height=135 scrolling=no
src="http://www.1t2t.com/1t/so7.htm"
width=210></IFRAME> -
<IFRAME border=0 frameBorder=0 height=164 scrolling=no
src="http://www.1t2t.com/1t/so8.htm"
width=159></IFRAME> -
<IFRAME border=0 frameBorder=0 height=155 scrolling=no
src="http://www.1t2t.com/1t/so9.htm"
width=179></IFRAME> -
<IFRAME border=0 frameBorder=0 height=126 scrolling=no
src="http://www.1t2t.com/1t/so10.htm"
width=188></IFRAME> -
<IFRAME border=0 frameBorder=0 height=139 scrolling=no
src="http://www.1t2t.com/1t/so11.htm"
width=193></IFRAME> -
<IFRAME border=0 frameBorder=0 height=184 scrolling=no
src="http://www.1t2t.com/1t/so12.htm"
width=224></IFRAME> -
<IFRAME border=0 frameBorder=0 height=320 scrolling=no
src="http://www.1t2t.com/1t/so13.htm"
width=400></IFRAME> -
<IFRAME border=0 frameBorder=0 height=151 scrolling=no
src="http://www.1t2t.com/1t/so14.htm"
width=197></IFRAME> -
<IFRAME border=0 frameBorder=0 height=208 scrolling=no
src="http://www.1t2t.com/1t/so15.htm"
width=220></IFRAME> -
<IFRAME border=0 frameBorder=0 height=194 scrolling=no
src="http://www.1t2t.com/1t/so16.htm"
width=239></IFRAME>
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
做者：耑新新，發佈於 博客園
轉載請註明出處，歡迎郵件交流：zhuanxinxin@foxmail.com
- 1. 博客園頁面設置 博客園頁面設置
- 2. 博客園頁面設置
- 3. 博客園的基礎設置 博客園頁面設置
- 4. 博客園設置我的頁面
- 5. 博客園定製頁面（一）——博客園設置相關參考
- 6. 博客園頁面美化
- 7. 博客園頁面定製
- 8. 博客園背景設置
- 9. 博客園頁面定製設置背景
- 10. 博客園皮膚-我的博客園皮膚設置教程
- 更多相關文章...
- • XSL-FO 頁面 - XSL-FO 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • IntelliJ IDEA代碼格式化設置
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 博客園頁面設置 博客園頁面設置
- 2. 博客園頁面設置
- 3. 博客園的基礎設置 博客園頁面設置
- 4. 博客園設置我的頁面
- 5. 博客園定製頁面（一）——博客園設置相關參考
- 6. 博客園頁面美化
- 7. 博客園頁面定製
- 8. 博客園背景設置
- 9. 博客園頁面定製設置背景
- 10. 博客園皮膚-我的博客園皮膚設置教程