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

最近建立了一个个人微信公众号,叫计算机视觉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的图片。否则会报如下错误。
这里写图片描述
那么这个路径怎么查看呢?首先你在CSDN上选择好要使用的图片,然后右键,选择“在新标签页中打开图片”,复制新标签页中的网址粘贴到这里的“xxx”位置就OK了。

最后style=”width:95%”就是用来调节图片的尺寸的。
上面都设置完成后,点击确定“添加栏目”,博客的页面就会出现你设置的新的栏目。
等等,还没完。

step3:调整

你打开博客页面,可能一下子找不到你添加的栏目。
别急,一直拖到最下面,你应该可以在左下角看到你刚刚添加的效果。可能是这样的熊样:
这里写图片描述
首先,需要调整图片的尺寸,因为每个人引用的图片尺寸都不一样。从style=”width:95%”里的百分比例。然后刷新刚才的界面看效果,可能需要反复调几次。
然后,调整一下文字的数目。文字太多可能排版比较难看。直到满意为止。
最后,需要调节这个栏目的位置,毕竟放在最左下角一般人会直接忽视的。所以打开“博客栏目”界面,拖到最下面,点击下面红框里的“上移”按钮,一直移到第一排或者第二排位置。
这里写图片描述
此时,你再看看博客主页,是不是很赏心悦目了呢~

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页