2012年9月29日

讓網頁文字使用各種底線圖案__(2) 找出行高的簡易方法


(Pic from: ASE Buzz-Picasa,psdzzle.com)
一、找出行高值的困難性

上一篇」製作底線圖案的一個重要步驟為找出「行高」line-height 的像素(px) 值,如此底線圖案才能正常顯示。不過經由上一篇【留言 #04】、【留言 #05】的提問,才赫然發現這個 line-height 的 px 值似乎沒這麼好找。

首先不是每個 BSP 平台都能檢查後台範本內容,有的部落格只能藉由瀏覽器提供的開發人員工具,而開發人員工具的操作步驟說不定得發上一篇長文才能講得清楚。而最糟糕的是,用開發人員工具查出來的 line-height 數值,如果是 px 值當然就沒問題,但每個 BSP 平台提供的範本寫法都不同,上一篇【留言 #05】廣告小妹的範本的 line-height 數值為 "180%",而我查了自己的範本,line-height 竟然是 "1.4",這是代表 1.4em(預設文字大小的 1.4倍)的意思。這下可好,真的要發文把所有狀況都概括進去可能要連載了。


二、找出行高的簡易方法

靈光一閃想到平常調整部落格版面的技巧──利用圖片編輯軟體調整 px 值,剛好可以套用到這個任務上,以下就來看實作的步驟。

2012年9月26日

部落格廣告(BloggerAds)卡住網頁載入的完整解決方案


(Pic from: htcexperiments.org)
目前台灣部落格的前兩大廣告商為「Google Adsense」與「BloggerAds」,Google Adsense 挾帶自家龐大資料庫的優點,因此廣告相關性很精準;BloggerAds 的好處是只要放的位置高,就算沒有點擊數也是有固定收入。而如果部落格有放這兩個廣告一段時間的話,應該可以感受到這兩家在網頁載入效能的差別──

1. Google Adsense:龍頭老大的程式碼當然是專業、沒話說,javascript 使用動態載入,完全不會阻礙頁面其他區塊的載入

2. BloggerAds:台灣的公司要多加油,程式碼使用同步載入,這樣只要伺服器一出問題或是網路塞車,那麼網頁所有在 BloggerAds 後面的 HTML 程式碼就只能眼睜睜地被塞住,完全無法執行。

以下為尋找解決 BloggerAds 此問題的過程及原理,想跳過請直接看「三、最佳安裝解決方案」。

2012年9月25日

部落格廣告商及使用技巧整理 (筆記)


(Pic from: iconfinder.com, Jeremybennett Sticky Note Pad And Pencil clip art)

各大廣告商

 Google Adsense:官網
 Google Adsense:中文 Blogger 網站
 Google Adsense:論壇
廣告相關性精確

 BloggerAds:官網
曝光就能計價

 BlogAD:官網

 UrLAD:官網

 SCUPIO:官網
單月瀏覽頁數需超過30萬才能申請

 博客來AP策略聯盟:官網

 Yahoo!奇摩購物中心 - 大聯盟計畫平台:官網

2012年9月20日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(3) 隨機分頁功能


(Pic from: jQuery TOOLS,newcelebritweets.com)
本篇的主題為分頁(TAB)功能的應用:

1. 隨機顯示分頁功能。
2. 特定頁面之下的(隨機)顯示分頁功能。

2012年9月19日

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(4) 各種疑難雜症


(Pic from: jQuery TOOLS,psdzzle.com)
系列文「第一篇」提供了基本安裝的程式碼,如果有客製的需求時日後容易擴充。本篇的主題為解決分頁功能的一些疑難雜症,而如果有提出客製的相關問題,之後一併集中更新到此篇。

2012年9月12日

Blogger 相關文章+任意尺寸縮圖+更多相關文章


(Pic from: kickstarter.com,psdgraphics.com)
2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Blogger 相關文章 V2__安裝懶人包


部落格想要於文末附上相關文章+縮圖功能的話,目前最常見的選擇是 LinkWithin 與無覓。使用這兩個外掛的優點是,安裝簡單、設定容易、圖片大小相同(都是正方形)、版面一致,不需懂語法就能輕易上手。而我考慮的因素有:

1. 使用外掛的隱憂:伺服器是否穩定、該公司能營運多久。
2. Google 查到的資料:LinkWithin 安裝後抓資料要一段時間;另外可能是因為中文的緣故,抓到的相關文章不一定很相關。
3. 不喜歡圖片被裁切,很多非正方形圖片被裁成正方形很難看。

P.S. 這篇 +Julius Zhan 寫的「更新圖相關顯示小工具」,提供了使用 LinkWithin 等等一些第三方外掛的不好經驗,非常值得參考借鏡!

所以,有了製作「最新文章+任意尺寸縮圖」的經驗後,便自己著手來寫這個 hack,並增加自己想要的功能──更多相關文章、排除特定標籤的文章。使用本 hack 可以自訂所有的細項,下面第一大點為說明這個 hack 的原理,想直接安裝請跳「二、安裝程式碼」。

2012年9月10日

三國志11 __ 251 孔融北海開局

PTT KOEI 板有人詢問 251 北海孔融開局,以下為發表於該板的內容──

提到停戰同盟的話,我猜原 PO 是種田派,那麼以下提供的小技巧,想要安心種田五年十年不成問題,可以龜到軍備充足、也可以隨時想撿尾刀就溜出去撿尾刀,給原 PO 參考一下:

2012年9月3日

Blogger 最新回應+留言者各種身份頭像


(Pic from: softicons.com,freepik.com,all-free-download.com)
完成「最新文章+縮圖」之後,聯想到文章的 json 資料既然有儲存縮圖網址,那麼留言的 json 資料應該也會儲存留言者頭像網址吧?有了上一篇的經驗之後,很快地找到頭像圖片網址,再加上一年前就寫過「修改留言者的各種身份頭像顯示+尺寸變更」,本篇的任務可說是駕輕就熟。

以下第一大點為找出留言者頭像資料的原理,想直接安裝本文的 hack 請跳到「二、修改 Abin 最新回應模組」。

2012.10.24 更新

本篇的版本目前發現一些 bug,例如刪除內容之留言、或內含超連結的留言,都可能會造成這個小工具的執行錯誤。若曾安裝這個小工具的話,請改安裝這個「更新版本」。


2012年9月2日

Blogger 各種 Hack 及工具教學大全 (2016 為止)

本文列出主站與分站使用的 hack 及工具。以下排列的順序依照 Blogger 執行顯示的順序:由上到下 → 由左至右




《網址及標頭區塊》

2012年9月1日

2012 BLOG 更新紀要索引