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

Sep 04 Mon 2006 16:00
[教學] 單篇文章計數器

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

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

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

不過，如果要每篇文章都貼，是不是很累啊？艾瑪懶人就直接把他寫在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的計數器也是一絕啦！

Posted by amarylliss at 痞客邦 PIXNET Comments(44) Trackback(0) Hits(1879)

Shorten Url Forward by E-mail Forward to Guestbook

Global Category:No Category
Personal Category:　╠ 艾瑪の部落格習作&語法分享
Previous post in this category: [教學] 網誌延伸閱讀表格(許願池第一篇)
Next post in this category: [分享] 部落格日記表格及作法

Posts on this date

▲top

Trackbacks (0)

Comments (44)

Post Comment

#1 smilejean on 2006/09/04 15:55
請問""你要放的位置div名稱""

如果是要放在""繼續閱讀""之後的頁面中，

語法要寫成什麼呢?

謝謝艾瑪^^

#2 Kate on 2006/09/04 16:10
我也想知道~

如果想要放在每篇文章的底部

那是放在 CSS裡的Content 那區的後面嗎? or?

謝謝~

#3 amarylliss on 2006/09/04 16:23
可以放在 comments-head 啊

也可以放在 trackback-url

我補充在文中了...

#4 amyle on 2006/09/04 17:15
我趕緊來試試,

謝謝艾瑪!

#5 fannycute on 2006/09/04 17:30
好可愛喔!!我也想試!!

嗚!!時間呀~~我需要時間><"

#6 antiquity on 2006/09/04 17:59
哇!^^

艾瑪分享這可愛計數器~大感恩~~

等會兒來試試

#7 ping on 2006/09/04 18:31
請問也可以看ip的嗎 @@

如果有請告訴我如何搜尋

我無意來亂 >"<

#8 amarylliss on 2006/09/04 18:34
BLOG PET就有這個功能

或者 sitemeter

不過看IP有什麼用呢？

#9 chiung on 2006/09/04 18:53
請問那個可愛計數器的那篇

要怎樣才能看到呢？

我也想用可愛的計數器耶

謝謝

#10 lkj331331 on 2006/09/04 19:11
如果是要放在"繼續閱讀"之後的頁面中，

語法要寫成什麼呢?有點不懂~~><

謝謝艾瑪的教學:)

#11 lucy17 on 2006/09/04 19:22
對不起~

可是我貼在comments-head 和trackback-url都沒有出現！

請問我還有哪裡可以貼？

#12 amarylliss on 2006/09/04 19:24
如果不會貼到CSS中的

請直接以圖檔貼在文章結尾喔

#13 elaine676 on 2006/09/04 19:32
Dear 艾瑪:

我早就想試試這個計數器了

謝謝你詳細的說明哦!

#14 xfish on 2006/09/04 20:18
To 艾瑪

我把他放在trackback-url那可是卻～發現他會顯示在最前端

而不是像艾瑪一樣是顯示在引用的最後面那邊

是哪裡搞錯了嗎？！另外～我想看可愛的計數器那篇

@o@a 可以開權限給我嗎謝謝艾瑪

#15 candy2506 on 2006/09/04 21:25
感謝艾瑪的分享..^^

#16 inviteshu on 2006/09/04 21:47
真是太棒了.太令人興奮了......

最近就一直想試試這功能.卻不得其門而入呢!!^^

不過我出現了個小問題..如果直接貼:

.trackback-url {

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

}

那麼計數器則會出現在[本篇文章引用網址]的"本"字上方

於是我雞婆的在 no-repeat後加一個 right,

計數器的確就乖乖的跑到~~~ '"最"' 右邊!!^^"a

可是，我想...能否讓技術器就乖乖的跟在"引用"

2字的後面呢？（就像艾瑪的CC標籤一樣）

#17 venlo on 2006/09/04 22:07
謝謝艾瑪的分享 !!

我也試用了一下

只會最簡單的每篇貼上

但很好用呢~

#18 aileenti on 2006/09/04 22:22
CSS語法規嘗試失敗,

但是單篇的成功啦!!

感謝分享喔!

#19 deepurple on 2006/09/04 22:35
好多選擇啊！

牛美眉的計數器都好可愛喲！>O<

謝謝艾瑪分享唷！

#20 Kate on 2006/09/04 22:52
請問 "可愛的計數器"那篇可以開放權限嗎? 或公開網址?

很喜歡裡面的計數器呢~

謝謝!

#21 amarylliss on 2006/09/04 23:05
之前用過的可愛計數器

http://okcounter.com/

補充進去了...

#22 joannemrslin on 2006/09/05 08:19
謝謝艾瑪

之前我用最笨的方式 - 每篇都貼,

可是這數字常常亂跳, 真是傷腦筋吔~

妳提供這個可直接在CSS內, 真是太棒了,

至少以後要拿掉, 只要改一個地方就可以了.

己順利成功貼入在引用欄部份了.

大感謝囉~

#23 xemon on 2006/09/05 10:00
可愛計數器很好看耶~

謝謝你^_^

小莯

#24 poisson1015 on 2006/09/05 11:40
呀~~~

好可愛的計數器>///<

謝謝艾瑪分享

#25 fragula on 2006/09/05 11:49
終於安裝完了～感謝艾瑪的指導。

#26 juiya on 2006/09/05 14:31
摸索了好久，終於知道怎麼用啦!!太高興了~~

因為我是不懂CSS的人 >///<

.trackback-url {

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

}

中間的(中山大學技術器網址) 要換成下列網址

http://counter.nsysu.edu.tw/Count.cgi?dd=16

數字 16 可以換成你所喜歡的樣式

之前呆呆的直接複製上去 ^^" 哈~

#27 吉莉安 on 2006/09/05 15:35
引用摟!!3Q

#28 memory100 on 2006/09/05 20:58
進去可愛計數器的網站裡,可是還是不知從何弄起=..=

艾瑪敎敎我嗎?

#29 cherry10192 on 2006/09/05 22:56
很可愛的東西耶^^

我也想來試看看!!

謝謝你的分享:>

#30 dimondq on 2006/09/06 13:55
只會用貼在文章最後這個方法

呵呵~謝謝艾瑪

小乙

#31 radman on 2006/09/06 15:00
這篇我也是期待好久哩

看完搞了一陣子還是不滿意

在參酌其他引用者的文章

總算弄好了

感謝艾瑪~

#32 gregshalin on 2006/09/06 16:53
終於等到計數器的教學了....

謝謝艾瑪.....

#33 chienHuei99 on 2006/09/06 19:46
謝謝艾瑪的分享,我也用了計數器囉!

薄荷

#34 diannelee on 2006/09/07 05:02
謝謝艾瑪~~ 我也在CSS裡面加了記數器!! ^__^

#35 elinor on 2006/09/07 12:41
謝謝艾瑪的分享,我也終於試成功了..

不過也只能放在標題,或引用欄中,

沒法放在繼續閱讀那欄耶..

沒關係,我會繼續研究地..

樓上inviteshu的問題,我也遇到

可以試試將right改成 60%,或65%,70%,

可自行依文章比例看它適合擺放的位子

這樣就可以成功地將計數器放在引用2個字的後面囉

#36 nastasia on 2006/09/07 14:49
聽說這樣統一放會讓全部文章的數字都一樣耶～

自己沒有這樣放過所以不清處

請問艾瑪

會出現這樣的問題嗎？（滿蠢的問題）

#37 tarosan on 2006/09/07 16:31
感謝艾大滴分享

因為也遇到inviteshu滴問題

So~

也謝謝inviteshu滴分享

#38 chyi517 on 2006/09/21 01:47
請問艾瑪~

那個可愛計數器是不是要先註冊->按Request選擇圖案

之後才會寄e-mail 給我們哩??

是這樣用嗎??

#39 elatte on 2006/09/25 22:41
艾瑪

上面的計數器(中山大學提供的)現在都無法顯示了耶

#40 myphoto on 2006/10/04 20:39
小弟不才，也寫了個計數器想給大家用用，不過表達得好像不大好，週圍

的人都說不大懂，如果您有興趣使用的話，不妨幫我寫個使用說明。

我的計數器安裝很容易，如果放在網誌說明的話，您的每一篇文章都會有

專屬於那篇文章的計數器，當然圖形也可以個別設定成不同的，讓每篇文

章都能以不同的圖形顯示計數器，每篇文章也有獨立的訪客統計分析，您

可以對每一篇文章從訪客人次(灌水)、訪客人數(不灌水)、線上人數中選

擇其中一個來顯示。也有顯示線上訪客的選項，您可以從圖形、文字或統

計資料(包含線上人數)中選擇一個來顯示，如果您找得到在哪設定的話...

換句話說，該有的功能都有了，別人沒有的功能也有了，有點太貪心。

Private Comment

Private Comment

#43 amarylliss on 2006/10/28 22:52
我現在也沒有用OKCOUNTER喔

也許去問問有用的人比較快

目前一直趕巴黎的遊記稿子可能也沒有時間教學

不好意思！請見諒 ~

#44 傑克膏膏 on 2007/04/29 23:31
okcounter的請教
艾瑪咩咩

你知道現在的okcounter

怎麼使用嗎?

至從她改版後，我都不知道怎麼註冊

後來好不容易註冊成功

但是計數計卻不知道如何使用...

===

另外請問你還知道有其他和okcounter一樣採用圖形是的計數器的網站嗎?