【全網最全的博客美化系列教程】04.訪客量統計的實現

時間 2019-11-06

標籤全網最全的博客美化系列教程訪客統計實現简体版

原文原文鏈接

全網最全的博客美化系列教程相關文章目錄

【全網最全的博客美化系列教程】01.添加Github項目連接php

【全網最全的博客美化系列教程】02.添加QQ交談連接html

【全網最全的博客美化系列教程】03.給博客添加一隻萌萌噠的小倉鼠markdown

【全網最全的博客美化系列教程】04.訪客量統計的實現post

【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現動畫

【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現網站

【全網最全的博客美化系列教程】07.添加一個分享的按鈕吧spa

【全網最全的博客美化系列教程】08.自定義地址欄Logo3d

【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕code

【全網最全的博客美化系列教程】10.小火箭置頂特效的實現htm

【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現

【全網最全的博客美化系列教程】12.修改鼠標圖案

【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現

【全網最全的博客美化系列教程】14.代碼高亮設置的實現

【全網最全的博客美化系列教程】15.動畫幻燈效果的實現

【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現

【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現

【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現

【全網最全的博客美化系列教程】19.旋轉立方體的實現

【全網最全的博客美化系列教程】20.給博客添加一個萌萌噠的看板娘

【全網最全的博客美化系列教程】21.給博客添加一個夜間模式吧

【全網最全的博客美化系列教程】22.添加一個文章目錄特效

【全網最全的博客美化系列教程】23.圖片水紋特效的實現

【全網最全的博客美化系列教程】24.給博客增長一個音樂播放器特效

【全網最全的博客美化系列教程】25.給博客增長一個音樂播放器特效

【全網最全的博客美化系列教程】26.評論頭像旋轉的實現

【全網最全的博客美化系列教程】27.IP地址定位及天氣預報的實現

【全網最全的博客美化系列教程】28.3D標籤雲動畫的實現

【全網最全的博客美化系列教程】29.自制HTML源碼運行Javascript特效

【全網最全的博客美化系列教程】30.博客文章實現markdown書寫機制

【全網最全的博客美化系列教程】31.用Canvas和requestAnimFrame作動畫特效

【全網最全的博客美化系列教程】32.公告欄添加本身的頭像

【全網最全的博客美化系列教程】33.添加一隻舞動的小知音

【全網最全的博客美化系列教程】34.皮膚背景的選擇與定製

訪客量統計的實現

相信你們也看到了右側公告欄的訪客量統計的效果，咱們能夠看到有兩個樣式，一個是單獨統計人數的，一個是統計訪客來源的，是否是感受還挺不錯的？

本文就帶你們一塊兒詳細瞭解這個樣式的製做過程~~~

首先是數字樣式，效果以下：

這個咱們經過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>