全網最全的博客美化系列教程相關文章目錄
【全網最全的博客美化系列教程】01.添加Github項目鏈接
【全網最全的博客美化系列教程】03.給博客添加一只萌萌噠的小倉鼠
【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現
【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現
【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕
【全網最全的博客美化系列教程】10.小火箭置頂特效的實現
【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現
【全網最全的博客美化系列教程】12.修改鼠標圖案
【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現
【全網最全的博客美化系列教程】14.代碼高亮設置的實現
【全網最全的博客美化系列教程】15.動畫幻燈效果的實現
【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現
【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現
【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現
【全網最全的博客美化系列教程】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&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代碼添加到“博客側邊欄公告”
這樣即可完成了頁面訪客量來源統計，展示效果如下：
至於可能會出現顯示的大小適配問題，你稍微調整一下格式大小就好了~~~