為Blog加上Scroll To Top按鈕

以前曾經利用浮動式廣告/工具列的功能，在部落格上作過類似的Back To Top (Scroll To Top)的按鈕，那時候是用CSS來製作，後來因為覺得不需要就拿掉了…那是2010年的事囉…不需要的原因很簡單，一來我的文章沒有這麼長到要用到回到上方的按鈕，滑鼠滾輪給他滾一滾還算可以，長一點的文章，其實也只要按鍵盤上的HOME就可以回到頁面的最頂端。Back To Top的Button是英雄無用武之地。

2013年的現在，我寫的文章愈來愈長，而平板電腦用戶愈來愈多，沒有滑鼠給他滾、沒有鍵盤給他HOME，總是要提供個按鈕給瀏覽者按，所以又重新做了一次。

這次當然還是用到超連結(不然哩)，CSS美化了一下，再利用JQUERY提供的現成的一些功能，製作了動態的回到上方按鈕(Dynamic Scroll To Top Button)，如下圖，右下角的「▲回到上方▲Scroll to Top」就是了。

重點在於「動態」：
如果瀏覽畫面一開始就在最上方，按鈕是不會出現的。
當瀏覽畫面到往下移動，按鈕會「浮現出來」而不是彈出來
再來是當按下按鈕時，畫面是「慢慢移動」到上方，而不是猛的跳到上面

怎麼完成呢？有興趣的話再往下看

寫程式設計教學範例的三個好幫手

這個是我一定要分享的文章…
因為最近想重新學習網站程式設計
但又想留些一些分享的資料
(與其說是教學，不如說是分享，更希望留下自已學習的足跡
以往也想這麼做，但是每次紀錄一支小小的程式在部落格上總是得花許多時間才能很完美…不過在我重新整理了一些資料以後…我想以後在部落格上寫程式教學範例的時間應該會有所改善了…這邊dnowba也和大家分享一下寫程式設計教學範例的三個不可或缺的幫手啦。

(1) BLOGGER：寫部落格要一個簡潔有力的平台，我當推blogger，由其這一陣子的大改版完全符合我的味口…所以還在別家的，真的不要猶豫了…
而寫程式我更推blogger，因為他在部落格樣式範本上給了很大的彈性，讓你可以加入一些script…因為程式碼的特殊性，有些部落格貼上後會造成原來程式的混亂，加上程式碼動不動就一大串，貼在部落格上真的很難閱讀，也很不美觀…所以一個能讓你亂加script、自由度較高的當推blooger (自架WORDPRESS的高手就另當別論)

(2) SyntaxHighlighter by Alex Gorbatchev：這是可以讓程式碼美觀、不搞亂網頁原有程式的javascript，目前最新版是3.0.83，更潔簡且修正了很多問題，可以嵌到bogger裡頭去的(也有支援其他的部落格…)。用了以後，你寫的程式碼就像底下。

                <asp:Parameter Name="original_序號" Type="Int32" />
                <asp:Parameter Name="original_帳號" Type="String" />
                <asp:Parameter Name="original_密碼" Type="String" />
                <asp:Parameter Name="original_權限" Type="Int32" />
                <asp:Parameter Name="original_住址" Type="String" />

(3)windows live writer：這是讓你在單機上寫完部落格後上傳到平台的軟體，對部落格平台支援度也很高，blogger也不例外，目前是2011的版本，這裡只要搭配以下的外掛程式(Windows Live Writer plugin)，那麼在寫程式教學範例的時候會如虎添翼的

．Syntax Highlighter v0.2：這個同時支援Alex Gorbatchev程式碼高亮顯示，可以在codeplex.com 或 windows live gallery 裡下載，並看到相關的介紹
．Snippets Manage：這外掛是wlw本來就附的，可以讓你寫程式教學的時候省去一些排版的力氣…

若是對以上三個好幫手想要有更深的認識，歡迎多爬dnowba相關的文章(用dnowba部落格中標籤的方式找很快可以看到，這邊不貼出連結了)

blogger幻燈片

◎blogger若是要使用幻燈片，以往是使用第三方的小工具

 
如上圖是在新增小工具時選擇「Picasa Photostream」，就會有些設置選項了…而選項有哪些便因「第三方」所以各有異趣。通常關鍵就是要把你要播放的picasa使用者名稱給打上即可。

◎另一種就是用blogger自製的「投影片」工具

 
如上圖，blogger自製的投影片工具對我來說夠用了，設置上有關鍵字或是相簿的差別，來源也有blogger和flickr可選擇，個人覺得夠用了。

新增工具裡你也可以善用搜尋，一般來說知名度較高的圖床公司，會自行設計api並放到blogger小工具裡讓你使用，如flickr，但是既然是別人編寫的程式，必定無法滿足所有人，所以你對工具中某個設置不滿意的話(如圖一有背景圖而圖二是去背)，唯一的方式就是把他的程式碼找出來(有些會公開)，然後修改完放到自已的空間，並在blogger上新增自已的小工具。

讓你的blogger部落格變得很「讚」的方式

blogger在社群功能強大的其他部落格眼中根本不微不足道，尤其台灣愛用的yahoo部落、無名、痞客邦…在裡頭隨便搞個蚊子格的瀏覽人氣都會比blogger來得高…雖然dnowba一直覺得部落格是寫自已奇檬子的，這篇文章主要不是教大家搞人氣，而是方便…如果你又有blogger又有facebook的話，總是不會希望發個文二邊的網誌都要上傳一次把，所以dnowba在這邊分享一些讓blogger和facebook融合的方式…網路上教文很多，這裡就只提重點。

在blogger裡嵌入「相關文章」的功能

 
dnow文裡已有篇「Blogger中加入相關文章功能」，這篇介紹的是用外掛api的方式來達到這個需求

blogger內嵌入msn的即時聊天/線上客服裝置

這個功能蠻多人應用在商業上面的，就是在部落格上嵌入一個即時通訊(對講)機，商業上管他叫線上客服，其實不是什麼大不了的東西，我們用免費的windows live message就可以達到這個功能，比起一般商業自建的通訊器，msn的服務是比較穩而且免自已架設資料庫，再者可用匿名/訪客的身份來互相聯絡，對方看不到你真實的msn帳號也為自已保留隱私，若是真要互給帳號，位局目前通訊軟體之首的msn對方多半也有帳號比較能流通…以下介紹一下方式

Google Friend Connect (GFC) 在blogger上的使用-追踨者/訪客(誰來我家)功能

GFC 這東西不是新玩意，2008的東西，也不過晚facebook個3年(不過2005年的facebook，dnowba沒看過，只是知道美國大學生愛玩甚於台灣的bbs)，怎麼老覺得使用率就是不及臉書，平心而論，gfc和fb是差不多功能的社群平台(當然還是有區別，這個爭議在2008年一堆人寫了…到現在這些區別還是存在)，我覺得gfc的上手度真的比facebook來得簡單…dnowba不是專業的IT，所以就不多比較了，今個來是再推一次gfc這老古董…希望能再喚醒它。網上有很多是2008年提供的教學文章，可以自行參考。

自製Blogger留言欄位背景圖

和dnowba上一篇文章自製Blogger標題圖片(橫幅)一樣，自製留言欄背景圖重點不外乎了解自已的版型和css設定，當然背景設計的自我感覺也要良好，這篇稍微寫修改的要訣。(補充一下…意見欄位必須要在後台設為「內嵌式」的才可以設計背景喔)

自製Blogger標題圖片(橫幅)

標題圖片的DIY，比設計背景圖來得簡單(不是說設計圖，而是在瀏覽器的呈現上)，dnowba也從設計標題圖片來細訴一些結合css語法的方式。

為Blogger加入分頁導覽列

 
Blogger主頁面中，若是文章超過了設定的數量，則會自動切頁，但很奇怪的是竟然不是用我們一般用數字分頁的方式來處理，而是用「首頁」「較舊的文章」「較新的文章」呈現(在gmail中也是用這個方式)，還好有人寫了一些數字分頁的hack提供給大家使用，dnowba參考Adding 10 Styles Numbered Page Navigation for Blogger這篇文章(上圖來源也是此站)修改了一下教學方式，提供給大家參考。

Blogger新增「分享按鈕」功能

Blogger以前要在文章末加入一些分享到其他平台機制的按鈕，都要找一些hack來用，現在blogger內建這個功能了，按鈕支援的有gmail、blogger、twitter、facebook、buzz，當然按鈕符不符合你個人需求是一回事，倒是這幾個按鈕是目前市場上反應較好的(或許也告訴你，若你使用一些奇奇怪怪的平台也該放棄了)，而且興奮的是他是用圖的方式來呈現，或許我們未來還可以修改成自已想要的樣式喔。
 

Blogger中也有流量分析觀察了analytics

Blogger把analytics功能直接納入網誌管理畫面中了，真是個好消息，看看dnowba的人氣，哇，今日23人次，總算也有進步了…雖然畫面上看起來是英文的，但我們從Google Analytics強大的分析流量功能來看，未來還是不可限量的。

為blogger換背景圖案

自從blogger推出創意範本功能後(詳見dnow文BLOGGER創意範本Templete)，多樣主題式的部落格樣式我想可以符合初學者的需求，但是對饕客而言，能實現自我風格才算錦上添花，若是想為blogger換背景圖案不是難事，只是一些基本觀念還是要有。

為Blogger加上目錄

在blogger上發表一些教學資料，dnowba最後常會苦惱一件事情，就是如何有順序的把教學單元依照我要的順序給製成一個連結目錄，我常看到有人是直接用html手動編輯製作目錄，如此不僅費事且非即時，後來想到應該可以用rss feed的機制來實現我的需求，取經後把使用方法和心得結果報告一下。

Blogger中加入相關文章功能

Blogger中，官方是沒有提供「相關文章」的小工具，但dnowba個人覺得這個功能對寫一些資訊類文章的人蠻有用的，以下為取經後分站給大家的方法。原理上就是應用blogger原有的「標籤」功能，在展開文章後把有一樣標籤的文章給亂數篩選(不會選到自已)並列表出來，最後加上日期與連結。

寫文章時找不到圖形/使用符號嗎?用windows內建的就夠了

寫文章時有時候需要一些小圖、符號來使用，不知道你都是怎麼樣使用的，若是以前我會使用一些抓的小圖並用插入圖像的方式來做，但是若是寫部落格文章時候你是否會覺得插入圖像這件事情似乎有些棘手了。以下就寫些我使用圖形符號的歷程給大家分享。

幫blogger加個廣告吧

想邊寫BLOG邊賺些網路費早期也是dnowba的夢想，不過後來就做罷了，畢竟網路上各行各業專家不是dnowba能及，索性就拿blogger寫寫學習心得了。當初有為了廣告研究了一下廣告商的趨勢，發現差不多都是那樣，除了GOOGLE自家的廣告功能外，另外一個讓我比較想使用的就屬BloggerAds這個行銷公司了，因為我發現他裡面有許多公益廣告，也不知是關懷社會還是沒有公司承租就是了…不多說就介紹一下使用方式吧…

在blogger加入浮動式廣告/工具列

豬腦爸本身是不大喜歡浮動廣告的…一直黏在旁邊趕也趕不走
但是我們可以利用這種浮動廣告的css來做一些創意的事情
受限於blogger為了適應多數螢幕把blogger的寬度定制為1000px
像我的22吋螢幕通常調解析度1024以上
blogger旁邊就浪費了
所以豬腦爸的網站上放的是兒子女兒的照片
雖然可以設計在背景上
但是用成浮動式廣告樣式
我們還可以放些連結來連到別的地方去
換了網站背景會不用再去重新畫一張
一舉二得喔
 

BLOGGER創意範本Templete

想讓自已的部落格獨一無二卻不知道從何下手嗎，透過blogger範本設計工具來學習一下怎麼讓自已的部落格更具特色吧!!!

Blogger 使用「繼續閱讀」功能

blogger發表文章可以控制首頁顯示的篇數，但是有時某篇文章太長會使得版面整個拉很長，有時候反而會影響閱讀，反觀許多部落格都有定制的「繼續閱讀」功能，在BLOGGER更可以自由的運用喔