2007年5月31日 星期四

三欄版面的再進化

夏天到了,來改個清爽的版面,風鈴配綠葉,很有夏天的清涼感。


這次的設計參考了一些資料,總找不到自己所要的,我要的是三欄,但又不完全是三欄,想自己設計網頁,可能會比較能符合自己的需求,可是用Dreamweaver做網頁實在是太麻煩了,也很久沒設計了,很多都忘了,想用wordpress設計,可是也是要有自己的伺服器,這對我來說太難了,好不容易找到一個比較適合我的版面,從”小梅子”的部落格裡找到的,可以把最新文章及最新回應,用寬板的格式來顯示,其他的則用三欄式的,很符合自己的需要,不過還是希望能將footer部分,分成三部份,試著用table來分,可是好像css語法無法放進去,其實還是可以再改,不過慢慢來,先這樣子。

參考來源:
小梅子的blogger
http://jacobmei.blogspot.com

2007年5月13日 星期日

只顯示文章標題

如果文章越寫越多,我想要找某一分類的文章或是某一個月份的文章,應該是要越簡明越好,用了懶人法的繼續閱讀後,不知為什麼就會自動把文章用標題方式列出,但是我這功能刪除後,就不行了,會看到自設的繼續閱讀文章段落頁面,於是又要找方法解決,於是參考了下列這個網站的做法,但是怎麼標題都擠到一塊了,原來還要加入下面那行語法,分行並加入圖示,只是那行跟我的版本不太一樣,顯示了紅色錯誤訊息好像少了一些東西,
<ul><li><a expr:href='data:post.url'><data:post.title/></li></ul>
好像 </li>之前少了</a>,改了之後就成功了。


(5.31更新)
不過最後還是決定留著一小段文章,可以大概知道文章的內容,所以這方法就不用了,而且這網站好像也很久沒更新了,怪怪的。

參考來源:
Neroro工事記實
http://neroro.blogspot.com/2007/01/blog.html

2007年5月8日 星期二

買筆電,心得分享

前一陣子幫一個香港朋友買筆記型電腦,他指名要acer的,因為他知道acer香港有提供售後服務,我是不太清楚,有問題比較能找得到地方修理,由於朋友對電腦只有基本的基礎,因為工作需要,目前正在學習繪圖軟體,上課都要自備筆電,

2007年5月6日 星期日

邊欄標題加上圖示

更改方式,進入範本,更改修改HTML的內容,
按Ctrl+F出現 尋找 的對話框,然後找到 .sidebar li{這個區塊,這個敘述裡加上
background:url(“圖片網址”) no-repeat;
再利用padding調整圖示與標題之間的位置就完成了。

另外沒有圖示之前,原先設計是邊欄標題第二行的文字會內縮,已作區別,有這行敘述
text-indent:-15px;
可以把他拿掉,標題就會齊頭,而以圖示作為區別了。

新增最新文章&最新回應

● 最新文章做法
最簡單的方法就是在範本裡,新增網頁元素---資訊提供
然後把網址填進去,在網頁最下方有個Atom按右鍵找出他的網址,大概是像這樣的
http://你的網址/feeds/posts/default
將網址貼上去然後按繼續,(有時候會很久,最近試都不成功所以放棄了)

● 最新回應做法如上,只是網址改一下
http://你的網址/feeds/comments/default
最後一個字可以從default改成full,就會顯示全部,但如果你的標題或是回應都很長,載入就會花比較多時間。

這兩個做法,我都有試過,有時候要等12小時以上,甚至更久,無法及時更新,用這個方式的人要有耐心一點。

如果要即時的出現在你的部落格,可以參考網路上這個大部份人採用的方式,感恩作者,


參考來源

堯@部落格


不過我修改了一些,因為不想顯示最新文章的日期,就把他的語法最後一段改了一下,去掉這段敘述 timestamp.firstChild.nodeValue.substr(0,10)+
然後把這段敘述的前面的'</a>-'的-拿掉,看起來比較美觀,不想留那個尾巴,希望不會有問題。

最新回應也是一樣,把 timestamp+'-'+ 這段日期標示的文字拿掉,就成了我目前的版面。

2009.3.6更新,目前的最新回應是使用Abin's Tech NOte的方式
Abin's Tech Note: 「最新回應」模組 (Recent Comments)
他可以展示下一頁、上一頁的作法,載入速度也比較快。

2007年5月5日 星期六

換Banner圖片及文章標題加上圖示

不想用blogger制式的格式,雖然他的排版還算簡單乾淨,但總想擁有一個屬於自已的呈現方式,蓋個blog的窩就像佈置自己的房間,縱使沒有什麼美術方面的天份,顏色配置的概念也不懂,只是想讓自己看得順眼,如果連自己都不想看的部落格,還有誰會進來?

更改方式,進入範本,更改修改HTML的內容,
用I.E者按Ctrl+F出現 尋找 的對話框,然後找到 /*Header這個區塊,應該是第一個,在#header-wrapper {這個敘述裡加上或是後將預設的圖片網址設成自己的就可以了,
background:url(“圖片網址”) no-repeat;
我的版面預設值是800*600,而我的圖是長條型的大概長度是760,所以不想重複顯示會加上no-repeat,如果有的人是1024*768,沒有加上no-repeat,看到的就會重複圖片,變得很醜,但如果本來templet預設就沒有圖片,就自己加上這個敘述即可。
然後配合你的Banner,再調整標題位置就完成了。

Blogger預設的有的是沒有Banner圖,而是用框框將標題框住的語法類似這樣 "回"
border: 1px solid $bordercolor;要記得將這行敘述刪除再加上background的敘述即可。

如果想在每篇文章標題前加個圖示,則是找到 /* Posts這個區塊
.post h3 { 裡,加上 background:url("圖片網址") no-repeat; 語法,不過圖片格式要小,大概20*20就可以了。
有的人可能是 .post-title {,每種樣版的語法都不盡相同。
如果只是想讓標題底色不同來區別,則是加上 background:#色碼; (背景色)
color:#色碼;(文字色) 自己再調整即可。
想要什麼顏色,可以到這裡去找
原色大辭典
P.S. 其實每個templet預設的語法都不相同,記得更改前要先將自己原先的css語法備份,版面不是自己所要時才可以再回復原先的格式。

2007年5月3日 星期四

繼續閱讀的設定

繼續閱讀,網路上找到有兩種方式可以達成
1、在每篇文章中加入<span class="fullpost">要隱藏文字的段落</span> 當然也要在後台html裡面先更改css的設定

2009.9.30 更新
目前Blogger已經推出新版的編輯器,可以直接標記Read More的功能,請參閱,
Blogger文章編輯區新版模式正式啟用

參考來源 :
羊男實驗の咖啡館
http://metamuse.blogspot.com/2006/11/read-more-archive.html

2、使用增加網頁元素
參考來源:
繼續閱讀懶人加強版
http://cjhtech.blogspot.com/2007/02/blogger.html

當然是第2種比較省力,但是很奇怪,設定在第3行斷行,可是都沒有成功過,每篇文章斷行的地方的不一,這方法也不太有效,有時候文章很長,沒有自動用
</br>來斷,他就會顯示的很長,如果確定要從第3行斷行,就要在適當的地方按Enter來斷行,因為他是以</br> 來判定,如果要美觀點,當然是要選擇第一種,要斷哪就斷哪,想要隱藏的地方再設定就好了。

目前這個版本已更新,功能更豐富,很多bug也解決了。

實驗過後,還是選擇第一種,因為第二種是全文出現後,再縮短,會拖延首頁載入的速度,而且斷行還是有問題,常常還是要自己再調整過,如果你的文章很多可能就適合第二種,一次搞定,但如果是才開始經營網站的,還是建議第一種,自己一篇一篇設,必較能符合自己的需求。

如何在標題列加入網頁元素

通常blogger的制定模式,網頁元素是增加在邊欄的,但是看到好多網站可以把網頁元素放到標題欄的位置,研究了ㄧ下,像是放Flickr的照片,或是Google Adsense的連結,甚至是Lebel Cloud,很像以前自己用Dreamweave的Layer觀念ㄧ樣,於是就來試試看,方法真是簡單,可以參考最下方的網站。

但是使用過之後,發現這個方法有ㄧ個小小的Bug,就是新增可以成功但是無法調整位置,只能出現在最上方,後來發現只要把 maxwidgets的數值再加1,就可以調整位置了,比如原本你只有要放ㄧ個網頁元素,你就把maxwidgets='2' 數值從1改成2,就會多一個,但是是固定位置的不能調整位置,但是如果你設的是 maxwidgets='3' 就會多一個元素讓你有調整的空間,其實你要有幾個都無所謂,就跟邊欄ㄧ樣,只是太多也會讓網頁瀏覽速度變慢就是了。

另外這個方法也可以讓網頁元素拖拉到本文文章的那ㄧ個區塊,讓你可以有比較大的區域,可以放ㄧ些"最新消息"或是"熱門文章"之類的看板文字,我覺得滿好用的。

參考來源:

NOT MY BUSINESS
http://angelo-nmb.blogspot.com/2007/03/google-adsense.html

blogger 三欄格式

一直想將版面調整成三欄的樣式,總覺得兩欄式的太單調,其實我還滿喜歡樂多的版面,繼續閱讀後跳到的下一頁是全頁顯示,完全沒有邊欄,很適合看文章,及一些有圖文並茂的旅遊網誌,不過這是題外話了,從前也有人介紹如何調整,可是都是以語法Hacker方式,不是很喜歡,直到看到網路上的這篇才決定自己來試試看,因為他寫的我大部分都看得懂,也必較能夠掌控,於是乎就放到自己的網站上實驗,真的很好用,有興趣的人可以參考看看。

參考出處:
Not My Business
http://angelo-nmb.blogspot.com/2006/09/blog.html

加入Counter 計數器

ㄟ ,怎麼沒有計數器,我怎麼知道有沒有人來我家拜訪呢?

如果你是個不在乎有沒有人在看你的網站的人,這可是天大的好消息,不用去面對自己網站的人氣如何,只要有個寫作的地方就好了,那你就不用看這篇了,以前在新聞台寫文章的時候,人數總是不多,總是安慰自己,沒有宣傳有人來看就不錯了,茫茫網海中,知音難尋,但自從介紹ㄧ些較親近的朋友來瀏覽時,人數增加,也出現了留言,心中仍是有著滿滿的感動,激勵自己再寫下去,看到有些人氣網站,還可以放些小玩意蓋房子、交朋友就覺得好羨慕,而自己還在打地基呢!

要怎麼裝上計數器呢?首先當然要找個穩定的計數器網站了,Google搜索可以發現一大堆申請Counter的網站,我試過一些,這些網站大部分都是要加入會員才能使用的,目前我有在用的,必較穩定的就是Sitemeter,而且每個禮拜都會寄報表分析,雖然介面只有幾種選擇,也比較簡單,不過倒是沒有當掉過。

另外就是日本的Counter,真的是可愛又好玩,不過不是很穩定,也沒有分析的工具,只是顯示人數而已,有申請的有以下兩個:

日本可愛風計數器

● 計數器 1
eucaly.net日本計數器 http://eucaly.net/申請
看了網路上的介紹,有一款日本的計數器很可愛,申請成功後會將語法給你

後台增加網頁元素,HTML/JavaScript
抬頭設定為"計數器"(自定),內容再插入css碼即可(例如: <IMG SRC="http://app.eucaly.net/counter/你的帳號/1/5/623">)

**後言: 第二天這個東西就當了,顯示不出來,或許還是用site meter會比較穩吧。

● 計數器 2

Amazing Counters

這個申請網站,樣式更多,好像比較穩定,只是他有廣告連結,網頁上說明如果不連結廣告會讓你的計數器無法用。
使用方法:
1、 先點選你要的計數器樣式,分20類,有400種以上樣式任你選擇。
2、 選擇後再註冊,這裡面特別的是要填入你的網站名稱和網址。
3、 下個畫面會有2種css碼,將他貼在你的網站上適當的位置就可以用了。上面那個是將廣告的連結呈現灰色,下面的則是呈現藍色。

P.S. 如果模板換了,原先在CSS上的修改也會跟著消失,要重新設定,所以記得要備份‧

目前使用的是 ACCESS-COUNTER.NET 的Counter,不用加入會員的,希望他不要常常當掉,畢竟我只是想做一個小小的電腦歷程紀錄網站,也不用加入什麼"部落格觀察",因為他的評分標準對我來說真的很難懂,等我水準慢慢提升後,再來加入這些專業大站吧!

2007.6.22更新
計數器的部分已經拿掉,因為會拖慢網頁載入的速度,而且有加入Google Analytics,可以確切的知道自己網站的流量。

隱藏 blogger導覽列(navbar)+進入後台的方法



首先看不順眼的就是這個導覽列,這是用來登入網站及搜尋你的網站裡的資料,還有在網路上瀏覽到你覺得是惡意的網站時,可以通知google處理,做一個標記,另外就是隨機前往下一個網站,但這網站通常是英文的,對我個人來說並不實用,而且放在頁面上覺得很不美觀,所以第一部就是把他拿掉,要怎樣讓他看不見呢?

隱藏NavBar的語法:在<head>和</head>之間放入以下的語法,通常放在body{}這段敘述後即可,
#navbar-iframe {

height: 0px;
visibility: hidden;
display: none;
}

因為將Navbar隱藏了,每次要進blogger的管理介面都要另開網頁,覺得很不方便,於是在範本頁面-新增網頁元素-加入網頁元素-選擇標誌項目後,就可以在網頁你想放的地方加入這個進入後台的介面,按下去就可以到登入blogger的網頁,但是這個圖形靠左無法置中,想說到css版面上去改增加語法,卻發現找不到,原來是要勾選小裝置範本後,才會出現應該修改的語法位置,
<img alt='Powered By Blogger' expr:src='data:fullButton'/>
前後加上<center>和</center>就可以了。


2007.7.26更新
另外也可用新增網頁元素,選擇HTML/JavaScript程式碼,請參考另一篇的作法
換個與眾不同的blogger button

Blogger 初始,注意事項

建立一個blogger,首先就是要到後台調整一些自訂項目,要調整的有哪些呢?

ㄧ般的大概自己都會調整,我覺得比較特別的是

1、設定-格式:時區調整到"台北時間",不然你的文章發表時間就不是台灣的時間,不知道跳到哪一國的時間。

2、設定-意見:
‧是否要開放,開放給何人
‧啟動意見管理,這樣就能夠在張貼選項-管理意見,去篩選,要你同意後才能顯示在網頁上。記得留下email帳號,比較迅速知道有人留言給你。
‧驗證字詞,最好是顯示,避免垃圾留言。

3、設定-權限
‧可以設定多人共筆部落格
‧Blog是否開放,或是選擇性開放

4、初始者最重要的工作:備份自己的樣板格式,在範本-修改HTML,按下「下載完整模板」,如果想恢復時,再上載模版即可恢復。如果模板換了,原先在CSS上的修改也會跟著消失,要重新設定,所以記得要備份‧

緣起---blogger

申請 Blogger網誌
其實好久以前就申請了blogger,當時還跟朋友要了Gmail信箱來註冊,靠著以前一點點Dreamweaver的經驗,想說應該不會太難吧,沒想到這就是一連串痛苦的開端。

Blogger是Google旗下的網站,我是Google的愛用者,因為畫面簡單,很快就可以找到我要的資訊,沒有廣告(當時我是這樣以為),所以連結網頁非常快速,當時因為我的無名小站無預警的被停了,原因是我3個月沒有更新,這是官方說法,可是我記得我都有登入,只是沒有更改內容,反正寫信去異議後,只是要我申請什麼金卡的,一聽到要錢,我就快閃,所以呢,2年的心血就付諸流水,從此以後無名變成了我的拒絕往來戶,難過了一陣子,但日子總要過下去了,沒了無名,那就來試試看鼎鼎大名的Google大神吧!

這真的是個很陽春的blog介面,沒有計數器,沒有留言版,更沒有相簿,但聽說擴充能力很強,只要能利用html語法寫的外掛程式大多都可以放上去,對我這個語法只懂皮毛的小角色,是很大的挑戰,另外舊版沒有文章分類,是讓我比較煩惱的,不過好像還是有破解方法,換作新版後,就沒這煩惱了,只要模板裡增加 Labels這項目即可‧當時的Blogger就跟google的頁面一樣,簡潔明白,有著許多留白讓你有發揮實力的空間,高高興興的申請了網誌,版面樣式不多,選了一個還看得順眼的就開始了blogger的探索之旅。

剛開始還是使用舊版的blogger,我想很多人跟我ㄧ樣,一開始覺得好像少了什麼東西怪怪的,怎麼沒有"繼續閱讀"這個功能,還有最新文章和最新回應躲到那裡去了,天ㄚ,怎麼辦,我的文章可是旅遊文章,長長的一大篇幅,加上圖片,難道首頁只能放個2到3篇嗎,

另外自以為有了Dreamwaver的基礎,就可以來改內建格式,怎麼跟我知道的html、css語法有著很大的不同,原來blogger使用的是XML語法,比我以前知道的那些語法聰明太多了,也嚴謹多了,這樣又摸索了好久,幸虧這世界的好人還是不少的,分享了許多葵花寶典與武林密技,最近還有人發明了懶人包來拯救我們這些菜鳥,一躍功力增加許多成,於是乎一路上辛辛苦苦的到處到處打聽、也請教了Google大俠,才讓我的網站具備了一般網站常有的功能,問我為什麼搞得這麼累,何必一定要他不可,我想這就是blogger的魅力所在,有一種自得其樂的成就感,也促使自己往上提升學習的動力。

不過想進駐這個大家庭之前,當然要有危機意識,會有許多潛藏的問題會不時跳出來,讓你橫眉豎目,想把電腦砸掉,但如果你只是想專心寫文章,不想浮出水面和他人互動,這裡倒是很安全,因為這沒有ㄧ般Bsp的輪播、或是最新文章的發表處硬讓你拋頭露臉,實際上要找到你的網站也有點困難,除非你常到各大論壇、各大聯播去走走逛逛,留下一點足跡,增加你被尋獲的機會。

開了這個網站,只是想將自己在電腦、軟體、網路上的經驗留下來,自己做個參考,也希望有同樣問題的朋友可以獲得靈感找到自己想要的東西,年紀大了記憶力也退化了,想要留點什麼可以迅速的找到答案,不然都記在我這腦殘的記憶體裡,可能會不明原因的消失了,也希望自己能夠有耐心的經營這個網站,畢竟我的生活裡大部分都要使用到電腦,0與1永遠都是我的好朋友。