2007年9月28日 星期五

超豐富的設計社群網站--- deviantART

deviantART

這是目前我最喜歡的設計網站。

算是一個全世界最大的圖像設計的社群網站,根據wiki百科的介紹,

Blogger的最新回應可正常瀏覽了

終於,Blogger的最新回應正常了。

前一陣子Blogger的comments feed一直不正常,無法點選連結,最近兩天一試又正常了,其實我比較喜歡Blogger官方提供的Feed模式,顯示的速度快且不會有延遲顯現的情況產生,用外掛的雖然可以比較快顯示新文章的產生,而且樣式豐富並可顯示多篇最新文章或回應,但是上載速度並不會出現的比較快,甚至會拖慢到網頁的瀏覽,用久了之後就還是想回到最原始的設定,對我來說速度是比網頁的美觀重要,會拖慢速度的外掛,非必要,我測試過後通常都會拿下來。

上次有人問到,怎樣在張貼回應的時候,會像我的網頁一樣,另外出現一個對話框讓你填寫,而不是出現在原來的頁面上,順便把方法寫出來。

在後台的"設定"選項→意見,找到「在彈出式視窗中顯示意見? 」,點選"",然後按下儲存設定即可。

至於設定Rss最新文章及最新回應,
參考文章
RSS訂閱文章相關說明

亞洲設計家的圖像網站- startdrawing.org



startdrawing.org

2007年9月23日 星期日

免費圖庫Free Photo蒐集

介紹幾個自己常用的免費圖庫的網站。

Pictobrowser播放Flickr相簿

繼上次寫了在Blogger播放Flickr相簿幻燈片後,又發現一個播放Flickr相簿的工具了,以Flash的型態來播放相簿,比SlideFlickr還簡單,不用1分鐘就可以作出幻燈片式的相簿。

如何使用呢?只要連上Pictobrowser網站,找到相簿播放下方的”info”,按

下去再填入你的username,網站是這樣寫的,但我填入我的username(英文的,就是在網址上會出現的帳號)沒有效,而是填上我的暱稱,就是在Flick網站上顯示的名稱"綸太郎",

才會正確,然後會出現要你選擇要你要播放的相簿,是Sets、Tags或是Groups,


選擇後按右邊的隱藏的框框,會出現手的形狀,表示可以點選,點選後就會出先程式碼與相簿產生的網址,將程式碼貼到blog的文章裡即可,網址則可設定超連結,讓人觀看,看你要呈現的方式是什麼再自己設定,大小預設是500*580,但是有很大的缺點,無法自動播放,試過在語法裡加上autoplay等還是沒用,如果相片很多,這個工具就不適用了。

產生的幻燈片相簿,類似下方,不過我改過背景顏色

2007年9月20日 星期四

在Blogger播放Flickr相簿幻燈片

最近試著在blog放入相簿,找到了兩個相關網站試驗看看,一個是Slide,一個是SlideFlickr網站,兩個方式都很簡單,而且不用註冊,就可以自設背景、文字說明、大小、音樂等等,網路上有很多教學,可以參考。

兩個都試驗過,發現Slide的介面很多樣化,而且是中文的,不只支援Flickr也支援別家的圖像網站,但是速度非常慢,有時慢到覺得好像是掛了,而SlideFlickr雖然是英文,但是操作簡單,10秒內就能完成你的幻燈片相簿,非常容易入手,我個人是比較喜歡SlideFlickr,但是在放入程式碼在文章的後台中,會一直問我”即將離開這個網頁,是否立刻儲存?”的視窗訊息,雖然文章發佈是沒有問題,但是有些字會變成亂碼,而且會有小小聲的”切切切”的類似影片換場的聲音,讓人聽了很不舒服,所以兩個都不是很滿意。

其實我只是想單純的播放相片,並不想要有太複雜的功能或是介面,後來得知可以用iframe的方式來呈現Flickr幻燈片相簿,只要加上下面這段程式碼即可,試驗成功了,真的很easy,也很快速,也可加上其他的參數使用,真的很感謝作者的程式。
<iframe frameborder="0" width="500" height="500" scrolling="no" src="http://www.flickr.com/slideShow/index.gne?set_id=你的號碼"></iframe>

教學來源:路邊一棵榕樹下--在網誌中以slideshow方式展示Flickr相簿。

可以自設width、height,id則是你所set的相簿集的網址上的代號,填入即可。
譬如你的相簿集:http://www.flickr.com/photos/你的帳號/sets/你的號碼id/
所以不只可以放上自己的幻燈片,也可以放上別人的,但是要注意要有CC授權,並註明照片來源。

以下是展示的幻燈片樣子---東京夜景
來源Flickr:oisa先生的 Tokyo Night View作品,感謝他。

2007年9月15日 星期六

Blogger Play即時瀏覽各國blogger的圖片


剛剛看Blogger Buzz發現Google釋出了新功能Blogger Play,可以即時瀏覽各國blogger所傳文章內的圖片,原來這功能是兩年前Google就擁有的,當時是提供給內部工程師看的,從中發現許多有趣美麗的圖片,所以最近決定將它分享給部落客使用。


如何使用呢?只要進入Blogger Play網站,就會一直以幻燈片的方式撥放圖片,可以利用下方的拉桿調整速度(蝸牛是慢、跑步者是快),在右下角有Show info,可以顯示文章的作者的相關資料(view complate profile),或是閱讀圖片來源的文章(read more),可以發現另一個你不知道的世界。


因為即時上傳,所以如果發現有上傳不當的圖片,可以報告給Google網站,另外如果你不想要你的圖片出現在這網站上,可以在後台設定,找到
設定→基本→將你的blog新增到我們的清單中,選擇"否",按下儲存設定即可。

其他相關的說明,請參考 Blogger Play FAQ

關聯文章:
Blogger Play可放在blog上的小工具Gadget

2007年9月13日 星期四

如何宣傳你的網站---入口網站登錄

上次寫完如何宣傳你的網站-聯播篇,後來發現最重要的宣傳動作,是在各大入口網站登錄你的網址,讓你的網站資訊更容易被搜尋到,當然了作為一個小小的blogger是不可能花錢去作這個動作的,所以當然要自己親力親為了,目前有哪些入口網站可以登錄的呢?首先當然就是大家長Google了。


Google 登錄
在Google搜尋首頁下方有一個"Google完全手冊",點進去就有這項服務"登錄/移除您的網址",
將你的網址(請輸入包含 http:// 的完整網址),及網站名稱填入"意見"那欄即可,大概2-3天就會出現了。
如果要移除,可參見 "正在從 Google 的索引中移除我的內容"。


Yahoo 登錄(需會員資格)
登錄頁面
在首頁最下方,有一格是熱門分類,標題的右方就可以看到"網站推薦"這四個字,進入後點選"錄網站或網頁",記得登錄是需要有yahoo會員資格的,出現的速度比Google慢一些。


yam天空
目前是由Google搜尋引擎管理,所以沒有專門的登錄畫面。
(需填寫姓名、信箱)
在首頁最下方中間,有一格是搜尋目錄,標題的右方就可以看到"登錄"這兩個字,進入後點選"如果您想新增登錄資料,請至 登錄網站",這裡的登錄是需要填寫名字與信箱的,而且有一些相關規定,請看清楚再登錄,而且他有分門別類,讓你的網站在最適合的分類下出現。


Pchome
目前Pchome 登錄的服務2007.9.1已經取消,以Search2.0書籤共享的服務代替,所以要有pchome的帳號,不過這個服務不僅可以登錄自己的網站,也可以推薦你所喜歡的網站,更可把你收集的bookmark匯入網站上,與大家分享,算是比較個人的服務。

以上服務已取消,Pchome目前是和Google共用搜尋引擎。

MSN
在首頁上找不到可以登錄的地方,他是放在MSN LIVE的Live Search裡,如果想登錄,按下這個向 Live Search 登錄您的網站,輸入驗證碼及網址即可。
目前Msn已經將搜尋引擎定名為Bing,登錄方式請至Bing URL 登錄網頁或至Bing Webmaster Center登錄亦可。

其他如Hinet和新浪網Sina,好像沒有提供這樣的服務,因為Hinet的搜索引擎來自Google及Yahoo,而Sina則來自Google。

2008.5.8更新
另外最新的 Google Blogger Search---Google網誌搜尋有專門為Blogger登錄的服務,Google Blog Search Ping Service,也可以登錄,只是更新速度比較慢。

2007年9月12日 星期三

Charm Skins Templates功能性模板

主站:Charm Skins
模板:Blogger Themes(11個New Blogger Templates)

這是我目前改版所用的模板,這是txt文字檔的模板,只要複製貼上新的HTML語法即可,如果仍有疑問,請見「如何安裝請見Blogger 新手基本技巧問答(一)」一文。

Charm Skins(按下模板後,會出現一個廣告,只要按右上方的"Skip this ad",就可以看到模板了。)提供四個功能性的模板,適合放Google AdSense,而且寬度是980px,很適合現在大部分的瀏覽器解析度1024*768,因為以前很多三欄的設計還是以800*600為主,模板寬度都要自己再改過,有點麻煩,這個可以馬上套用,只要加掛上自己的Widget即可,相當的方便,而且試用過,在IE及FF的呈現上都沒有問題,雖然FF很多人用,但是IE的使用者還是佔大多數,不想自己改語法的可以試試看這裡的模板,目前是我最喜歡用的模板,也覺得最順手的,不會有邊欄跑來跑去的問題。

另外他的兩欄式模板,則是以800*600為主,如果覺得設計的不錯的人可以試試看。

裝好之後他有三個網頁元素是設計在模版裡的(如下圖),如果不要可以把下列這些元素先拿掉,再貼上你的HTML,有些名稱可能會不同,例如Site Feed和Subscribe是一樣的,自己找找看。

<h2>Subscribe</h2>
<p>
<a class="'feed-link'" href="http://www.blogger.com/" target="'_blank'" type="'application/atom+xml'"><img src="http://www.blogger.com/" /> RSS Feed (xml)</a>
</p>

<h2>Credits</h2>
<p>
<a title="'CharmSkins!'" href="http://www.blogger.com/"><img alt="'Free" src="http://www.blogger.com/" /></a>
</p>
<p id="'powered-by'"><a href="http://www.blogger.com/"><img alt="'Powered" src="http://www.blogger.com/" /></a></p>

如果有導覽列的模板(標題下方那排連結),他的設計不是用網頁元素的方式加上,而是直接設在模板裡,所以有點麻煩,要自己改,不過非常簡單,只要找到下列這一段,

<li><a href="/">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Another Link</a></li>即可。

把井字號#,改成你要添加的網址,把後面的英文類似"About Me",改成連結名稱即可,Home不用改,用"/"就會回到首頁,預設是四個連結,如果要增加就在下方加一行一樣的敘述<li><a href="網址">網站名稱</a></li>
缺點:
● 預設的顏色及字型很少,作者都是直接在模版裡敘述,所以有時改了字型與顏色,會看不出變化,因為作者沒有使用變數,例如$bgcolor,而是直接設定顏色碼,例如:color: #CCC來寫。
● 很多設計都是直接設計在模版HTML,而非是用Widget的方式加入,對不熟悉語法的人,增加修改的困難度。

其實這個模板的語法算是很簡潔,整體來說沒有什麼大問題。

P.S. 唉!9.7又換新的模板,因為不知改到哪裡,都無法正常的空行,所以只好又換了,奇怪是使用這個模版的另一個blog卻沒有問題,不然我還滿喜歡這個模版的。

2007年9月7日 星期五

Google AdSense Video出現中文影音廣告


昨天在我的另一個網站,東京封印,Google AdSense出現了Video廣告,雖然不是第一次看到Video Ads,但卻是第一次看到中文的,而且配合鬼月,來個日本懸疑驚悚電影的廣告,片名為「惡夢探偵」,雖然很想點進去看看,但那是犯規的(後來查詢過並不會,看下文),只好上網查查一下這部影片的相關資料,原來是即將於9月14日在台灣放映的影片,但是在日本都已經發行DVD了,台灣真是慢動作,主演者是松田龍平、hitomi及安藤政信,有興趣的可以上官網去看看。

2007年9月6日 星期四

Blogger 新手基本技巧問答(三)

想在日期、回應欄增添些變化,加上小圖示或背景? 怎麼做。



最近都在忙其他網站的改版,所以順便也增添些圖案讓自己的blog更活潑,首先是日期的部分前面加上圖案,如下圖(這是我另一個網站的設定),用藍色框起來的圖案,找到
h2.date-header {
background:url("圖片網址") no-repeat;
}


Blogger回應的地方有兩區,一區是文章下方的post by" 0 意見",另一區就是在展開文章後的"張貼意見"。

可以為回應區加上背景,或是在回應者前方加上圖示都可以, 針對回應區部分,先找到 /* ----- COMMENT ----- */ 這區,
是對整個回應區塊的設定,若要增添背景,可利用這行敘述
#comments {
background: url("圖片網址") no-repeat bottom right;
}
no-repeat:不重複顯示
bottom:在下方
right:在右邊

另外如下圖

綠色框起來的部分,明顯標出意見欄的圖示
/* comment-header */
#comments h4 {
background: url("圖片網址") no-repeat;
}

紅色圈起來的,放在發言者前方的圖案
.comment-author {
background:url("圖片網址") no-repeat left bottom;
}

還有每篇文章下方的資訊欄,如下圖,

找到 /* ----- POST-FOOTER ----- */
.post-footer .post-comment-link a {
background:url("圖片網址") no-repeat right;
}
記得一定要加上 right,這樣圖片在會在”意見”這兩個字的右邊。

另外這些小圖片,儘量控制在16*16的大小,#comments h4 {,這個例外,可以大一些,因為他原先一般設定的字型就比較大,如果圖片沒有完全顯示,只有顯示部分的話,就是你設定的padding太小,可以自己慢慢調,調整到完全顯示出來,或是利用line-height:1.6em; 來設定高度。

如果想改些回應區的文字敘述,例如"0意見",改成"0 留下意見",則可到後台,
範本→修改HTML→勾選"展開小裝置範本", 找到"<data:top.commentlabelplural/> ”,把他置換成你想要的文字,
例如 " 留下意見",記得前面要空一格,才能跟前面的數字0有一點距離, 會比較好看些。

系列文章:
Blogger 新手基本技巧問答(一)
Blogger 新手基本技巧問答(二)
Blogger 新手基本技巧問答(四)

2007年9月1日 星期六

Review Poster 輪播最新文章

2010.8.19更新,目前這網站已終止使用。

記上次介紹用Grazr Rss輪播器來顯示最新回應、最新文章,已經過了半個月,雖然介面很漂亮,但是速度和使用方法對我而言,還是有待加強,所以又換了一個新的介面,測試了一個禮拜,覺得還不錯,展示速度蠻快的,而且有折合功能,初始頁面最多顯示20篇文章,展開最高可顯示50篇文章,國內大部份的部落格都適用,只是最新文章出現的速度還是不一定,改用rss網址的方式好像也不會出現的比較快,由於這個網站還是beta版,所以大概會加強這方面的更新,另外如果你在del.icio.us.有註冊,也可以利用這個服務來聯播你的美味書籤。

Review Poster レビュー・ポスター〈有英日文兩種網站〉。

使用方法很方便,只要輸入你的網址,再做一些簡單的設定即可,不過他的原始設定,寬度有四種160px、240px、336px、468px寬度,紅色的抬頭,程式碼如下,如果想改相關的設定,只要改用綠色註明的地方即可,如果你懂得基本的程式碼,應該可以改得很漂亮。




<!-- Review Poster -->
<table cellpadding="0" cellspacing="0" border="0" id="reviewposter_table" style="width:160px;">
<tr><th id="reviewposter_title" style=" background:url(http://reviewposter.com/img/titlebg160.gif) no-repeat;color: #FFF;text-align:center;height: 28px;">User's Voice</th></tr>
<tr><td id="reviewposter_itembox" style="border-left: 1px #CCC solid;border-right:1px #CCC solid;text-align:left;padding:2px 4px;">
<ul id="reviewposter_itemlist" style="list-style:disc;margin:0 0 2px 16px;padding:0;">
</ul>
</td></tr>
<tr><td style="border-left: 1px #CCC solid;border-right:1px #CCC solid;border-bottom:1px #CCC solid;padding:2px;text-align: right;">
<a href="#" onclick="javascript:reviewposter_showitems(this);return false;" id="reviewposter_expand"><img src="http://reviewposter.com/img/openicon.gif" width="16" height="16" border="0" align="absmiddle" hspace="2" alt="all">Show All</a>
<a href="#" onclick="javascript:reviewposter_hideitems(this);return false;" id="reviewposter_collapse" style="display:none"><img src="http://reviewposter.com/img/closeicon.gif" width="16" height="16" border="0" align="absmiddle" hspace="2" alt="collapse">Collapse</a>
</td></tr>
<tr><td style="text-align:right;font-size:9px;">generated by <a href="http://reviewposter.com/" target="_blank">Review Poster</a></td></tr>
</table>
<script type="text/javascript" charset="utf-8" src="http://reviewposter.com/reviewposter.js"></script>
<script type="text/javascript" charset="utf-8" src="http://reviewposter.com/reviewsjs.php?u=http%3A%2F%2F01mistery.blogspot.com%2Ffeeds%2Fposts%2Fdefault"></script>
<!-- Review Poster -->

第一個是widget的寬度,如果你改了勢必不能用原來的抬頭圖片,因為原來的img是只有160px,所以就把背景圖片的敘述改成背景顏色即可, background:url(http://reviewposter.com/img/titlebg160.gif) no-repeat;
改成background: #777777; (看你要什麼顏色,或你要自己改圖片亦可),最下面的Show all、Collapse,也可改成中文,其他如字型、背景、邊框顏色都可以自己修改,以配合你的網誌。