为你的个人博客添加访客地图

前言

这是一篇教你如何为个人博客添加访客地图的图文教程，访客地图由ClustrMaps网站提供，它可以直观地展现访客的数量与来源。

使用CSDN博客的博主请注意：

听说最近CSDN博客对普通用户关闭了“自定义栏目”功能，因此请先确认一下自己的博客是否支持“自定义栏目”，方法请参考“安装地图”章节。我目前不是CSDN的付费用户，但是我有“自定义栏目”的功能，也可能跟我的“博客专家”身份有关系，但我没有其他账号，所以无法确认，也欢迎大家尝试之后留言告诉我，谢谢！

如果你的CSDN博客因为没有“自定义栏目”功能而无法添加访客地图，那么这篇文章也可以作为你在其他站点设置访客地图的参考。进一步讲，如果你设置访客地图的站点支持JS，那么文中所提及的“只能选择静态地图(Image based)控件”将不再适用，也就是说你可以自由选择。

添加步骤

创建账号

在一切开始前，你需要开通一个访客地图，ClustrMaps是个相当不错的网站，注册简单，我用了十几年。

注册很简单，只需要访问ClustrMaps网站，再点击右上角“Sign Up”进行注册，如果你有Google账号，也可以直接登陆。（注意： 注册邮箱无法更改）

创建地图

登陆之后，你就可以点击页面上的Create New Widget来创建一个新的地图（用户菜单中的Get Map也是同样功能）。

如图所示，在出现的页面中，填入你的博客地址，然后点击“Next”按钮：

接下来，选择名为“FREE”的免费套餐；如图所示，如果页面提示选择地图的展示样式，那就选择名为“Map widget”的静态地图（旁边那个名为“Globe Widget”的可以转圈圈的控件是通过JS实现的，而目前CSDN博客并不支持在自定义模块中嵌入JS代码）。

这时你就拥有了一张新的地图，这张地图将被用来统计你博客的访问来源。

设定地图

下面，你需要对这张地图进行一些个性化设置，让它更好地显示在你的博客上。

如图，点击“Customize widget“超链接，来到个性化设置界面。

如果你没有看到上面那个界面，你也可以来到My Websites页面中，找到“Customize”超链接，点击并来到个性化界面，如图所示。

这时，你将看到如下图所示的界面，这里是设置的重点！

你需要的全部改动有：

1. 选择“Size”为“Custom Size”，并指定“Width”为“268”，这时“Height”会自动更新为最合适的数值；
2. 勾选“Show Pageviews Counter”并选择一个合适的计数器，例如“Current Month”；
3. 选择“Widget Colors”为“Custom Colors…”，并根据你的博客配色调整下面的三个颜色属性；
4. 选择“Widget Code”为“Image based”，这一点非常重要，否则地图会因为CSDN不兼容而无法正常显示；

注意：在上述步骤中将地图的宽度“Width”设定为“268”是因为目前CSDN博客栏目的宽度为268px，这个数值可以通过Chrome浏览器的开发者工具获得，这里不进行赘述，只提供一张截图供参考。

最后，你需要点击代码右上角的“Copy”，将代码复制下来备用。

安装地图

接下来，你需要来到CSDN博客管理界面，将地图安装到你的博客中。

来到CSDN博客的栏目管理界面，点击“添加自定义栏目”，并将之前复制好的代码粘贴到“栏目内容”中，如图所示，点击“编辑栏目”保存。

安装好的访客地图如下图所示：