做这个的起源是因为今天起床后无所事事，就在 Blog 里四处抢沙发，忽然看到案山子的 Blog 上有个地图信息很好玩，就想在自己 Blog 上也加一个，不过还是碰到点小麻烦，考虑到目前 5DBlog 里还有不少新手，就把添加过程写下来，当作我的一个圣诞礼物吧。

　　下面是操作过程：

1、到这个博客地图的地址：http://blog.mapbar.com/blogmap/index.jsp，可以看到很显眼的三个按钮，单击第一个“标注”按钮。

2、在这个标注页面中，输入自己的博客名称、博客网址、相关注释（这个是可选项），然后在下面的“选择城市”的列表框中，选择你所在的城市。由于我已经申请过了，这里替正天再申请一个，正天也不用特别感谢我，请我吃顿饭就可以了。大致情况如下图：

3、按下右边的“开始标注”按钮。会弹出一个新页面，让你选择标注的图标，一般选择一个房子，正天的思维肯定与众不同，给他选择一个1号球吧，然后点“确定”按钮。

4、确定后，这个页面关闭，然后在地图的页面上出现个对话框“请在地图上标注位置”，这个简单，按确定就可以，不再抓图了，然后这个页面地图就会转成以你选择的城市“杭州”为中心进行显示，如下图：

5、上下拖动左边的标尺可以放大和缩小地图，把地图进行放大，找到你所在的地理位置，这里顺便报告一下 5D 的老窝，在杭州滨江区，江南大道上，龙禧大酒店后面的一幢楼，叫亚琪科技大厦。找到后，在大致位置上点一下，1号球就落上了。如图。这个时候就可以按“提交”按钮了。

6、提交后，就得到了博客地图和嵌入代码，如图：

7、本来写到这就结束了，不过由于 5DBlog  禁止了 JS 代码，所以新手注意了，还需要继续往下操作，否则我就不写这个教程了。在“嵌入地图代码”中，只选择 src = 后引号中的 http :// .. 这段网址，如图。然后按键盘上的“Ctrl”+“C”快捷键，把这个地址复制下来。

8、在浏览器地址栏中，先把已有的地址清空，然后按“Ctrl”+“V”，把地址复制到地址栏中，然后回车。如图。

9、然后选择 IE 菜单的“查看”>>“源文件”，得到源文件，其中 <iframe> 到 </iframe>一段就是我们所要的内容，选中它，把它拷贝下来，如图。

10、然后就到自己的 Blog 后台管理界面，单击“边栏设置”，在右边的新增边栏界面：“边栏名称”中，输入自己喜欢的名字，例如地理位置，下面的编辑对话框，按下“源代码”按钮，切换到源代码编辑状态，然后“Ctrl”+“V”，粘贴入刚才那段代码，由于我们一般都希望地图在边栏中居中显示，所以还需要加入居中的代码，在刚才输入的那段代码最前面增加：<div align="center">，在最后面输入：</div>，如图。

11、输入完毕后，单击“添加边栏”按钮，就可以在左边看到新增加了一个边栏，在默认情况下，新增的边栏是不激活的，如果要激活它，勾选它前面的方框，然后单击“确认”按钮。

12、如果想调整边栏的上下顺序，只要鼠标按住它不放，把它往上或者往下拖就可以了。调整完毕后按“确定”按钮。

好了，这个讲解到此结束了，行动起来，给你的 Blog 增加一个地图功能，顺便认识下你周围的朋友。