玩转CSDN博客之自定义博客栏目，根据需要定制栏目
轉載自: http://www.w2bc.com/Article/40151
不得不說，CSDN在IT界還是非常不錯的， 不管是文章數量還是質量，都非常不錯，很多程序猿也在CSDN建了窩，那么如何把CSDN的主頁設置的更加符合自己的口味，就是我們今天要做的事。
CSDN博客的欄目指的是這塊內容：
這里面，有的是CSDN博客自帶的內容，比如個人資料、博客專欄等，還有些內容，我們可以自定義，首先，我們需要進入個人的博客首頁，點擊管理博客，并切換到博客欄目選項卡，這里，就是我們修改自定義欄目的主戰場了。
自定義鏈接
我們首先來看最簡單的，增加一個欄目，并增加一些自定義的鏈接選項。
首先，我們點擊添加欄目，如圖：
標題就是我們自定義欄目的名字，隨便取一個看的順眼的名字即可。
下面的內容，才是我們的重點，白話文我們就不說了，你可以在內容中輸入類似“公告”、“聲明”、“通緝”、“懸賞”等等，不用任何修飾的白話文，這些東西， 相信小學畢業證書拿到的朋友應該都會。
那么如何輸入帶鏈接的內容呢？幾個大字看見沒！支持HTML格式！！！有了這幾個字，還怕我們有什么做不出嗎?
OK。上鏈接：
相信這些最基本的HTML語言，大部分開發者都應該看得懂，看不懂就不用繼續往下看了。
自定義帶框框的鏈接
同樣是一個鏈接，如下圖的這個標題樣式，是不是顯得略高級點呢？
如果不寫標題，那么默認就是一行文字，所以我們給它增加一個系統的欄目才有的標題框
注意，是紅色框框里面的內容，不是紅色的框框。。。
<a title="友情鏈接" href="http://www.hztalk.com/" target="_blank"><br> 聊科技 游戲 電影 美食 請訪問 HZtalk </a> <br> <a title="Github" href="https://github.com/xuyisheng" target="_blank"><br> <ul class="panel_head"><span>我的Github</span></ul><br> 歡迎Follow、Fork、Star </a>代碼中把前面的內容代碼一起貼了出來，讓大家把結構更看的清楚一點。我們只是加了一個
<ul class="panel_head">而已。
貼圖
高大上的邊欄怎么能沒有圖片，可惜的是，CSDN不允許引用站外圖片。。。
所以，我們只能寄希望于CSDN自己的相冊中的圖片，但是。。。CSDN的相冊隱藏的如此之好，以至于我們只能通過源代碼來找到它的位置。。。所以，這里還是直接告訴大家吧：
點擊進入我的CSDN首頁——把鼠標放到我的收藏旁邊的下拉箭頭上——我的相冊出來了，不知道這是怎么設計出來的，太反人類了。當我們把圖片上傳到相冊中后，就可以使用相冊中的圖片了。選中圖片，右鍵選擇，在新窗口中打開圖片，就獲得了圖片的地址，有了站內的圖片，引用就非常簡單了。
效果就是這樣：
如果你想居中的話：
<center><img src='imgurl'></center>其實這些都是最基本的HTML語句，我這樣的半吊子Web開發者都能寫。相信大半吊子的程序猿應該可以用HTML寫出更好的內容。
Flash
添加Flash與使用圖片幾乎沒有太大差別：
例如我們要顯示凱子哥頁面上的這個動畫效果：
我們可以這樣：
<div id="custom_column_28798789" class="panel"> <ul class="panel_head"><span>個人說明</span></ul> <ul class="panel_body"> <div height="120" width="150" align="center"><embed height="120" width="150" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" autostart="1" wmode="transparent"></div>還是那句話，都是HTML。
新浪微博
新浪微博也是程序員交（zhuang）流（bi）的好東西，所以，這里我們再來配置下新浪微博，但是，這個東西我們不好直接用HTML來做，畢竟寫上去畢竟難看，不信邪你可以試試。
那么我們怎么做呢？首先，我們需要幫助。。。
打開微博工具，直接給地址：戳我戳我
上面都是廣告，我們要的是下面。
看見沒，多么貼心，還給我們準備好了復制。
我們把這個代碼直接復制到欄目中：
<iframe width="100%" height="550" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=1&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=1904977584&verifier=05864e99&dpc=1"></iframe>OK，微博已經自動獲取了，不信可以貼上上面的代碼，給我宣傳宣傳，thanks。
是不是so easy：
郵我
像QQ郵箱這樣的鵝廠產品，大多都會帶有一些社交類的元素，我們同樣可以在頁面中設置這樣的信息，比如給我發郵件：
點擊后，會跳到這樣一個界面：
點擊開發平臺，你也可以使用這樣的功能，跟使用微博一樣，我們可以讓它自動生成我們需要的樣式，一鍵獲取代碼：
真的是so easy。
當然要注意，代碼中會帶有站外的圖片，你同樣需要傳到自己的CSDN相冊。
HTML代碼示例
除了我們上面列舉的這些常用的設置，下面我們再從網上拔一些常用的代碼來，供大家參考：
貼圖：<img src="圖片地址">加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>貼圖：<img src="圖片地址">加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>消除連接的下劃線在新窗口打開連接：<a href="相關地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>字體加粗：<b>寫上你想寫的字</b>字體斜體：<i>寫上你想寫的字</i>字體下劃線: <u>寫上你想寫的字</u>字體刪除線: <s>寫上你想寫的字</s>字體加大: <big>寫上你想寫的字</big>字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>貼音樂：<embed src=音樂地址 width=300 height=45 type=audio/mpeg autostart="false">貼flash: <embed src="flash地址" width="寬度" height="高度">貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>換行：<br>段落：<p>段落</p>原始文字樣式：<pre>正文</pre>換帖子背景：<body background="背景圖片地址">固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body bgproperties=fixed>定制帖子背景顏色：<body bgcolor="#value">(value值見10)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>貼網頁：<iframe src="相關地址" width="寬度" height="高度"></iframe>以上，基本可以玩轉了。
可以看出，自定義CSDN的博客欄目，無非就是HTML!!!所以，包括但不限于上面的HTML，都可以設置我們的博客欄目。OK，點到即止，趕緊去自定義吧。
總結
以上是生活随笔為你收集整理的玩转CSDN博客之自定义博客栏目，根据需要定制栏目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Google DeepMind围棋程序A
- 下一篇： 程序员笔试面试基础知识资料整理