最近建立了一個個人微信公眾號，叫計算機視覺life，想要在個人CSDN部落格介面左側新增一下這個微訊號的二維碼，推廣一下。
搜尋了一下操作方法，發現新增微博的介紹有幾篇，微博也開放了元件，相對容易。相比之下，新增微信的倒是沒怎麼搜到。自己搗鼓了一下弄出來了，在此分享一下。
新增好的介面效果如下圖左下角紅色方框內：

其實操作挺簡單的，下面一步步介紹一下。

step1：找到位置

如果是在部落格正文介面，點選上方的“管理部落格”如下圖紅色方框內：

然後進入你發表的所有部落格的列表，點選“部落格欄目”

進入後，拖動螢幕最右側的滑塊一直拖到最下方，會看到一個“新增欄目”，如下圖所示，點選新增。

step2：編輯欄目

可以看到欄目支援HTML格式。不懂HTML？沒事，照著葫蘆畫瓢就行了。 以我上面的例子當做葫蘆開始畫瓢吧！
以我上面的例子進行說明。
“標題”裡我輸入的是：我的微信公眾號
“內容”裡我輸入的是：

<ul class="panel_head">
<span>計算機視覺life</span></ul>
<ul class="panel_body">
分享計算機視覺相關資訊科技、生活感悟。 
<img src="https://img-blog.csdn.net/20170103185011253?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWxlY3RlY2g2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"
 
 style="width:95%">
</ul>

下面簡單介紹一下上面的程式碼。

“ul”表示標籤定義無序列表。
“class”是一個選擇器，可以理解為一個標識，用來標識特定的標籤。
“panel_head”是使用者自定義的一個屬性，這裡就是表示欄目的標頭。
“span”標籤用來組合文件中的行內元素。
兩個“span”之間的內容就是你想要的標題的具體名字（這裡是“計算機視覺life”，你可以任意修改）。
“panel_body”就是欄目的主體了，後面可以新增介紹的文字。

下面“img src=“xxx””就是指定你欄目主體裡要顯示的圖片來源了，“xxx”就是表示圖片的路徑，注意這裡不能使用本地圖片，只能使用網路上的圖片。且必須是CSDN的圖片。否則會報如下錯誤。

最後style=”width:95%”就是用來調節圖片的尺寸的。
上面都設定完成後，點選確定“新增欄目”，部落格的頁面就會出現你設定的新的欄目。
等等，還沒完。

step3：調整

你開啟部落格頁面，可能一下子找不到你新增的欄目。
別急，一直拖到最下面，你應該可以在左下角看到你剛剛新增的效果。可能是這樣的熊樣：

首先，需要調整圖片的尺寸，因為每個人引用的圖片尺寸都不一樣。從style=”width:95%”裡的百分比例。然後重新整理剛才的介面看效果，可能需要反覆調幾次。
然後，調整一下文字的數目。文字太多可能排版比較難看。直到滿意為止。
最後，需要調節這個欄目的位置，畢竟放在最左下角一般人會直接忽視的。所以開啟“部落格欄目”介面，拖到最下面，點選下面紅框裡的“上移”按鈕，一直移到第一排或者第二排位置。

此時，你再看看部落格主頁，是不是很賞心悅目了呢~