此篇為暗黑文，或稱黑特文吧，請謹慎服用，如果你也犯了以下症狀，請自行就醫，多服用些操作電腦基礎入門書籍的藥方，就會漸漸痊癒，不喜勿入。
2009年7月25日 星期六
2009年7月13日 星期一
如何利用Google文件(Docs)製作匯款單或調查表
Google Docs文件是Google家族裡的一個製作文件的工具，除了一般文件建立，也提供了表單製作、簡報設計、試算表彙整的多樣功能，就算你沒有Office軟體，其實有了Google帳號，很多類似的工作都可以靠Google文件在線上來達成，只要有台能上線的電腦，處處都可以是你的工作環境，網路就是你的硬碟，非常的便利。
2009年7月10日 星期五
如何在文章(HTML)裡顯示特殊符號
最近發現一個很實用的網站，作者是Dana，網站大塊文章：Dana的家 [電腦筆記]，介紹許多電腦的可利用的工具及知識，雖然大部分的資訊是在2004年以前的，但是很多小工具到目前還是很實用。
要跟大家分享的就是在Html編輯文章時，如何顯示特殊字碼☺，一般我們只有會用到要顯示程式碼時，這在Blogger 新手基本技巧問答（四），裡面曾經提到過
如何顯示特殊字元?
通常在文章中要加入程式碼，一些特殊字元在html通常會無法顯示，例如<>&等等，這時就要以另外的程式碼放在html裡面來代替原有的字元才能正常顯示，常見的有下列幾個。
< 以< 替代 > 以> 替代
& 以& 替代
© 以© 或是 © 替代
® 以 ® 替代
空白 以 替代
如果想要更多有趣的特殊符號 ☎♡♨，可以參考下列網站:☞
☼ 在 HTML 中顯示特殊字碼 (Times字型)(這個字型較多)
☼ 在 HTML 中顯示特殊字碼 (新細明體字型)
不過有的特殊符號在Firefox可顯示，但在IE無法顯是會出現小框框□
，這是要注意的。
網站上還有可以自己填數字，然後出現特殊符號的小工具，不限於網站上提供的，輸入不同的數字就有不同的符號可產生，很有趣，可以自己慢慢測試，
我就改了我的閱讀全文後面的....
為►►►，後面以三角型來表示，
記得這些特殊符號的程式碼，是要在"修改HTML"的模式下加入的，而非"撰寫"的模式下，雖然只有一點小小的變化，但是如果能彈性運用在寫文章上，我覺得也是一個不錯的想法，大家可以玩看看。
殊符號 ☎♡♨，這是什麼意思呢?
找愛人出來一起去泡溫泉，
猜對了嗎?上面那行反白就可看見了，哈哈，有夠冷。☺☺☺
2009年7月3日 星期五
2009年6月23日 星期二
單篇文章加入共享書籤(Social-Bookmarks)
今天網友留言怎麼將共享書籤放在文章上方，其實有關這個部分的教學，網路上有好幾個人有寫，所以通常有人問我的話，我都會指引對方到某些網站去看，但想想還是把作法寫出來好了，因為我想還是有從一開始加入blogger就一直看我的文章的朋友需要用到，只是目前在台灣共享書籤並沒有那麼盛行，最多就是加入FunP或是黑米，最近又多了Plurk，因為Plurk現在我也沒有在用，目前不研究，所以就介紹基本方式，要加的可以自己再找語法添上即可。
首先還是給書籤區一個定義，用的名稱是addToolTip
先在CSS區(就是<head>和</head>之間)，加入addToolTip這個元素的定義，就是你的書籤列的外觀顯示
.addToolTip{
text-align:right;
margin-bottom:0px;
}
text-align:right;就是在右邊
其他如果你要加入背景圖片也可以，再設定background等等，自行設定。
而共享書籤的語法如下，目前我使用的有這些，以下是要加入Html段落的語法，加在哪裡？怎麼加入底下再說明，
<p class='addToolTip'>
加入共享書籤： <a class='addToolTip' expr:href='"http://www.hemidemi.com/user_bookmark/new?title=" + data:post.title + "&url=" + data:post.url' target='_blank' title='加入HEMiDEMi分享書籤'><img alt='HEMiDEMi個人書籤' border='0' src='http://sunyata.c.googlepages.com/hamidemi.gif'/></a>
<a class='addToolTip' expr:href='"http://myshare.url.com.tw/index.php?func=newurl&url=" + data:post.url + "&desc=" + data:post.title' target='_blank' title='加入MyShare分享書籤'> <img alt='MyShare個人書籤' border='0' src=' http://sunyata.c.googlepages.com/myshare.gif'/></a>
<a class='addToolTip' expr:href='"http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' target='_blank' title='加入Yahoo分享書籤'><img alt='Yahoo分享書籤' border='0' src=' http://sunyata.c.googlepages.com/yahoo.jpg'/></a>
<a class='addToolTip' expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' target='_blank' title='加入Technorati分享書 籤'><img alt='Technorati分享書籤' border='0' src='http://sunyata.c.googlepages.com/technorati.jpg'/></a>
<a class='addToolTip' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='加入 Del.icio.us分享書籤'><img alt='Del.icio.us個人書籤' border='0' src=' http://sunyata.c.googlepages.com/delicious.jpg'/></a>
<a class='addToolTip' expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url' target='_blank' title='DiggIt!'><img alt='DiggIt!' border='0' src=' http://sunyata.c.googlepages.com/digg.jpg '/></a>
<a class='addToolTip' expr:href='"http://funp.com/pages/submit/add.php?url=" + data:post.url' target='_blank' title='貼到funP'><img alt='funP分享書籤' border='0' src='http://funp.com/images/tools/post_04.gif'/></a>
</p>其中的
title='加入xxxxxx分享書籤'裡的的文字可以自己修改你想顯示的字，這是滑鼠移到圖片上方會顯示的文字。如果你要再增加其他書籤，可以在</p>之前自行加入
<a class='addToolTip' expr:href='加入書籤的語法連結網址' target='_blank' title='貼到XXX'><img alt='xxx分享書籤' border='0' src='圖片網址'/></a>不過每家的加入書籤的網址方式都不一樣，要自己Google搜尋，我知道的就是上面那幾個。
另外這裡的圖片你可以先自行下載，或是網路上抓更多是用的圖片，再傳送到你的空間上，把src='圖片網址'改成你的，因為我是存在Google Page Creator裡，過一陣子就會消失，所以請改成你自己的圖片網址。
首先顯示共享書籤的位置有兩種，文章上方或是下方，我的方式是顯示在單篇文章裡，首頁不顯示，也就是說文章摘要的地方不顯示，只有在整篇文章展開的時候才出現共享書籤，不然那個書籤小圖，會讓整個首頁覺得很花。
切記一定要備分，因為這部分有些複雜，所以才一直不想寫，因為大部分的人都有使用繼續閱讀的功能，作法會不太一樣，如果你是使用阿土伯的繼續閱讀，我記得裡面已經有共享書籤的語法，應該就不用看這教學了。
將共享書籤加在文章上方
版面配置→修改HTML→展開小裝置範本，找到
<div class='post-body entry-content'>就是 class='post-body的這個敘述的那一行，因為每個版本都不一樣，不一定用post-body這個敘述，要自己判斷，記得這是你沒有使用繼續閱讀Hacks的朋友，是這樣用的，在下方加上以下語法
<div>
<b:if cond='data:blog.pageType == "item"'>
書籤語法.....略
</b:if>
</div>
但如果你跟綸太郎一樣是使用羊男的繼續閱讀，找到下列
<b:if cond='data:blog.pageType == "item"'>在下方直接加入上方的書籤語法<p class='addToolTip'>到 </p>即可，那個上下各兩行的語法就可以不用加入。
另外用其他繼續閱讀語法的朋友，也是參照上面羊男的作法，如果沒法成功，可以請教該作者，是否願意多寫這方面的語法，或是有成功的朋友，也可以分享我再把資料補充上去，先謝謝大家。
顯示效果如下，
有的人或許會問，我不要書籤的框框，怎麼拿掉呢？
這是因為你的單篇文章圖片的設定，本來就有框，找到類似
.post img {
padding: 4px;
border: 1px solid $borderColor;
}這是原先的設定，
你可以把他改成
.post img {
padding: 1px;
border: 0;
}把padding改成1px圖片就會緊密些，border改成0;顯示如下，看起來就順眼多了。
不過post img這個定義，會影響到文章裡面其他圖片的編輯，所以這是要注意的地方。
將共享書籤加在文章底端
版面配置→修改HTML→展開小裝置範本，找到
<p class='post-footer-line post-footer-line-1'>然後將以下語法加在這行的上方，是上方歐，不要看錯了，
<div>
<b:if cond='data:blog.pageType == "item"'>
書籤語法.....略
</b:if>
</div>
顯示如下，
但你如果想要首頁或是分類的文章摘要及單篇文章都要顯示共享書籤，就是將
<div>
<b:if cond='data:blog.pageType == "item"'>
書籤語法.....略
</b:if>
</div>
上方書籤語法的上下兩行的語法都刪除即可，只剩書籤語法，但是這不適用羊男的繼續閱讀，這是要提醒大家的。
這樣一來你也就可以擁有一個推薦文章或是自己收藏書籤的功能列了，方便自己也方便網友使用，還有這篇真的有點複雜，建議頭腦比較清晰的時候再來嘗試，因為自己寫了2個多鐘頭，才把這篇文章生出來，有問題的再來討論吧。
2009.6.25補充，
先謝謝Steven和暗夜咆哮也分享他們修改的心得，
首先有些模板在文章標題上方會出現程式碼，Steven提出解決之道，是將.AddToolTip放在/* Variable definitions這行敘述上即可。
其實.addToolTip這個定義是可以省略的，只是他的預設位置是在左邊，如果因為這個定義讓你的版面出現錯誤，把這個定義刪除，然後直接在書籤語法裡用div來定義位置也可以。
<div align="right">
書籤語法
</div>
暗夜咆哮則是提供使用繼續閱讀懶人法的除錯方式，
將語法放在
<p class='post-footer-line post-footer-line-1'>之上
可以讓書籤列出現在文章下方
或是
<div class='post-body entry-content'>之下
可以讓書籤列出現在文章上方
這是大家可以試試看的。
參考來源：
在每篇文章底端放置各大共享書籤 for blogger
Google AdSense只顯示在單篇文章裡 for Blogger
延伸閱讀：
Blogger template模板教學課程---概說及基本結構
2009年6月21日 星期日
可愛鄉村拼布風的圖案網站
這是一個與眾不同的網頁背景圖案網站，為什麼這麼說呢?因為這是由一個線上販售的布料網站Red Rooster Fabrics所提供的，專為布料設計圖案的Patterns展示，有將近20個設計師為這個網站設計的布料款式，風格比較接近鄉村或是拼布的圖案。
2009年6月11日 星期四
Google Sites可以放AdSense廣告賺錢了
感謝來自馬來西亞的王子留言通知這個消息，剛才試用了一下，『是金的』，真的可以使用了，在側邊欄及主要頁面區塊都可以加上Google AdSense的廣告，只是目前沒法自定顏色，由官網根據你的模板來配色，不過還是令人覺得高興，因為在Google Page Creator逐漸消失之際，我想很多人會慢慢開始使用Google Sites的服務，而可以放上廣告，或許有人會更加努力的經營(例如我，哈哈！)。
訂閱：
文章 (Atom)