CSDN博客页面自定义左侧博客栏目

在你点进这篇文章的时候，在左侧就可以看到一竖列的小方框了，诸如个人资料啊、博客专栏啊、搜索啊之类的。

首先要说的是这些小方框叫做“博客栏目”，而这些栏目都是可以显示、隐藏、上下交换位置的。

CSDN给我们提供了一些有用的栏目让我们可以直接使用，关于显示、隐藏、上下移动的设置方法如下：

在博客界面上方有一排按钮，在里面找到“管理博客”按钮：

进入博客管理界面。在这个界面上方有一排标签，选择“博客栏目”的标签：

就可以对CSDN提供的栏目进行设置了。

当然本文的重点不是这个简单的东西。而是自定义栏目。

现在查看本文网页左侧的我的栏目列表可以看到，在我的个人资料下方有一个“博客公告”的栏目，如下图：

可以试着点击一下QQ号和GitHub网址，点击QQ号会打开和我聊天的QQ对话框（是可以发送消息的，没事就不要给我发消息测试了哈~），而点击网址则会跳转。

这个栏目不是CSDN提供的，而是自定义的，这也是本文的目的——讲解如果自定义博客栏目。

现在进入到刚才说的博客栏目管理页面，滑到最底下，有一个添加栏目的按钮：

点击它，会出现一个栏目的编辑弹层：

在下方我们看到最多可以添加3个自定义的栏目。

首先填写标题，标题就是类似“个人资料”啊这种，我的自定义栏目标题为“博客公告”。

然后填写内容，而这个内容是支持HTML格式的，因此我们才能达成刚才说的打开QQ对话框、跳转网址等效果。

如果你是前端人员的话，到这里就可以自行发挥了，天高海阔任君写。

如果对HTML不熟悉的话，我将我的模板写出来供大家参考一下，事实上我也是参考的别人的，因为我也不是写前端的哈哈，只是略微知道一点。

<p><span style="color:black; font-size:13px; font-weight:bold">Name:</span> Cloudox</p><br><p><span style="color:black; font-size:13px; font-weight:bold">QQ:</span><a title="QQ联系" href="http://wpa.qq.com/msgrd?v=3&uin=547286013&site=qq&menu=yes" target="_blank" style="color:black; font-size:13px"> 547286013</a></p><br><p><span style="color:black; font-size:13px; font-weight:bold">Email:</span> [e-mail]</p><br><p><span style="color:black; font-size:13px; font-weight:bold">GitHub：</span> <a title="跳转到我的GitHub" href="https://github.com/Cloudox" target="_blank" style="color:black; font-size:13px">https://github.com/Cloudox</a></p>

以上就是我写进内容框里的HTML代码了，这里稍微讲解一下，可以对照着我的栏目样式看：

• p标签，代表一个段落，/p是结束的意思。我的每一行内容都被一个p标签包括

• br标签，表示空一行

• span标签，里面的style描述文字的字体等设置。如color描述颜色，font-size描述字号，font-weight:bold表示加粗，如果不想要加粗，把font-weight:bold删了就行

• a标签，表示一个链接。里面的title表示鼠标移到此内容上显示的文字，href表示链接地址，比如我这里的QQ号对应的地址可以打开对话框，将链接里的QQ号改掉就可以用了。style同样藐视文字设置。

基本上就是上面这些了，参照着我的样式改还是很简单的，也可以放别的内容，改别的样式，这就看创造力了哈哈。保存后同样可以设置修改、显示、隐藏、上下移动。

最后说一句，如果在浏览别人的博客时发现了很赞的别人自定义的博客栏目，想学怎么办呢，联系博主是一个办法，但另一个更快捷的方法是，在网页右键，选择查看网页源代码，可以直接找到博客栏目对应的源代码，复制过去改一下就好了，比如我的博客首页查看源代码后，可以找到我自定义的博客栏目对应的源代码如下：

红框内的就是填在内容框中的代码，其余的部分是自动生成的。

我就是这么学来的哈哈哈。还蛮有意思的是吧

转载请注明出处，谢谢