【全网最全的博客美化系列教程】04.访客量统计的实现

访客量统计的实现

相信大家也看到了右侧公告栏的访客量统计的效果,我们可以看到有两个样式,一个是单独统计人数的,一个是统计访客来源的,是不是感觉还挺不错的?

本文就带大家一起详细了解这个样式的制作过程~~~

首先是数字样式,效果如下:

这个我们通过F12去查看下源码,我们可以看到如下图这段源码:

 我们把这段源码拷贝出来看看:

<div align="center">
<a href="http://www.amazingcounters.com">
<img border="0" src="https://cc.amazingcounters.com/counter.php?i=3214944&amp;c=9645145" alt="AmazingCounters.com">
</a>
</div>

我们可以看到,这个样式来源于这个网站:http://www.amazingcounters.com

下一步我们肯定去访问下这个网站看看,果真,这个网站提供了大量的访客量统计的样式。

我们点击Browse Over 750 Counter Styles In 24 Categories

里面有大量的样式供我们选择~~~就拿我的为例子,我用的是Olde Style,我就一步步教大家怎么弄~~~

首先,点击Olde Style,然后填入对应的信息,需要注意的是Url是你博客园的地址

然后点击Create New Account

然后把相应的源码拷贝出来即可~~

添加方式:进入自己的博客园->设置,将以上html代码添加到“博客侧边栏公告”

这样即可完成了页面访客量统计,展示效果如下:

然后接着是统计访客来源了,效果如下:

这个我们用同样方法通过F12去查看下源码,我们可以看到如下图这段源码:

我们把这段源码拷贝出来看看:

<a href="https://info.flagcounter.com/G05j">
<img src="https://s07.flagcounter.com/count/G05j/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_250/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0">
</a>

我们可以看到,这个样式来源于这个网站:https://info.flagcounter.com/G05j

下一步我们肯定去访问下这个网站看看,果真,这个网站提供了自定义访客来源的样式。以我的为例子,我们直接点击Create a FREE Flag Counter!

然后可以根据自己的喜好设置这些参数,点击GET YOUR FLAG COUNTER

然后填下你的邮箱地址,好像是要验证信息来着,也可以选择不填写,直接Skip跳过即可

然后你就获得了访客量来源统计的源码~~~

添加方式:进入自己的博客园->设置,将以上html代码添加到“博客侧边栏公告”

这样即可完成了页面访客量来源统计,展示效果如下:

至于可能会出现显示的大小适配问题,你稍微调整一下格式大小就好了~~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

微信小程序接口全解析!从官方 Demo 了解小程序的能力

1983
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

3702
来自专栏极乐技术社区

微信小程序 wx.request 的封装

自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了...

6348
来自专栏徐江伟的专栏

Vue.js 实战总结

最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑。本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来...

3.3K2
来自专栏互联网杂技

前端各种优化

1.  请减少HTTP请求   基本原理:   在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突...

3398
来自专栏java工会

前端进阶攻略|最全的前端开源JS框架和库

3297
来自专栏iOS开发笔记

iOS开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 ...

4267
来自专栏iOS开发笔记

ios开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 i...

3749
来自专栏知晓程序

开发 | 用 7 天时间,他做了个仿麦当劳的小程序

作为全栈的学习者,初学微信小程序,抱着试试做心态,一个星期内初步完成了仿「i 麦当劳」小程序的项目。

1134
来自专栏从零开始学 Web 前端

从零开始学 Web 之 JavaScript(一)JavaScript概述

JavaScript历史 要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Naviga...

1162

扫码关注云+社区

领取腾讯云代金券