2016年5月29日

讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)

blogger-template-hide-sidebar-讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)這篇 "Blogger 論壇貼文" 詢問要怎麼樣才能「觀看文章時,內文不會顯示側邊欄」?意思就是希望調整部落格的版面,將側邊欄隱藏起來,那麼文章區塊就能延伸到最大的寬度。

的確很多站長都喜歡這種清爽的版面設計,友站「小說界的李洛克」就是這樣的風格,而 WFU BLOG 的分站「三國志 11」也是如此,能夠提供讀者最佳的友善閱讀版面。

關閉側邊欄後,也失去不少面積擺放廣告,不過相信喜歡這種風格的站長,並不在意這件事。而 Blogger 要做到這樣的版面配置其實很簡單,本文就來看看可以怎麼進行。

(圖片出處: pickupimage.com)
2016年5月26日

Blogger 樹狀標籤 V2.1﹍切換標題模式

blogger-tree-label-v2-title-mode-Blogger 樹狀標籤 V2.1﹍切換標題模式Blogger 樹狀標籤 V2.0」是安裝懶人包,適合新手安裝。本篇 V2.1 版加入了「切換標題模式」的功能,安裝上要多幾個步驟,建議使用 Blogger 一段時間以後再嘗試安裝。

以下先簡單介紹 V2.1 版的功能,想要直接安裝跳到「二、準備動作」。

(圖片出處: pixabay.com)
2016年5月23日

Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包

blogger-tree-label-v2-Blogger 文章分類﹍樹狀標籤 V2.0 -- 安裝懶人包多層樹狀標籤」是本站最熱門的 Blogger 工具,不過安裝、使用有問題而留言提問的數量,也是最多的。原因可能是安裝方式比較複雜,沒那麼容易一次成功。

這次 V2 改版使用了懶人包的安裝方式,相信可以大幅減少出錯的機率。同時改版最大的不同是加入「切換摘要及標題模式」,這個許多站長想要的功能。

不過也許多數站長只需要單純的樹狀標籤功能,因此決定將「切換摘要及標題模式」功能以另外的版本號發佈,區別如下:


以下先介紹改版的特點、修正的部分,想要直接安裝懶人包請直接跳到「二、準備動作」。

(圖片出處: pixabay.com)
2016年5月18日

網頁使用程式碼高亮的最佳作法及推薦外掛

code-highlighter-optimization-網頁使用程式碼高亮的最佳作法及推薦外掛提供程式碼分享的網站,為了讓版面視覺效果美觀,通常會安裝「程式碼高亮」這樣的外掛。而帶來的影響是,網站的外掛裝越多也會影響網頁載入時間,尤其是沒有展示程式碼的文章頁面,也必須執行這個沒有必要載入的「程式碼高亮」外掛。

如果能夠需要展示程式碼時,才執行「程式碼高亮」外掛,相信會是比較合理的作法。本篇將會介紹各種「讓程式碼高亮」的最佳作法,同時也推薦一些不錯的外掛程式及線上服務。

(圖片出處: picjumbo.com)
2016年5月14日

Blogger 搬家匯入文章的各種疑難雜症整理

blogger-import-post-xml-problems-Blogger 匯入文章的各種疑難雜症整理前陣子處理從痞客邦搬家到 Blogger 的案子時,在 "搬圖床到 PICASA" 、 "轉移對應文章的網址" 等問題都有辦法解決,反而是「匯入文章」這部分有些地方很棘手,不一定都有解決方案。

其實 Blogger 匯入文章的狀況還真不少,有人曾在「Blogger 中文論壇」提問,WFU 過去經手的案例也有一些。那麼就趁這次的機會整理一下,以 FAQ 的形式呈現,將來有新的狀況也會持續補充。

(圖片出處: pixabay.com)
2016年5月9日

Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得

adsense-page-level-ads-Blogger 安裝 Adsense 網頁層級廣告(錨定/重疊/穿插)使用心得"浮動廣告" 是 Adsense「明文禁止」的行為,原因是這樣的行為,屬於「操控廣告的放送和顯示以吸引不必要的注意」,會有比較大的機率吸引訪客點擊廣告,等於用不正當的手段增加收益,WFU 也曾在「部落格浮動浮動廣告」→「四、錯誤示範」提醒讀者這件事。

不過比較意外的是,去年 Adsense 開放了行動版使用浮動(錨定)廣告,大概是行動版螢幕面積小,廣告展示比較不易,因此官方不得不想辦法提昇廣告收益吧!可惜的是,這功能一開始只有少部分獲邀的使用者可以進行測試。

日前 Adsense 測試完畢,宣佈所有使用者都可安裝這個功能,正式名稱叫做「網頁層級廣告」,包含了「錨定/重疊/穿插」廣告,對於提升行動版的收益來說是一項好消息,本文就來分享我的使用心得。

2016年5月6日

Blogger 隨機文章 V2 + 輪播效果

前陣子介紹完最熱門的 jQuery 輪播外掛「Owl Carousel」,聯想到部落格文章結束處,經常會配置的 "推薦文章" 工具,例如「相關文章」,如果搭配輪播功能的話,應該會有不錯的效果。

要進行輪播之前,得先隨機抽出足夠的樣本數,而 "相關文章" 的樣本母體來自於相同標籤的文章,數量有時會不夠,因此本篇選擇將輪播功能,搭配同樣適合放在文末的「隨機文章」,這樣子抽樣母體比較大(整個網站的文章數)。

同時 "隨機文章" 加了新的版本號 V2,版面、樣式上也做了一些改變,以下先介紹改版的特點,想直接安裝請跳至「二、安裝 jQuery 及 CSS」


2016年5月3日

Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp

smartup-mouse-gesture-Chrome 最好用的滾輪換頁及滑鼠手勢套件 SmartUp原本我認為 Chrome 最好用的滑鼠滾輪外掛是「Mouse Stroke」,不過這個套件之前被 Chrome 商店下架,只能用安裝 .crx 檔的方式執行。而自從 Chrome 某次改版之後,只允許安裝在商店上架的套件,所有 .crx 檔的外掛都失效,因此只能從 Chrome 商店找 "滑鼠手勢" 套件將就使用。

說實在,大部分套件的 "滾輪換頁" 功能都不好用,沒有一個比得上舊版 Opera 的滑鼠手勢。不過最近發現了一個套件「SmartUp」,比 Chrome 其他 的滑鼠手勢都好用,以下來簡單介紹一下。