amarylliss。艾瑪[隨處走走] - [教學] 單篇文章計數器

September 4, 2006

[教學] 單篇文章計數器

這個單篇文章計數器有很多人都已經使用且非常習慣了。這個計數器只是一個小圖檔而已，只要將他貼在文章裡頭（最好是貼在「繼續閱讀」之後的頁面中），每一篇大約有多少點閱次數就可以一目瞭然。

當然，計數器國內國外的有百百種，日本的有些超可愛的，我也曾經介紹過一些。這次介紹的這個是大家最熟悉的中山大學計數器（網站連結）。

這裡舉出四種樣式及連結語法：

<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=14">

<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=15">

<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=16">

<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=25">

不過，如果要每篇文章都貼，是不是很累啊？艾瑪懶人就直接把他寫在CSS裡面，這樣是不是快一點啊？看你要寫在哪裡，就直接寫成

.你要放的位置div名稱 {
background: none url(中山大學計數器網址) no-repeat;
}

例如像這篇文章(請點開網頁)一樣，要貼在「引用這篇文章」那一欄中（這就跟艾瑪隨處走走引用文章欄位中"CC Some Rights Reserve" 那個位置一樣）的話，連結語法就是：

.trackback-url {
background: none url(中山大學計數器網址) no-repeat;
}

當然你也可以貼在任何你想要他出現的位置... （有太多種可以貼的位置囉）這樣就可以囉！

　

另外還有牛美眉計數器，也很好用，只是他使用的程式碼是 Java Script 不是圖檔。

　

之前用過的可愛計數器

http://okcounter.com/

日本也有讓使用者自訂的計數器

http://www.logbird.com/

http://www.c-mansion.net/

當然日本YAHOO的計數器也是一絕啦！

0推薦此文章推收

Add a Bookmark:

Today's Visitors: 0 Total Visitors: 2113

You can leave comment to this collection

Personal Category: 　╠ 艾瑪の部落格習作&語法分享 Topic: life

歷史上的今天:

:[鳴謝] Valence 飄洋過海來的美味
:台灣的金牌選手也有小時候

amarylliss at 無名小站 at 04:00 PM post | Reply(59) | Trackback(15) | Collection(0) | prosecute

[Trackback URL]

Trackback

� �� 有朋友問我文末的共有位訪客閱讀過本文是怎麼設定的。 �� 這是一位高手指點小女子的，今兒個跟大家分享。 �� 在\"一般編輯模式\"
[網頁技巧] 無名文末閱覽人數(記數器) 【SmileJean~紫色微笑~】 at September 5, 2006 01:15 AM Trackback

� �� 有朋友問我文末的共有位訪客閱讀過本文是怎麼設定的。 �� 這是一位高手指點小女子的，今兒個跟大家分享。 �� 在\"一般編輯模式\"
[網頁技巧] 無名文末閱覽人數(記數器) 【SmileJean~紫色微笑~】 at September 5, 2006 01:21 AM Trackback

� �� 有朋友問我文末的共有位訪客閱讀過本文是怎麼設定的。 �� 這是一位高手指點小女子的，今兒個跟大家分享。 �� 在\"一般編輯模式\"
[網頁技巧] 無名文末閱覽人數(記數器) 【SmileJean~紫色微笑~】 at September 5, 2006 01:24 AM Trackback

� �� 有朋友問我文末的共有位訪客閱讀過本文是怎麼設定的。 �� 這是一位高手指點小女子的，今兒個跟大家分享。 �� 在\"一般編輯模式\"
[網頁技巧] 無名文末閱覽人數(記數器) 【SmileJean~紫色微笑~】 at September 5, 2006 01:27 AM Trackback

本篇文章引用自此
test1 【吳大的網誌】 at September 5, 2006 12:33 PM Trackback

本篇文章引用自此
test2 【吳大的網誌】 at September 5, 2006 12:33 PM Trackback

計數器�� 只針對某篇的文章�� 可以加入下面的語法中間的網址� 是中山大學計數器所提供的網址� 後片的數字��是代表計數器的
艾瑪 css 教學單篇文章計數器【你不在，所以我一個人住】 at September 5, 2006 04:30 PM Trackback

本篇文章引用自此� 剛在艾瑪的網站上面看到的.......非VIP也可以使用喔~~~~~
[教學] 單篇文章計數器【簡單。幸福】 at September 6, 2006 04:33 PM Trackback

本篇文章引用自此在艾瑪大大的部落格裡發現一個很好用的東西他可以計數你的單篇文章一共有多少人閱讀過一共有分初階版及進階版進階的部分
【推薦】單篇文章計數器的貼法【平平~快樂的天堂源自心田而非外在】 at September 16, 2006 03:30 AM Trackback

� �� 有朋友問我文末的共有位訪客閱讀過本文是怎麼設定的。 �� 這是一位高手指點小女子的，今兒個跟大家分享。 �� 在\"一般編輯模式\"
[網頁技巧] 無名文末閱覽人數(記數器) 【SmileJean~紫色微笑~】 at September 17, 2006 02:09 AM Trackback

� 吼…很認真的研究了一下單篇計數器的使用方法… 沒想到只會最簡單的那種！人家也想要可愛的圖啦~~~~哭泣！ (以
計數器到底怎麼用阿~~怒！【瑪姬】 at September 21, 2006 01:57 AM Trackback

目前有多網誌都已經提供單篇計數的統計功能，不過樂多在這方面似乎遲遲沒有推出，所以只好手動加入了，不過方法很簡單，不會浪費很多時間的。�
為單篇文章加入計數器【Jinn\'s Tech Blog】 at October 7, 2006 04:25 PM Trackback

� 這個單篇文章計數器有很多人都已經使用且非常習慣了。這個計數器只是一個小圖檔而已，只要將他貼在文章裡頭（最好是貼在「繼續閱讀」之後�
【無名分享】單篇文張計數器【 ☞ 雯ａⓦⓔⓝ ☜ 地帶】 at November 5, 2006 03:30 PM Trackback

本篇文章引用自艾瑪無名BLOG
[工具]單篇文章計數器~ 【lmc2006 \'s Blog - 愛管會】 at November 10, 2006 11:25 AM Trackback

� 這個單篇文章計數器有很多人都已經使用且非常習慣了。這個計數器只是一個小圖檔而已，只要將他貼在文章裡頭（最好是貼在「繼續閱讀」之後�
教學☆單篇文章點閱計時器【∥　一枚愛分享　∥　分享≠義務　勿求檔！　公告：網誌�】 at May 1, 2007 08:17 AM Trackback

1 2 Next

1樓
1樓搶頭香
請問""你要放的位置div名稱""
如果是要放在""繼續閱讀""之後的頁面中，
語法要寫成什麼呢?
謝謝艾瑪^^
smilejean at September 4, 2006 03:55 PM comment | prosecute

2樓
2樓頸推
我也想知道~
如果想要放在每篇文章的底部
那是放在 CSS裡的Content 那區的後面嗎? or?

謝謝~
Kate at September 4, 2006 04:10 PM comment |

3樓
3樓坐沙發
可以放在 comments-head 啊
也可以放在 trackback-url
我補充在文中了...
amarylliss at September 4, 2006 04:23 PM comment | prosecute

4樓
福樓
我趕緊來試試,
謝謝艾瑪!
amyle at September 4, 2006 05:15 PM comment | prosecute

5樓
專業的5樓
好可愛喔!!我也想試!!
嗚!!時間呀~~我需要時間><"
fannycute at September 4, 2006 05:30 PM comment

6樓
6樓
哇!^^
艾瑪分享這可愛計數器~大感恩~~
等會兒來試試
antiquity at September 4, 2006 05:59 PM comment | prosecute

7樓
7樓
請問也可以看ip的嗎 @@
如果有請告訴我如何搜尋
我無意來亂 >"<
ping at September 4, 2006 06:31 PM comment

8樓
8樓
BLOG PET就有這個功能
或者 sitemeter
不過看IP有什麼用呢？
amarylliss at September 4, 2006 06:34 PM comment | prosecute

9樓
9樓
請問那個可愛計數器的那篇
要怎樣才能看到呢？
我也想用可愛的計數器耶
謝謝
chiung at September 4, 2006 06:53 PM comment | prosecute

10樓
10樓
如果是要放在"繼續閱讀"之後的頁面中，
語法要寫成什麼呢?有點不懂~~><
謝謝艾瑪的教學:)
lkj331331 at September 4, 2006 07:11 PM comment | prosecute

11樓
11樓
對不起~
可是我貼在comments-head 和trackback-url都沒有出現！
請問我還有哪裡可以貼？
lucy17 at September 4, 2006 07:22 PM comment | prosecute

12樓
12樓
如果不會貼到CSS中的
請直接以圖檔貼在文章結尾喔
amarylliss at September 4, 2006 07:24 PM comment | prosecute

13樓
13樓
Dear 艾瑪:
我早就想試試這個計數器了
謝謝你詳細的說明哦!
elaine676 at September 4, 2006 07:32 PM comment | prosecute

14樓
14樓
To 艾瑪

我把他放在trackback-url那可是卻～發現他會顯示在最前端
而不是像艾瑪一樣是顯示在引用的最後面那邊
是哪裡搞錯了嗎？！另外～我想看可愛的計數器那篇
@o@a 可以開權限給我嗎謝謝艾瑪
xfish at September 4, 2006 08:18 PM comment | prosecute

15樓
15樓
感謝艾瑪的分享..^^
candy2506 at September 4, 2006 09:25 PM comment | prosecute

16樓
16樓
真是太棒了.太令人興奮了......
最近就一直想試試這功能.卻不得其門而入呢!!^^

不過我出現了個小問題..如果直接貼:
.trackback-url {
background: none url(中山大學計數器網址) no-repeat;
}
那麼計數器則會出現在[本篇文章引用網址]的"本"字上方
於是我雞婆的在 no-repeat後加一個 right,
計數器的確就乖乖的跑到~~~ '"最"' 右邊!!^^"a
可是，我想...能否讓技術器就乖乖的跟在"引用"
2字的後面呢？（就像艾瑪的CC標籤一樣）
inviteshu at September 4, 2006 09:47 PM comment | prosecute

17樓
17樓
謝謝艾瑪的分享 !!
我也試用了一下
只會最簡單的每篇貼上
但很好用呢~
venlo at September 4, 2006 10:07 PM comment |

18樓
18樓
CSS語法規嘗試失敗,
但是單篇的成功啦!!
感謝分享喔!
aileenti at September 4, 2006 10:22 PM comment | prosecute

19樓
19樓
好多選擇啊！
牛美眉的計數器都好可愛喲！>O<
謝謝艾瑪分享唷！
deepurple at September 4, 2006 10:35 PM comment | prosecute

20樓
20樓
請問 "可愛的計數器"那篇可以開放權限嗎? 或公開網址?
很喜歡裡面的計數器呢~
謝謝!
Kate at September 4, 2006 10:52 PM comment |

21樓
21樓
之前用過的可愛計數器
http://okcounter.com/

補充進去了...
amarylliss at September 4, 2006 11:05 PM comment | prosecute

22樓
22樓
謝謝艾瑪

之前我用最笨的方式 - 每篇都貼,
可是這數字常常亂跳, 真是傷腦筋吔~
妳提供這個可直接在CSS內, 真是太棒了,
至少以後要拿掉, 只要改一個地方就可以了.
己順利成功貼入在引用欄部份了.
大感謝囉~
joannemrslin at September 5, 2006 08:19 AM comment |

23樓
23樓
可愛計數器很好看耶~
謝謝你^_^

小莯
xemon at September 5, 2006 10:00 AM comment | | prosecute

24樓
24樓
呀~~~
好可愛的計數器>///<
謝謝艾瑪分享
poisson1015 at September 5, 2006 11:40 AM comment | prosecute

25樓
25樓
終於安裝完了～感謝艾瑪的指導。
fragula at September 5, 2006 11:49 AM comment | prosecute

26樓
26樓
摸索了好久，終於知道怎麼用啦!!太高興了~~
因為我是不懂CSS的人 >///<

.trackback-url {
background: none url(中山大學計數器網址) no-repeat;
}

中間的(中山大學技術器網址) 要換成下列網址
http://counter.nsysu.edu.tw/Count.cgi?dd=16
數字 16 可以換成你所喜歡的樣式
之前呆呆的直接複製上去 ^^" 哈~
juiya at September 5, 2006 02:31 PM comment |

27樓
27樓
引用摟!!3Q
吉莉安 at September 5, 2006 03:35 PM comment

28樓
28樓
進去可愛計數器的網站裡,可是還是不知從何弄起=..=
艾瑪敎敎我嗎?
memory100 at September 5, 2006 08:58 PM comment | prosecute

29樓
29樓
很可愛的東西耶^^
我也想來試看看!!
謝謝你的分享:>
cherry10192 at September 5, 2006 10:56 PM comment | prosecute

30樓
30樓
只會用貼在文章最後這個方法
呵呵~謝謝艾瑪

小乙
dimondq at September 6, 2006 01:55 PM comment | prosecute

1 2 Next

	<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=14">
	<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=15">
	<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=16">
	<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=25">

amarylliss。艾瑪[隨處走走] [教學] 單篇文章計數器

[教學] 單篇文章計數器