2008年9月27日 星期六

Blogger模版CSS語法細部介紹(下)

上次把body、header、Main、post大概介紹完了,接下來就是Sidebar、comments及footer的部份,這部份比較複雜,而且很多模版設計者都有與眾不同的樣式,所以講解起來有點困難,大概介紹基本觀念及參考的方向。

不過這裡有一個部份是關於每篇文章下方都有個回到首頁、較新的文章及較舊的文章連結,和Atom的連結,


回到首頁,預設在中間
#blog-pager {
text-align: center;
}
較新的文章,預設在左邊
#blog-pager-newer-link {
float: left;
}
較舊的文章,預設在右邊
#blog-pager-older-link {
float: right;
}
Atom的連結,就是提醒讀者訂閱RSS的按鈕,通常若有使用feedburner,這一項可以隱藏,預設在左邊
.feed-links {
text-align: left;
}
如果你不想網頁上出現這些連結,只要在裡面加上一行敘述即可,他就會隱藏了
display: none;
如果你想更改顯示位置,也是改left或是right即可,而如果你想用圖片顯示,可以參考 將Archives頁面底部的文字導向連結圖形化這篇的作法,綸太郎自己倒是沒試過。

【Sidebar】邊欄
大部分的模板為一欄式,或是兩欄式的樣式,當然比較專業的會使用到多欄式或是綜合式的邊欄,所以元素的定義名稱都不至相同。

如果你本來只有一欄,想再加入一欄可以參考(非固定式)把Blog設為三欄—Not my business一文介紹,不過由於現在三欄式的模板不像以前那麼少,建議還是從模版資源(blogger templates)裡找到一個喜歡的來用就好了,不用動手自己改。

#side-wrapper { 整個邊欄區的定義,有的會再分為sidebar1、sidebar2
#sidebar h2 { 邊欄區的標題定義
.sidebar ul li{ 邊欄的項目條目,這裡我們常會用項目符號,來讓排版美觀,可參考Blogger 新手基本技巧問答(二)
.sidebar .widget, .main .widget { 邊欄及主欄的widget格式,通常我會設與左右的距離,譬如
padding: 0 5px 0 5px; (左右都空5px)

【comments】意見區
這個在Blogger 新手基本技巧問答(三)有提到一些技巧應用,如加上圖片或是位置調整。


#comments h4 { ,這個通常會用來定義回應區標題區,就是第一行字,就是 6人發表意見,
.comment-author { 回應區作者
.comment-body { 回應區主體
.comment-footer { 通常指發表日期時間
comment-link { 張貼意見的連結
而有些模板會用
#comments-block {,也是代表回應區,因為回應區通常是一大塊,然後在後面加上相關的定義名稱,如 #comments-block .comment-author { 就是回應區的作者格式定義。

這裡我有使用作者回應會和網友回應的顏色不同的Hacks,請參考高亮显示作者评论与评论通知,他會多出.comment-body-author p { 的定義,由於是簡體中文,加上不是每個模版都適用,如果你想要這種效果,可以參考Skyvee的為 blogger 留言區(comment) 加個對話框吧!會較容易上手,不過我因為一開始就使用上述簡體版本,skyvee的還沒用過。

【footer】頁尾區
通常頁尾很簡單,我個人是不喜歡使用太複雜的元素,有的人會在將此區再劃分為三欄或是兩欄,因為想要放的小工具很多或是整個頁面的考量,先前綸太郎也有嘗試用過這種模版,但是效果並不好,一般人比較不會想要點選這裡的東西,因為滑鼠要捲到最後,照一般人的使用習慣這種版面比較不討好,不過倒是可以放些資訊型的文章供網友參考。

通常在這區我會在這裡放上版權宣告及網站相關訊息的文字,及登入Blogger後台的連結,在Blogger 新手基本技巧問答(四)一文裡有提到。

這裡通常設footer-wrapper,或是只有footer的定義,如果想要加上背景圖片,一樣是
. footer {
width: 980px;
background: #000 url("圖片網址") no-repeat;
}
有些模板你要再設height: 80px; 高度,才能將你的圖完整顯示,或是限制只出現某部份,這是要注意的地方。

而footer h2這是頁尾區網頁元素的標題定義,如果你想有標題時可自行定義內容。

這裡一樣會有 a 文字超連結的設定顯示樣式,可以參考上篇說明。

其他還有像是
.code(程式碼區) ,顯示程式碼區域的格式,可參考[筆記]在文章裡顯示優質的程式碼區一文作法。
.blockquote(引用文章區),引用他人文章特別顯示的格式,通常一般模板都會有blockquote定義,如果你不喜歡也可以自己設計,參考善用及改造 blogger 中的引用文字(blockquote)功能一文介紹再加以變化花樣即可。

網路上關於寫Blogger技巧與Hacks的高手非常多,有興趣的都可以利用Google加以搜尋,找到你想改頭換面的效果功能,多多參考他人的文章對自己改版也很有幫助。

因為常常換模版,也常修改模板,而且最近模板資源真的是大幅度的增加,所以建議網友們選一個適合自己需求的template,強過自己去修改模板,因為修改模板真的是很辛苦的事情,如果你仍然有興趣,還是可以慢慢試,從錯誤中學習成長,多多參考網路上的教學,至少從中學到的都是你自己的資糧。

延伸閱讀:
Blogger模版CSS語法細部介紹(上)
Blogger template模板教學課程---CSS外觀解說

2008年9月22日 星期一

Cbox及Shoutmix留言板如何封鎖IP位址

如果你的留言板常被網友留下廣告留言,或是不明人士(就是有署名但沒有留下網址或是信箱)的人亂留言,可以考慮在留言板的後台管理,加上過濾網友的功能,讓自己不用再看到那些煩心的留言,設定方式如下。

前提當然是你要有申請這兩個留言板的功能,以綸太郎而言我較喜歡CBOX,因為可以自設表情符號,這在讓你的CBOX留言板更活潑生動一文裡已經提過,而且目前外觀有正體中文版,對網友而言比較好上手,而Shoutmix的功能則較完整,目前還是英文介面,依你自己需求而選擇。

Cbox留言板,封鎖IP位址
登入後,進入後台,找到最右邊的Message,選擇第一項Message把你想阻擋的留言勾選後,按下Ban,就會加入阻擋名單裡,


他預設是14天,如果要永遠剔除呢,找到上方功能表裡的Users&Access,按下Blocked user這裡也可以直接輸入IP來阻擋,3weeks(三星期)、1 month;(一個月)或是forever(永遠),當然就選forever了,


而你先前已列入阻擋名單的要改變阻擋期限,只要按下名單上方最右邊的Change expiry,就會跳出一個小視窗,讓你填期限,


填完就行了,你會看到期限變成never,就是這位網友的留言永遠都被封鎖,如果要解除阻擋,則是選擇該IP後,按下Unban即可,下次這位被阻擋IP位置的網友再來留言,網頁上就會顯示"你無法張貼訊息,你已經被停權"的視窗了。


其實現在大部分的人都是使用浮動IP,所以每次可能IP後兩碼都不一樣,只能來一個擋一個,我有試過用310.234.*.*,這種方式來擋,不知是否能奏效,但是在台灣應該不適合,因為大部份的人都是用中華電信,前兩碼很多都一樣,會擋到太多人。

Shoutmix留言板,封鎖IP位址
登入後,選擇最右邊的Security(屬於第三個Setting功能裡),按下Ban Control,


可以選擇阻擋IP或是網址,


這裡應該是永久阻擋,沒有期限的問題,免費版本限制20個IP及URL就是了。

如果下次這位網友,再進入你的留言板留言,就會出現這個畫面,顯示他的IP已經被阻擋了,無法留言,要他稍後再試,當然已經被我擋掉了,下次試也沒用的,照擋。


如果想一勞永逸,就是把留言板拿掉,或許對網友有些不方便,但我想有時也是讓自己杜絕不必要干擾的方式之ㄧ,網友如果真的對你的文章有疑問,我想還是會留言在文章的迴響裡的。

延伸閱讀:
如何查詢及追蹤網路留言IP位址的來源

2008年9月19日 星期五

如何查詢及追蹤網路留言IP位址的來源

當部落格流量漸漸成長後,格主們會發現常有會莫名奇妙的留言或是廣告垃圾留言,出現在自家的園地上,如果格主們也遇這種情形,想從IP位置來判斷是否有某人在惡作劇,可以利用下列IP查詢工具,

IP查詢工具【中文網站】
這是台灣網站登錄目錄裡的一項功能,也應該是大部分人用的,可以查詢國家,而縣市別沒法查詢,在台灣似乎都是以台北代替,台灣地區會秀出IP來源,一般網友可能是用中華電信,但如果是某個公家單位或是大企業,通常是用專線,有專用IP,譬如說教育部,來源就會直接顯示教育部,所以有些還是可以得知是哪個機關或公司到你的網站上來。但IP位置是其他國家時,通常就無法顯示IP來源,只有國名,但都會有經緯度,進去這個網站就會秀出使用者的IP資訊,然後下方可輸入你想查詢的IP。


● GeoIP---MaxMind【英文網站】
http://www.maxmind.com/app/lookup_city?type=geolite
這個比較有名,免費的功能可以提供國家及地區的IP對應位置,我自己測試在台灣可以到對應到城市,還蠻準的,還有提供付費版的,因為它支援PHP語言,對於專業網站經營者,應該幫助較大,詳細情形可以參考這篇文章介紹, 你的訪客來自哪些國家、哪些城市?


IP-Address.com【英文網站】
這一個我覺得功能最強大,但有時可能是cookie的影響,結果有時會有點錯亂,以第一次測試的最準,或是重新連線再試試看。

這是從免費資源網路社群裡找到的工具,可以找到IP位址的國家、地區(州)、城市,使用的電信系統,甚至有相對應的Google Maps地圖,找到這個人所在的位置。


但我實際操作後,我覺得如果是浮動IP應該只能測試到伺服器的位置,也不是真正留言者的位置,因為大部分的人都使用浮動IP,但所在地區是沒錯的。

以上都是網友使用真實IP上網才能查詢到真實的位置,而最多也只是到城市,除非對方使用固定IP或是專線,如果是用代理上網,就無法得知真實IP,因為我們也不可能取得代理伺服器的名單,也沒法判斷是不是用代理IP,除非這個網友常和你往來,但每次IP位置的國家都不一,就有可能使用了代理IP,這是我自己判斷的,這部份我自己不是很熟悉,畢竟我並不想當網路糾察隊或是從事駭客任務,只是剛好碰到這問題。

那應該有人會問,那我如何得知網友的IP位址呢?以最常使用的留言板Cbox及ShoutMix,都可從後台看到留言的IP,至於部落格,就我所知痞客邦及WordPress的後台也可以看到留言的IP,目前Blogger是沒有這功能的,Blogger加油啊。

所以我們就要利用一些網路追蹤工具,綸太郎有使用過的就是ICEROCKET裡的BlogTracker及StatCounter,兩個都要註冊才能使用,這兩個工具都能追蹤到網友的IP位置。

Blog Tracker
這個追蹤工具,後台介面很簡潔,比起Google Analystic的分析報告是弱了許多,但是強在他可以顯示即時的訊息,至少是5分鐘前的,但有一定的追蹤時間,每個時間點我查的筆數都不太一樣,應該和網站的流量有關。
StatCounter
這個很久以前綸太郎使用過,但因為後台介面繁複,英文字太多,所以目前很少利用它,不過可以追蹤的期間我記得比較久,功能強大,停留幾分鐘,看了哪些文章,都有紀錄,是非常詳細的追蹤利器。

想了解這兩種工具的使用方法,上Google搜尋一下,應該都有教學。

我想像我一般的格主,如果看到令自己心情不好的留言,或是廣告留言一直來,只能利用IP來封鎖,而目前使用的留言板CBox及ShoutMix留言板都有這項功能,將他們的IP 封鎖Ban起來,而對於文章迴響部份,可以啟動意見管理,由格主審核過後才將留言釋出,這都是可行的方法。

另外關於Cbox及Shoutmix如何阻擋IP就等下篇再解說了。

延伸閱讀:
Cbox及Shoutmix留言版如何封鎖IP位址

2008年9月17日 星期三

blogger模版CSS語法細部介紹(上)


上次在Blogger template模板教學課程---CSS外觀解說一文,已經大致說過CSS的結構,大概有body、header、post(Main)、sidebar、comment等區的css碼要定義,以下分別來說明細部的規則。

【body部分】
這是最主要整個模板的配置,但是這只是基礎的,你在分別的區位,例如post或是sidebar,還是可以定義其他的顏色或是字體大小,越後面定義的就會更新前面所定義的樣子。

通常body裡定義的重要因子有下列,
body {
background:#ffffff; 背景顏色,整個模板的背景顏色,你也可以用圖片代替,語法變成
background: #ffffff url("圖片網址") no-repeat;

no-repeat:表示圖片不重複,也可用以下代替。
repeat-x:表示橫向重複
repeat-y:表示縱向重複

margin:0; 距離邊界為0
color:$textcolor;
通常在這裡我們不會定義版面大小,這在以前的文章已經提過,就不再重複。

這有個$符號的元素,表示前面已經有定義這個文字的顏色或大小,就是
/* Variable definitions這段的定義,如果這裡有定義,我們在後台的字型和顏色這個選項就可以發揮作用,只要在字型和顏色變更,在前台就能出現效果,這是較正規的blogger設計方式,但有些模版並沒有這個定義,譬如我現在使用的模板就沒有這部份,所以每個定義值要改顏色就要找到相對應的語法敘述來改,會比較不方便,而且應該也是不符合CSS精簡的原則。

font: (或是font-size),字型大小,可以用px或pt來顯示,如果你覺得IE和Firefox呈現的文字差異太大,可以參考我的解決方法,如何讓Firefox的字和IE一樣大?但我想這應該不是正規的方式,我曾經在書上讀到應該採用em來設定文字大小,再透過百分比來控制你想呈現的大小。

font-family: arial,verdana,helvetica,tahoma,Sans-serif; 採用的字型樣式,通常以arial│Helvetica│Sans-serif為常用的樣式。
font-weight:字型粗細,bold粗體│normal正常

text-align: center; 部落格置中,這對解析度較大(如1280*1024)的比較看得出作用,不會偏左或偏右。

a:link {
color:$linkcolor;
text-decoration:none; 【文字效果,有分underline加底線│overliner加頂線 │line-trough加刪除線│blink文字閃爍│none無效果】 }
這代表有超連結的文字樣態,另外還有 a:visiteda:hover ,a:active
a 代表超連結元素,有四種屬性,
link:連結的原始顏色〈通常 a:link{ 會簡寫成 a { 〉
visited:拜訪過的顏色
hover:滑鼠在上面滑過的顏色
active:正被選取,或是按下時顯示的顏色,這個比較少用。
比如說你將文章標題(.post h3)設為白色,但是出現的卻是藍色,就是因為標題是個超連結,所以相關的語法(如.post h3 a) 也要改,才能達到你想要的顏色,這是就要找到a這個關鍵字來改。

a img {
border-width:0;
}

圖片連結,寬度設0,就是沒有邊框,有時你發現為什麼圖片有框,是因為預設是有框的,只要加入border-width:0;就可以把框線去除。

【header】
通常在這區包括header-wrapper及description這兩個元素,
#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
}
定義標頭區的寬度,有時也可加入高度,例如,height:120px;通常會有控制高度的語法,是因為你的標題是以圖片為背景,用高度、寬度比較能定位。

#header .description {

display: block; 【顯示為一個區塊,簡單的說就是顯示這個元素出現時會在新的一行出現,如果是inline則是在同一行出現】
color: #545454;
text-align: left;
margin: -2px 0px 0px 0px;
padding: 1px 0px 10px 0px;
}
這是網誌敘述的部份,介紹你的網誌的slogan。

#header h1 {
display: block;
color: #f2984c;
font: normal bold 164% Georgia, Times, serif;
text-transform: uppercase;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
}
#header h1就是你的部落格標題定義,字型樣式、大小、粗細、位置左右都可以在這裡定義,其中text-transform: uppercase; 是對英文標題有用,就是把英文字母轉成大寫也可設定為capitalize第一個字母大寫或是lowercase全部轉為小寫,有的會加上定義#header h1 a , #header h1 a:hover,{,就是標題超連結狀態下顯示的顏色,這時上面#header h1 { 設定的顏色就變成沒有意義了,除非你的標題不使用超連結。
而常看到margin、padding的用法,可以參考Blogger 新手基本技巧問答(二)的內容。

【MAIN部分】主文區

#main-wrapper {
float: left; 【設定主文在左或右,如果你想變更左右排版,可以和#sider-wrapper 的定義對調】
position: relative;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
word-wrap: break-word;讓英文字自動斷行敘述。
這裡有個overflow: hidden;建議要放,如果超過寬度自動顯示隱藏,這樣版面看起來較工整,但有些人是會放圖片,常會超過寬度,但還是堅持要完整呈現,可以設定visible,只是這樣有時會造成你的邊欄整個往下掉。

h2.date-header
{
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: #b3b3b3;
font: normal normal 95% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
這是文章日期的設定,靠左或靠右是比較重要的設定。

.post
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: left;
font-size:9pt;
}
主文的設定,這裡最重要,文字的大小、間隔、行高,會讓你的網站讓人看起來是否舒服、容易瀏覽都可以在這裡設定,以上語法是我一般的設定,
行高1.6em;(line-height),
字型9pt大小,
有的比較仔細的還會設定letter-spacing:4px;代表字元與字元的距離。

如果你覺得文章間空隙太小太緊密,可以用margin-bottom:30px;或是margin:0px 0px 30px 0px;來設定與下方的距離高度,不一定要下方或是上方也可,高度自行調整,也可以用在標題區或是文章頁尾區都可設定。

.post h3 {
margin: 0px 0px 15px 0px;
padding: 0px 0px 5px 0px;
color: #545454;
font: normal normal 140% Georgia, Times, serif;
text-decoration: none;
text-align: left;
line-height: 1.4em;
border-bottom: 1px solid #545454;
}

文章標題(post h3)的定義,通常文章標題字型會設大一些或是粗體、斜體,也可以在這設背景圖案或是分隔線,如border-bottom: 1px solid #545454;(在標題下方加上橫線),可以參考換Banner圖片及文章標題加上圖示這篇,這裡也要注意如同上述 .post h3 a, .post h3 a:hover等超連結的語法細節。

.post-footer {
display: block;
margin: 15px 0px 20px 0px;
padding: 10px 10px 10px 10px;
color: #f2984c;
line-height: 1.5em;
border: 1px dotted #ffffff;
}
這是文章下方(頁尾)的資訊區,通常會有文章的作者、發表時間點、回應連結、文章分類或此文章的連結等等,顯示狀態可以在這裡設定,通常會用border把這塊圈起來或是設背景顏色,突顯與主文的分別。

這篇先寫到這裡,因為已經太長了,而上述的這些定義是大部分模板所設計的名稱,也是有不一樣的名稱顯示,不用拘泥,大概都可以自己判斷是寫哪一段的語法,如果覺得很困難,沒關係,選擇一個簡單的模板就好,關於CSS樣式真的是很多要學的,我自己也是常看書看不懂,因為都是原文翻譯的,真的想要自己改模板,可以多多測試就可以知道這段語法出現在哪裡,要如何使用。

延伸閱讀:
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---CSS外觀解說
Blogger模版CSS語法細部介紹(下)

2008年9月11日 星期四

BloggerAds發生了什麼事

綸太郎自從8月以來就常常覺得BloggerAds的廣告有點怪怪的,常常出現的非常慢,拖慢網頁載入的速度,而9月初則是常常沒有出現,造成一片空白,要按一次重新整理才會再出現,而且最重要的是從8月份以後,感覺收益的算法似乎和以前不同,最近在網路上看到別的部落客似乎也有一樣的問題,納悶究竟BloggerAds發生了什麼事?

2008年9月5日 星期五

美麗又剔透精緻的icon圖片

網站:Все для Веб мастера и создания сайта

這個網站介紹很多PhotoShop製作的圖片,都非常的精緻與特別,網站的文字綸太郎雖看不懂,但總能看圖吧,其實浩瀚網海有許多我看不懂的東西,這種看不懂文字的網站,通常有超連結網址的部分,滑鼠置於超連結上方,狀態列還是會以英文顯示,所以我都是從網址來判斷,大概是什麼東西,或是靠Google Translate,查過這些文字應該是俄文,可以參考這個俄語教學網站,我很喜歡這個系列的作品,透明晶瑩的圖片。
v
分別有26個ICO及PNG圖片,真的非常精緻。


參考文章:
Иконки: Irish Icons Pack
下載點