Dream Talker

網頁新年節慶設計

noreply@blogger.com (Anonymous) — Sun, 28 Dec 2014 10:45:00 -0600

歡送年末迎新春，做了很簡單的節慶佈置的小插件。最近很忙沒有空閒讓腦子運轉在部落格上面，即使在休息時間也是被小肥貓擠到身邊取暖無法動彈，所以拿舊圖修改一下就好。幸好明年農曆年還早，有新圖再增補。

另一個新設計的節慶插件還在蒐集資料中，比較不適合插件懶人包；或許留給自己用。（或是文件加密只開放給熟友？）
以下的小玩意檔案很小，屬於網頁載入效果，所以請將 js 插件放在 </head> 的前面，於載入時先執行。

Read More In Dream Talker

指定區域自動縮放

noreply@blogger.com (Anonymous) — Fri, 8 Aug 2014 11:27:00 -0500

在上一篇 Youtube 視頻自適應設計的文章中可能會遇到以下一種情形，內文版面較寬大使得影片尺寸跟著放大。在視覺上行動裝置的影片尺寸看來舒適；但網頁版的影片尺寸可能有壓倒內文的感覺。為了控制視覺設計的需要，可以透過 CSS 樣式來限定 iframe-16x9 或 iframe-4x3 的寬度最大值，即是在樣式中加入 max-width: 500px; 去限制影片伸展的最大值。500px 可自訂。

Read More In Dream Talker

小肥貓吃草日記

noreply@blogger.com (Anonymous) — Fri, 9 May 2014 19:46:00 -0500

小肥貓的 Google+ 專頁似乎沒有好好運用，多少也是因為小喵很難拍到清晰影像；我也沒有將相機裝置待命的習慣。由於小肥貓變成大喵了，繼續使用「超級嫩模」有點名不符其實，所以專頁名稱改成「瞑茫君」以符合牠睡肥肥的形象。同時擴充相關內容，以貓奴的身份可以在「馬克十二」裡發表文章。

Read More In Dream Talker

Youtube iframe 自動縮放

noreply@blogger.com (Anonymous) — Thu, 3 Apr 2014 23:06:00 -0500

響應式設計通常會將內嵌物件（如：圖片、影片、文件）設計為自動縮放的狀態。如果不是自適應的網頁版寫入一般 Youtube 影片的嵌入碼，在行動版很容易撐破版面。
對於使用 Blogger 範本的部落格，其行動版會自動將 Youtube 影片縮小，不過僅有一個最小尺寸。面臨現今多種螢幕解析的行動裝置似乎在文章編排上有些不足。如果是以網頁版 Content 版面替代行動版的方案則是會直接面臨內嵌物件超出版面的問題。
Read More In Dream Talker

夢境世界 - 癡人說夢

noreply@blogger.com (Anonymous) — Sat, 8 Mar 2014 23:53:00 -0600

在夢境我經常造訪不同的世界, 經歷許多事件. 但是許多夢境難以言語表達情境, 也很空泛不易理解; 也就是醒來都會覺得莫名其妙. 有時會做些內容沒什麼含意又短暫記憶的, 而這些夢境隨著時光漸漸淡忘, 通常我不會寫進日誌裡. 有朋友說想看, 那麼我就摘錄三個夢境並試圖讓它完整些, 看完後你就會明白為何我不會寫進部落格; 它們看起來就是這麼單純無聊的腦波小運動.
啊! 希望能有多一點時間、神奇的打字能力讓我寫些有趣的夢境紀錄.

Read More In Dream Talker

Facebook comments plugin responsive

noreply@blogger.com (Anonymous) — Thu, 6 Mar 2014 19:55:00 -0600

由於臉書修改留言板的程序, 以致使用自適應模板的網站無法調整臉書留言板外掛的尺寸. 關於這一點 Facebook Developers 已經接下 debug 工作並加入排程, 至於何時才能修復請關注這則連結：FB comments plugin debug
好啦! 接著應該沒事了! 只要等待 Facebook 將它修復即可.
如果我真的這樣做, 可能會被網友罵到臭頭! 而且這幾天冷冷的春雨讓我快要發霉... 回到留言板的部份查看模板縮放反應就覺得有點不妙. 當我嘗試將樣式做調整後發現並沒有作用, 原因請參考：

Read More In Dream Talker

我換網址了 ! Blogger 自訂網域

noreply@blogger.com (Anonymous) — Fri, 28 Feb 2014 03:05:00 -0600

不是網站搬遷; 是換個網址提昇這個部落格, 同時累積域名價值. 早先陰錯陽差搬來 Blogger, 曾考慮使用 Wordpress 架站時再註冊一個新網域. 一方面工作忙; 另一方面是逐漸習慣 Blogger 的寫作方式, 然後就將遷站的事淡忘. 或許這個博客僅單純寫些日常小事, 我也不習慣在社群媒體做些努力與經營, 認為自訂網址並不是那麼迫切. 直到 Yahoo 部落格與無名小站收掉後, 我才又想起搬遷的事.

如果您以為這篇文章是有關如何自訂網址? 或是如何註冊購買網域之類的內容, 那可就讓您費心誤解了! 因為網路上已經有許多相關的教學文章可參考, 我就沒興趣寫. 但我也不會讓我的訂閱讀者失望, 文末還是會提到一些相關細節; 是一般教學文不會提到的自訂網域後續的增值操作.
Read More In Dream Talker

相師的命譜

noreply@blogger.com (Anonymous) — Thu, 13 Feb 2014 06:54:00 -0600

某客應宴去拜訪友人, 只見主人家焦急地在廳堂踱步. 於是客問由來? 友人答稱遺失了某樣東西, 心中焦急. 此失物是部天書, 裡面記載著如何成為相命師的緣由. 賓客首次聽聞嘖嘖稱奇, 興趣盎然便問了前因後果.
主人道：此天書機遇不可求. 若得之, 一絲清明上九虛, 可窺盡天機. 說罷, 滿室金光燦然, 一卷若有似無的命譜天書赫然出現在主人手中.
有了! 有了!! 主人欣喜若狂捧著天書瞧個仔細. 原來這天書若無述說其因緣命譜則無從形生. 沒有命譜則不能成為相命師; 非相師則不可得天書.
Read More In Dream Talker

Dialog effects 提示視窗

noreply@blogger.com (Anonymous) — Sun, 9 Feb 2014 01:41:00 -0600

一般寫文章時會將所有內容攤在陽光下, 一覽無遺. 這種直線式的文章對於閱讀者很方便; 寫作者更容易操作. 當需要對內文做註解或提供詳細資訊時, 直接寫在關聯段落中便顯得拖拖拉拉, 還可能中斷閱讀者的思緒.
偏偏我就習慣老人家碎碎念, 加個旁白或註解是常有的事情, 於是選擇了對話視窗當作解決之道. 首先了解 Dialog box 的基本用途：提示回應式確認資訊附屬資訊
當然, 使用 jQuery 程式庫的網友也能夠運用 Dialog 提示效果, 不過每次寫文章需要編寫複雜的結構對我而言是不實用的, 所以我另外選擇 Bootstrap 編寫套用公式; 小燈泡註解效果就變得很容易附加在文章裡了. 喜歡這個效果者再繼續看如何使用.

Read More In Dream Talker

文章縮圖的設定

noreply@blogger.com (Anonymous) — Fri, 7 Feb 2014 06:51:00 -0600

無論是 Blogger、Wordpress、痞客邦, 或任何自設的網站, 只要是有使用到圖片就會涉及縮圖的設定. 這個部份比較少被SEO提及; 卻是大部分網站必須面對的問題, 縱使您堅持在網站內不使用任何圖片, 例如留言板的作者縮圖照樣會被當作縮圖處理, 除非在網站內排除任何可見圖樣檔案的模組; 文章內也從不使用任何照片.
縮圖產生的影響可見於分享連結時的簡短摘要、RSS、Facebook轉貼等, 在文章中看不出其重要性, 分享轉貼時一幀主題鮮明的圖片極具代表性. 由於各種網站平台設定主圖的方式不一, 故不說明其程式碼構成, 這裡的重點在於圖樣尺寸的設定. var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Note',message:'也許你不知道的事實
只要你曾經在文章內使用過圖片、照片, 其縮圖亦可能在搜尋資料中顯示為其他文章的縮圖, 縱使已經移除該圖片',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',action:function(dialogRef){dialogRef.close()}}]});});

Read More In Dream Talker

小恙初癒貓侍上線

noreply@blogger.com (Anonymous) — Wed, 29 Jan 2014 20:08:00 -0600

前幾日感冒高燒, 沒什麼精神上線. 朋友介紹一部日劇 - 貓侍, 讓我病後休養無聊時看看. 這是一部描寫貓奴百態的溫馨小品, 故事圍繞著 "貓妖 - 玉之丞" 所引發的事件. 我不曾看過貓咪為主角的影視作品, 所以好奇找來看, 小肥貓跟著我一起收看; 還不時關注那一團白毛球的動向. 其預告預定3月會上演劇場版, 真希望台灣也會上映.

Read More In Dream Talker

jQuery custom loading icon

noreply@blogger.com (Anonymous) — Sat, 11 Jan 2014 22:46:00 -0600

上次提到網頁加載時的jQuery等待效果 (Loading effect), 不知道是我寫得太粗略; 抑或示範太多容易讓人混淆? 其實它的架構簡單極了! 不要被一堆CSS語法給蒙蔽, 就誤以為很難. 所以這次採用最簡單的單一圖片當作示範主體, 應該許多部落客會希望放上具有個人風格的載入效果.

事前準備：一張logo圖片. 無論是 jpg、png 或 gif 格式皆可, 檔案盡量壓縮成小一點; 加載的檔案太大可能會讓訪客討厭.
Read More In Dream Talker

新品種！貓臉玫瑰

noreply@blogger.com (Anonymous) — Wed, 1 Jan 2014 00:23:00 -0600

2014 新年快樂! 送上小肥貓的新年祝福.
貓奴回到家後, 小肥貓立刻跳到外套上又聞又踩的, 確定沒有其他貓星人的味道後, 轉身幾圈找到個舒適的位置開始打瞌睡. 貓奴將外套包裹成暖暖的臨時睡袋, 忽然覺得像朵貓咪玫瑰, 今天的貓咪變裝秀大成功!!
Happy New Year !

絢麗花火 - New Year jQuery effects

noreply@blogger.com (Anonymous) — Thu, 19 Dec 2013 10:24:00 -0600

回想一下, 我似乎沒有做過新年氣氛的懶人包. 這次匆忙間做了兩款新年歡樂迎賓卡, 是配合上一篇網頁載入時的jQuery動畫效果. jQuery Loading Effects
第一款是點燃花火棒的效果; 可隨著滑鼠在部落格裡玩個幾秒. 另一款則是以Flash為主幹的新年動畫. 使用懶人包當然多少有點限制, 一般是放在 <body> 下方就可以正常顯示; 但如果是因為範本有使用特殊的區塊 position 樣式或 Javascript, 可能需要試著調整一下js插件的位置.
Read More In Dream Talker

網頁載入時的動畫效果

noreply@blogger.com (Anonymous) — Sun, 15 Dec 2013 03:08:00 -0600

當部落格或網站載入資料時, 為了暫時遮蔽不完全的區域或物件元素, 又或者表示正在載入動作提示給訪客, 我們可以採用小巧的動畫效果當作這個過度階段的主體. 在此分享使用CSS構成的動畫效果可以壓縮資訊流至最小, 當作2014年的新年禮物. 當然我不會只使用基本結構來當作禮物, 會添加全頁面透明感背景和淡出效果, 適合原有使用jQuery函式庫的網友. 網頁元素載入後動畫自動消失的效果如下：

Read More In Dream Talker

圖案文字 - 圖示運用

noreply@blogger.com (Anonymous) — Sat, 30 Nov 2013 06:37:00 -0600

下標題之前猶豫了一會, FontAwesome主題該描述為圖形文字? 字型? 圖示? 特殊圖形符號? 依照它所呈現的效果應該歸類為圖形; 但實際上它是字型檔案, 而且還是和Google fonts原理類似的網路字型. 例如導覽列的分類選單、首頁連結圖示、檔案類型等等採取圖形代替文字的方式使網站或Blogger視覺上呈現簡潔的設計感, 經常被使用在社群分享按鈕設計. 以往編寫圖示時需要準備圖形網址, 接著在CSS寫入顯示的座標, 這種編輯方式很直觀但是遇上了不同解析度的裝置就可能變形; 除非指定視圖比例. 直接做個首頁連結的範例, 比較容易了解.
圖片連結：字型連結：
Read More In Dream Talker

肥貓日記 - 把拔是笨蛋 !!

noreply@blogger.com (Anonymous) — Sat, 23 Nov 2013 06:21:00 -0600

電腦終於又被我玩壞了! 送去檢修換了硬碟和風扇, 後來才想到小肥貓從小至今的寫真紀錄都毀於一旦. 以前那顆硬碟不僅分割成C、Ｄ碟, 還有個"貓碟", 一些隨手拍的照片和影片因為沒空篩選, 越堆越多以至於尚未轉移到備份硬碟裡, 其他的軟體或資料丟了不覺得可惜; 就是小肥貓的成長紀錄就這樣沒了...
我想拍張新照片當作桌面圖片, 哄著小肥貓讓我拍個照. 平常牠看到鏡頭會轉頭不理或是一溜煙跑走, 今天卻乖乖地給拍了一張, 不過那表情似乎是控訴著：把拔是笨蛋!!
Read More In Dream Talker

貓薄荷小賊

noreply@blogger.com (Anonymous) — Sun, 17 Nov 2013 00:50:00 -0600

上個月趁著天氣轉涼適合種植貓薄荷, 我在小肥貓專用苗圃裡種了一些荊芥種子, 說是苗圃不過是在陽台圈了一塊地種些貓草. 過了幾天果然看到很小、很小、很小的小芽冒出頭; 因為荊芥種子很小, 大約不到1mm. 幾天內陸續有些小芽長出來, 卻又忽然消失. 我心想：是我的錯覺還是有鬼? 總覺得這些小芽好像會"搬家"?!
幾天下來這些小芽所剩無幾, 我曾想過可能是蟲子吃掉的, 但連個莖也沒剩下, 此起彼落的現象讓我有種貓薄荷會移動的錯覺, 可就是找不到兇手. 嫩芽都被吃光後, 倖存的也開始死株, 如圖：
Read More In Dream Talker

Google Helpouts 網賺的新選擇

noreply@blogger.com (Anonymous) — Thu, 7 Nov 2013 22:37:00 -0600

也許您身懷絕學可是因為結婚生子成為專職的家庭主婦(夫), 也許您滿腹經綸退休後仍然希望保持活動貢獻知識, 也許您是有專才的學生想賺點學費, 還有其他原因等等. 還有, 也許您在某個環節需要專家助你一臂之力, 也許您尋求一對一的特別指導, 也許您忽然想學習新的領域... Google剛推出了一項新服務 - Helpouts, 就是利用Hangouts的視訊功能提供服務的平台, 所謂的知識就是力量(就是財富)大概能描繪這個供需的狀態.

Helpouts 將於 April, 20, 2015 正式退場

Read More In Dream Talker

如何使用jQuery版本

noreply@blogger.com (Anonymous) — Sat, 2 Nov 2013 13:59:00 -0500

如果您會在部落格或網站裡使用 jQuery 特效讓網頁更活潑便利; 如果您不是請專精網頁知識人員為您編排內容; 又假如您和我一樣喜歡在 Blogger 自行動手整修, 那麼以下的入門概念或許有需要.

緣由是有位網友想裝上某個 jQuery 特效插件, 但擔心過多的 javascript 檔案會拖慢網速, 所以只能忍痛捨棄. 我參觀他的部落格發現一件有趣的事實. 當他使用某個效果或功能時, 會按照程式來源的教學將 jQuery 函式庫也附加上去; 不同的插件可能當時使用的 jQuery 版本不同, 於是日積月累下來, 網站裡會佈滿各個版本的程式庫, 活像個 jQuery 版本的歷史博物館,網頁開啟變慢也不是異數了... var types=[BootstrapDialog.TYPE_INFO];$.each(types,function(index,type){BootstrapDialog.show({type:type,title:' Suggestion',message:'打開 Blogger CSS, "Ctrl + F" 搜尋 "jQuery" 字樣, 即可列出已使用的 jQuery 版本',buttons:[{id:'btn-ok',label:' OK',cssClass:'btn-primary',autospin:false,action:function(dialogRef){dialogRef.close()}}]})});

Read More In Dream Talker

秋天的貓肉肥肥

noreply@blogger.com (Anonymous) — Sat, 2 Nov 2013 01:55:00 -0500

秋季裡菊黃蟹肥, 正是老饕大啖蟹類料理的時節; 雖然我對螃蟹不怎麼感興趣. 但隨著氣溫漸涼, 小肥貓也開始找最舒適的打盹位置, 蜷成一團的貓肉丸更顯肥美可愛.
旁邊的小黃狗布偶是小肥貓幼時的玩伴, 當時小肥貓比小黃布偶還小, 經常黏在小黃旁邊, 現在牠會去找比較大的絨毛布偶窩在一起. 儘管小肥貓有一堆玩偶陪伴; 但牠的最好朋友當然還是鄰居的小㹴犬, 會隔著窗台相約出去玩, 有時候我懷疑小肥貓自以為是狗狗.

Halloween 2013 on Doodle

noreply@blogger.com (Anonymous) — Fri, 1 Nov 2013 05:21:00 -0500

2013 Halloween的綠巫婆有手繪本的質感, 蒐集到日誌裡.

Blogger訂閱留言回復

noreply@blogger.com (Anonymous) — Sun, 27 Oct 2013 00:41:00 -0500

這次分享的是訪客點菜; 很簡單的留言修改, 以圖片取代文字連結訂閱留言回復. 我懶得搜尋過濾有沒有人寫過; 直接寫篇小筆記更省事.
Google+的留言板可以直接收到留言通知, 而Blogger的留言板留言框下方也有留言通知的選項. (參考文件) 至於其他Open ID或匿名留言者就必須透過訂閱此項留言的連結, 以方便收到回復通知.

一般的文字連結：Subscribe to: Post Comments (Atom)
修改前請先預備要更換的圖片網址, 例如上傳到Google+或Picasa. 接著在Blogger範本裡找到以下段落：

 <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
</div>

使用以下語法取代：

<div class='feed-links'>
  <a expr:href='&quot;http://Blogger-Name.blogspot.com/feeds/&quot; + data:post.id + &quot;/comments/default&quot;' title='追蹤留言回復'>
  <img border='0' src='圖檔網址' height='xx' width='xx'/></a>
</div>

將紅字部份的值修改好就完成指定單篇留言訂閱. 至於採用另一篇- Google+ Blogger共用留言板請將連結部份接續加入該篇紅字下方即完成. (好省事的一篇筆記, 我都不好意思了)

* 註：以 <img border='0' src='圖檔網址' height='xx' width='xx'/> 替代原始代碼的 <data:f.name/> (<data:f.feedType/>) 也可以; 但需先確定您的版本feed link是使用這段程式碼.

Facebook comment box has disappeared

noreply@blogger.com (Anonymous) — Thu, 24 Oct 2013 12:11:00 -0500

收到好友十二道金牌緊急催告, 說是臉書留言板憑空消失; 只剩白白一片. 因為連我的臉書留言板也是如此, 基於患難相扶持的精神, 很用力地傳送了幾封email通知. 我進入留言版果然看到空空如也. 喵的咧! 這種大家一起沉淪的快感真是微妙的人性 >..<

我說這位太太請冷靜, 外掛插件遇到程序更新時難免有些小蟲子, Facebook這麼大一間上市公司應該會很快解決(但聽說都掛了一整天了). 而且連moderate link也無法使用, 如果您很急著修復留言板, 先將以下一列CSS加入模板即可, 等過一陣子臉書改好了再移除.
width的數值請自行修改.. 至於審核連結只能等它修復了. (* 已修復)

.fb_iframe_widget iframe{width:450px !important;}

至於採用自適應設計的模板, 則改用以下語法：(一般版型亦通用)

.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {width: 100% !important;}

Blogger留言板與 Google+留言板

noreply@blogger.com (Anonymous) — Sat, 19 Oct 2013 11:55:00 -0500

換了Google+留言板之後, 偶爾還是會想念Blogger留言板的開放性. 因此有個念頭想要轉換成兩種留言系統共存的型態, 但又捨不得這幾個月在G+留言板上的網友留言. (我很念舊的) 一旦換回原有的Blogger留言版; 那些Google+上的留言就會從這裡消失.
這種情形就像當初 +Wayne Fu 捨不得原有的留言系統, 所以製作了兩種留言板共存的程式碼. 有需要的朋友請參考目前最新版本：Google+留言框與其他留言外掛並存的提醒功能

前一陣子我才更換新版型, 裡面要修改的地方很多, 僅能趁著空檔一點一點地小幅修改. 現在修改得差不多了, 才想到該不該趁此機會也將留言板做些調整? 因此我採取反向思考：如何以Google+留言板為主; Blogger留言板為輔, 讓兩種留言系統共存並共享留言的方式...

Read More In Dream Talker