JavaScript 為部落格加上瀏覽人數統計(計數器)
本教學為申請免費計數器Histats.com並放置於部落格為主。
請注意:
提醒您,若是您要修改模版(或部落格程式碼),請先複製一份,以防萬一。本教學以全球華文網的FallingLeaves-randombanner模版為例。
Step1:
首先就先來複製一份吧! 在個人網誌設定內點選網誌模版編輯器,找到您想要改的模版後,在左邊動作欄位點選複製圖案(同下圖1.)。點選後,會彈跳出一視窗,輸入您新模版名稱後,按確定按鈕(同下圖 2.)。
Step2:
找到在此畫面下方新模版後,點選左邊動作欄位的編輯圖案(同下圖)。
Step3:
進入編輯畫面。找到links.template(如果是其他模版,可能會是panel.template),點選左邊動作欄位的編輯圖案(同下圖)。
Step4:
進入程式碼編輯畫面。觀察一下,發現內容是很有規則的,皆是以<h2>開始一段程式碼,每一組這樣的程式,在部落格的側選呈現一個欄位。<h2></h2>即是欄位的標題,下方即為欄位的內容。
到此步驟,您己經可以將不同小玩意(例留言版或開站天數等),貼在其中(可參考Step12),並用<h2></h2>給它個標題,再按下最下方的更新按鈕,就可以秀在部落格上囉!(提醒您,記得在網誌設定內,將此新模版套用才算完成)
Step5:
此步驟開始,即為申請免費計數器Histats.com,並放置於部落格為主。請按下Histats.com連結,找到以下畫面,輸入部落格網址,並選擇語言後,按下Register按鈕。
Step6:
輸入部落格資訊後,按下最下方的Continue按鈕。
Step7:
選擇計數器的樣式,直接在圖案上按下。(本教學為選擇Text counters白底黑字為例)
Step8:
選擇要出現的欄位,點選後,再按下最下方的Continue按鈕。
Step9:
選擇想要顯示的資訊,按下最下方的Continue按鈕。
Step10:
等後一會兒。
Step11:
出現計數器的語法,滑鼠移至上方,系統會自動全選並反白,只要直接按Ctrl+C就可以複製。
Step12:
回到複製後的新模版,將剛剛複製的語法貼上。(忘了新模版在哪?可以參考Step1)
Step13:
用<h2></h2>給它個標題瀏覽人數統計,再按下最下方的更新按鈕。
Step14:
開啟部落格前台查看,咦?怎麼沒有顯示?因為方才是貼在新的模版內,我們還沒有套用,所以無法查看到修改後的樣子。只要在個人網誌設定內點選網誌設定,將此新模版套用,就可以惹。
Step15:
套用完成後,再開啟部落格前台查看,瀏覽人數統計完美的呈現囉!
很簡單吧!有任何問題,可以再跟我說喔!希望大家玩的愉快。















26 三月 2009, 17:30
It's so clear. Great job!!
Thank you very much!!!
~Erin:)
26 三月 2009, 19:27
謝謝您支持^^
26 三月 2009, 21:26
佳佳好
寫得真好
^^
加油!加油!加油!加油!
papapapapapapa 給妳拍拍手
27 三月 2009, 00:10
佳佳啊~,Erin會常常來妳家逛逛的,因為這裡有很多"好物"!!所以,Erin應該還有很多機會向佳佳道謝,因此,佳佳"不必"一一回Erin道謝的留言。Erin是一定要說謝謝的,若是得了佳佳的好處卻不說聲謝,Erin會渾身不自在的。您就不用回了!!
另外有一件事,不確定是否對佳佳有用。佳佳的Blog在IE上看完全沒有問題,但是若用Mozilla Firefox上網看,整個Blog的版面配置就完全錯位了(-p.s.別的Blog都沒事)!!想讓妳看一下那錯位的畫面,所以我把圖片放在我Blog最舊的那篇文章上,一天後我會把它們刪除的。
(http://blog.huayuworld.org/taohuayuan11/9432/2008/07/18/12535)
~Erin:)
27 三月 2009, 21:27
寫得好詳細哦! 謝謝.
27 三月 2009, 23:22
Erin啊~ 謝謝您啦^^ 我想說謝謝, 也是真的很感謝您來支持我,
就是有您們的支持, 才會有我繼續寫下去的動力啊! 您不用客氣的~
您說的錯位, 我在您提供的網址(http://blog.huayuworld.org/taohuayuan11/9432/2008/07/18/12535)沒有看到圖片呢, 可以再請您再幫我上傳一次圖片嗎? 我沒注意有這樣的情況, 真的很謝謝Erin提醒^^
27 三月 2009, 23:24
謝謝老師讚美,
我是參考老師的文章學著寫的,
我會繼續努力^^
28 三月 2009, 02:56
to 佳佳老師,
我的版面在IE和Firefox上有不同的行為. 你用firefox看同樣的網頁, 就會發現有錯位或是不同的行為, 很可能是style sheet的問題.
希望你也可幫忙解決我的版面問題.
28 三月 2009, 04:42
佳佳好!
圖片再次登場了,同樣網址。
~Erin:)
28 三月 2009, 22:08
謝謝您的提醒, 我馬上來測試看看是不是style sheet的問題^^
28 三月 2009, 22:13
謝謝您:p
不好意思, 麻煩您擷取錯位畫面,
我馬上來查查看原因
29 三月 2009, 16:03
^^ 謝謝您們的協助,
我己經將錯位修改好囉!! 感恩啊!!
30 三月 2009, 00:58
佳佳老師, 請問妳是怎麼修的呢? 我不大懂stylesheet. 我用falling leave的版改了些圖, 但是在firefox上白色的內容變成了底色, 該怎麼修呢? 謝謝.
30 三月 2009, 10:37
您好, 您試試看, 在您的模板twh_FallingLeaves內找到【style.css】, 在內容找到【#container】, 他的下方有【background-color: #fff;】改為【background-color: #ffffff;】(或改為其他背景色), 應該就可以囉^^ 希望您成功
31 三月 2009, 01:44
我的firefox不喜歡我, 把所有的#fff都改了, 試過#ffffff, #FFFFFF, 和white, 它都不愛.
不過還是要謝謝你的. Don't worry about it. 說不定哪天它突然會work.
31 三月 2009, 12:02
哇哇哇!!佳佳真神氣,三兩下就解決了!新的背景音樂也好好聽喔!~偶像偶像!!:)
Erin看過了,現在佳佳的Blog在IE和Firefox都美美的呢!
(-p.s.Erin已經刪除之前的圖片)
~Erin:)
31 三月 2009, 12:09
佳佳,為什麼您的Blog要用快速鍵才能複製、剪下和貼上(-p.s.按滑鼠右鍵無效)?會不會有到訪者不知道要用快速鍵?
~好奇的 Erin:)
31 三月 2009, 13:02
您好, 我有一個笨方法, 就是用篩去法~
我之前錯位, 也是不知原因為何, 就是用這個方法找到原因的!
您先將falling leave再複製一份出來, 再到您後來的模版twh_FallingLeaves逐一將複製資料過去,
可以先複製style.css過去看看,
如果ok, 再複製 links.template 或是其他的template,
記得逐一複製, 才能找到原因^^
不好意思, 沒有幫忙到您, 希望我這個方法對您有幫助~
31 三月 2009, 13:04
^^ 謝謝您來逛逛~
之前因為我有鎖滑鼠右鍵, 所以才無法用滑鼠右鍵叫出功能選單,
但後來發現真的很不方便呢!
我方才己經將該功能拿掉囉!
您再試試看吧, 謝謝您
31 三月 2009, 19:28
管一個部落格要花好多的時間, 妳的版很美, 我想學的太多了都跟不上. 多謝指點, 我會找個時間慢慢再複製一次的. 感謝提醒和教學哦!
31 三月 2009, 20:12
^^管理部落格真的會很花時間呢,
有什麼需要幫忙的, 您別客氣喔!
祝心怡
02 四月 2009, 04:39
現在滑鼠右鍵可以操作囉!謝謝!:)
Erin還發現佳佳有一個很貼心的設計喔!當我點選左欄的某個最新迴響時,畫面會直接跳到那個指定的迴響,而非像Lifestyle是跳到最上面的文章。很方便呢!!貼心、貼心!謝謝喔!
~Erin:)
02 四月 2009, 20:28
^^ 不客氣,
您真細心, 大家使用上有方便就好~
15 四月 2009, 12:09
偶像佳,
這是我第一次修改版模耶! 我依照你的圖示一步一步打...好緊張, 怕毀了...真的完成咧, 好高興!! 你真是太棒了, 謝謝你!!! love you~~
15 四月 2009, 23:17
哇! 好棒! 真高興你成功了^^
不用客氣啦~ 有幫助到大家我也很高興呢