如何在CSDN个人主页左侧栏添加微信二维码？

最近建立了一个个人微信公众号，叫计算机视觉life，想要在个人CSDN博客界面左侧添加一下这个微信号的二维码，推广一下。 

搜索了一下操作方法，发现添加微博的介绍有几篇，微博也开放了组件，相对容易。相比之下，添加微信的倒是没怎么搜到。自己捣鼓了一下弄出来了，在此分享一下。 

添加好的界面效果如下图左下角红色方框内： 


 

其实操作挺简单的，下面一步步介绍一下。

step1：找到位置

如果是在博客正文界面，点击上方的“管理博客”如下图红色方框内： 


 

然后进入你发表的所有博客的列表，点击“博客栏目” 


 

进入后，拖动屏幕最右侧的滑块一直拖到最下方，会看到一个“添加栏目”，如下图所示，点击添加。 


 

跳出如下菜单栏，就是我们需要写入代码的地方啦。 

step2：编辑栏目

可以看到栏目支持HTML格式。不懂HTML？没事，照着葫芦画瓢就行了。 以我上面的例子当做葫芦开始画瓢吧！ 

以我上面的例子进行说明。 

“标题”里我输入的是：我的微信公众号 

“内容”里我输入的是：

<ul class="panel_head">
<span>计算机视觉life</span></ul>
<ul class="panel_body">
分享计算机视觉相关信息技术、生活感悟。
<img src="http://img.blog.csdn.net/20170103185011253?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZWxlY3RlY2g2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="width:95%">
</ul>

1
2
3
4
5
6
1
2
3
4
5
6

下面简单介绍一下上面的代码。

“ul”表示标签定义无序列表。 

“class”是一个选择器，可以理解为一个标识，用来标识特定的标签。 

“panel_head”是用户自定义的一个属性，这里就是表示栏目的标头。 

“span”标签用来组合文档中的行内元素。 

两个“span”之间的内容就是你想要的标题的具体名字（这里是“计算机视觉life”，你可以任意修改）。 

“panel_body”就是栏目的主体了，后面可以添加介绍的文字。

下面“img src=“xxx””就是指定你栏目主体里要显示的图片来源了，“xxx”就是表示图片的路径，注意这里不能使用本地图片，只能使用网络上的图片。且必须是CSDN的图片。否则会报如下错误。 


 

那么这个路径怎么查看呢？首先你在CSDN上选择好要使用的图片，然后右键，选择“在新标签页中打开图片”，复制新标签页中的网址粘贴到这里的“xxx”位置就OK了。

最后style=”width:95%”就是用来调节图片的尺寸的。 

上面都设置完成后，点击确定“添加栏目”，博客的页面就会出现你设置的新的栏目。 

等等，还没完。

step3：调整

你打开博客页面，可能一下子找不到你添加的栏目。 

别急，一直拖到最下面，你应该可以在左下角看到你刚刚添加的效果。可能是这样的熊样： 


 

首先，需要调整图片的尺寸，因为每个人引用的图片尺寸都不一样。从style=”width:95%”里的百分比例。然后刷新刚才的界面看效果，可能需要反复调几次。 

然后，调整一下文字的数目。文字太多可能排版比较难看。直到满意为止。 

最后，需要调节这个栏目的位置，毕竟放在最左下角一般人会直接忽视的。所以打开“博客栏目”界面，拖到最下面，点击下面红框里的“上移”按钮，一直移到第一排或者第二排位置。 



此时，你再看看博客主页，是不是很赏心悦目了呢~