2008年6月13日

關於這裡使用的Hack與工具記錄

⇩分享本文⇩
此篇內文屬於個人記錄與筆記

【網址】
《轉址》

參考:Blogger 無預警轉換區域網址的影響及因應之道
作用:暫時因應不同國家會自動轉址(區域網址)
目前:使用中

《防盜、防轉址流失》

參考:防止網站被 7headlines 盜文(用 IFRAME 內嵌框架)
作用:因應被 IFRAME 框架的語法
目前:使用中

參考:防止 Adsense 自動轉址, 造成你的訪客流失
作用:防止廣告商搞鬼,會讓網頁不要自動轉址
目前:使用中

【導覽列】
《導覽列》

參考:快速移除或自動隱藏 blogger 頁首的導覽列(navbar)
作用:隱藏 Google navbar 導覽列
目前:使用中

【文章區塊】
《分享按鈕》

(1)
參考:AddThis 三步驟,超簡單放上社群分享按鈕
說明:需拉到一定位置才能看見,不符合個人需求
目前:已移除

(2)
參考:單篇文章的側邊擺放浮動推文 / 分享按鈕(Float Buttons)
   在部落格加入 可隨著視窗移動的社群分享按鈕
   GoogleFacebook
   如何在文章側邊加入浮動式的社群網站分享按鈕
   Adding floating social media sharing buttons
作用:可尾隨捲軸動作的分享按鈕
目前:暫停使用

(3)
網址:GoogleFacebook
說明:單篇文末加上「Google+」、「 FB讚」按鈕及圖片文案
目前:已移除

(4)
參考:改造 Blogger 官方分享按鈕﹍新增熱門社交分享按鈕
說明:改裝官方分享按鈕,增加圖示距離/其他熱門分享按鈕(桌機網頁顯示)
目前:使用中

(5)
參考:Blogger文章結尾/標題下方加入自製社群分享鍵(包含Line)
說明:行動版使用熱門分享按鈕,可自行調整顯示位置。
   網頁版顯示於文章標題右下;行動版顯示於文章末段。
目前:使用中

(6)
參考:Blogger 單篇文章瀏覽數 V2﹍(2)
說明:顯示單篇文章的被瀏覽次數
目前:使用中

(6)
參考:[小工具]讓 Blogger 自動顯示系列文章
說明:文末顯示用關鍵字串,自動篩選系列文章
目前:使用中

《廣告》

教學:在 Blogger 內文插入 Google Adsense,讓每篇文章自動產生廣告
參考:如何將Google Adsense放到文章的內文中
作用:廣告在首頁不現身,但出現於每篇文章中
目前:已移除

參考:[工具] 在 Blogger 文章各種位置插入 Adsense 廣告﹍安裝懶人包
作用:在標題前後、繼續閱讀之後、文章末自動加入廣告,並增加判斷式(首頁不顯示)
目前:使用中

《Code 特殊文字區塊》

參考:特殊文字區塊安裝與使用的完整解決方案12
說明:草創部落格初期已使用,後修正為參考版本
作用:類似「引用文字(quote)」的功能,讓想要強調的內文區塊更加顯眼
目前:使用中

《繼續閱讀圖片化+位置修改》

參考:Blogger 推出繼續閱讀功能
作用:將「繼續閱讀(Read more)」改為圖片,並調整顯示位置
目前:使用中

《隨機的相關文章》

(1)
日期:不可考
參考:CHING WEI-Blogger : LinkWithin - 縮圖顯示相關文章
參考:有縮圖的關連(隨機)文章 / Related Post with Thumbnail
作用:文末以全站文章來隨機顯示n則文章(不在首頁顯示相關文章)
說明:不太符合個人需求-想以文章標籤來隨機關聯
目前:已移除

(2)
參考:Blogger 相關文章+任意尺寸縮圖+更多相關文章
作用:文末以該文的標籤來關聯,隨機顯示n則相關文章
目前:使用中

《燈箱》

教學:近日 Blogger 官方燈箱失效之解決方式
參考:The LightBox Image Display Option Stopped Working, Recently
作用:因應官方燈箱功能失效,目前好像恢復了?
目前:暫時用註解包住,觀察中

《批次轉換文章內文資料》

參考:Blogger 能否一次修改多篇文章的文字或內容?
作用:批次轉換文章內文的文字顏色、連結、標題...等應用
說明:個人主要用來更替舊文章中的字型大小及連結。
目前:使用中

《文章保護》

說明:不方便說明

【留言區塊】
《作者回應高亮》

參考:Highlight Author Comments in Blogger's New Threaded Comment System
作用:區別作者與一般回應
目前:使用中


《內嵌文章留言區塊》

參考:「Abin's Tech Note」-內嵌的文章留言
作用:範本改到亂了套而無法正常啟用內嵌留言的人可以參考
說明:個人沒有「內嵌的文章留言」勾選卻沒正常啟用的問題,
   只是純粹套用文中強制宣告來變更該區塊的寬度而已。
   本來還想順便改一下「發表留言的身分」的顏色,
   但看到底下回應#40、#41表示變更困難,所以這部份就放棄了。
目前:已移除


《留言編號-串聯式適用》

參考:Add Numbers To Blogger Threaded Comments
作用:讓串聯式留言(Threaded Comments)能顯示編號
說明:能以圖文方式秀出留言編號,
   可隨便點擊側邊欄的最新回應任一則,前往觀看實際情況。
   雖然是英文說明,但服用方式無敵簡單。
目前:使用中

《Google+ 留言系統》

參考:Google+ 留言框「網頁版」安裝說明
作用:讓 Blogger 原生留言系統與 Google+ 留言系統能並存
目前:已移除

《Google+ 留言提示展開/收合》

參考:留言版提示 - jQuery 展開收合效果
作用:留言提示展開/收合
目前:已移除

《三種留言方式切換(Blogger、G+、FB)》

參考:幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)
作用:如上述
目前:使用中

《串聯式留言能由新到舊排序》

參考:[小工具]讓 Blogger 串聯式留言能由新到舊、舊到新 - 排序變更
作用:如上述,目前僅讓網頁版顯示
目前:使用中



【側邊欄】
《日曆結合網誌存檔的文章》

參考:「Abin's Tech Note」-結合發表文章的日曆模組 (Feed Calendar)
作用:用日曆方式連結部落格文章
目前:無實際需求已移除

《最新文章》

(1)
參考:「Abin's Tech Note」-最新文章模組「終極版」
作用:加強最新文章的顯示方式
目前:改善如下方(2)最新文章+任意尺寸縮圖

〈2〉
參考:WFU Blog-最新文章+任意尺寸縮圖
作用:改善(1)最新文章模組「終極版」
目前:使用中

《最新回應》

參考:WFU BLOG-Blogger 最新回應+留言者頭像+文章標題
作用:加強最新回應的顯示方式
目前:使用中

《官方留言板》

參考:自製簡易 Blogger 即時留言版
作用:官方留言板,最多可容納兩百則,若超過要另開「新文章」並修改留言板連結網址
目前:使用中

《熱門文章》

參考:WFU BLOG-Blogger 熱門文章+任意尺寸縮圖__兼談圖示製作技巧
作用:改善該 Blogger 官方小工具的縮圖顯示方式
目前:使用中

《隨機文章》

參考:睡覺吹泡泡-Blogger的隨機文章
作用:可用來幻想增加舊有文章的曝光率
目前:使用中

《部落格文章搜尋》

(1)
參考:明式-Blogger Search失效解決方法
作用:因應官方站內搜尋功能失效的解決方案
目前:小工具重複已移除

(2)
參考:新版「Google 自訂搜尋」與「Google Adsense」的連結及如何關閉廣告
作用:使站內文章的搜尋顯示結果更加優化
目前:已移除

(3)
參考:Google 自訂搜尋改良版__兩欄式更方便 (Blogger 專用)
作用:使站內文章的搜尋顯示結果更加優化
目前:使用中

《文章多層樹狀標籤》

參考:WFU BLOG「多層樹狀標籤」更新版
   WFU BLOG「讓Blogger標籤頁面能隨時切換標題模式與文摘模式」
作用:使文章標籤能更具結構化的以樹狀顯示
說明:以 category + tag 的方式呈現標籤分類。
目前:使用中

 《側邊欄分頁(TAB)功能》

參考:From WFU BLOG
   1.簡易安裝的分頁(TAB)功能(一)安裝 HTML 小工具
   2.簡易安裝的分頁(TAB)功能(二)安裝 Blogger 官方小工具
   3.簡易安裝的分頁(TAB)功能(三)隨機分頁功能
   4.簡易安裝的分頁(TAB)功能(四)各種疑難雜症
作用:讓多個側邊欄小工具可以分頁方式顯示,減少小工具大排長龍
目前:處理中

《關注聯播》

參考:[Blogspot教學] 利用網誌清單小工具實現部落格聯播
   Blogger 網誌清單的妙用+網站小圖示的調校
作用:聯播 + 小圖示
目前:使用中

【其他】
《頁面判斷式》

參考:「Abin's Tech Note」參考一「WFU BLOG」參考二
作用:可應用於部分功能/畫面是否在首頁/單篇時顯現
目前:使用中

《字型》

參考:Blogger Font - 字型修改密技
作用:就是變更字型0.0
說明:若變更後 IE/FF 字型走鐘再服用「IE9被Blogger陷害了!」,
   對付 Blogger 的 IE 宣告版本過舊,使字體無法正常渲染的困擾。
目前:使用中

《Back to Top 按鈕》

參考:快速回到網頁上方 Go Top 按鈕 + 各種動畫效果(CSS / jQuery)
作用:回到頂端的動態按鈕
目前:使用中

《讓文章中的超連結、圖片全部另開視窗》

參考:超連結 A 標籤及錨點, 你不知道的操作技巧(HTML語法)
作用:一、另開視窗的重要性 - 4. 讓文章中的(圖片)超連結另開視窗
目前:使用中

《文末較新、較舊文章顯示標題》

參考:Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題
作用:讓原本「上一頁」、「下一頁」變成「文章標題」
目前:使用中

《》

參考:分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊
   FB 官方偵錯網址
   讓 Fb、Google+、Twitter 正確顯示部落格文章、首頁與網頁的名稱、圖片和摘要!
   分享到 Facebook 卻發現文字抓錯?
作用:如參考文章標題所示(這部份還真雜...)
目前:使用中

【圖片相關】
《圖片延遲載入》

參考:(1)圖片延遲載入外掛 Lazy Load__Blogger 最佳安裝方式
作用:適合部落格中有有大量圖片者使用
說明:測試了 Chrome、Firefox、IE9 ,
   雖 Jquery 已用 1.8.2 版,仍發現 IE9 下幾乎跑不動,
   還是把 C行、H行放回,>"< 攻略文圖片量太驚人。
目前:已更新(2)

參考:(2)jQuery 圖片延遲載入﹍Lazy Load 安裝懶人包 (徹底解決圖片 reflow 現象)
作用:圖片延遲載入
目前:使用中

【行動版】
參考:Blogger 行動版如何讓 Adsense 最佳化
作用:如上述
目前:使用中

參考:Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾
作用:參照這篇「Blogger 自訂行動版範本實作﹍(2) 文章+側邊欄+頁尾」→「六、文章區塊」→「2. 懶人作法」,將判斷式遮蔽,行動版終於顯示了。
目前:使用中

參考:[教學]Blogger 行動版範本初探__修改技巧整理
作用:「讓網頁版的內容不要出現在行動版(網頁版)」、「讓網頁版沒有的內容出現在行動版(行動版)」的判斷式,使用在範本中的「Adsense 廣告安裝懶人包」區段網頁版及行動版顯示的大小不同,「Go to Top 按鈕+動畫」只顯示在網頁版,「較新較舊文章按鈕改造」只顯示在網頁版。
目前:使用中

【站長工具】
名稱:Google Aanalytics
官網:Google Analytics
作用:站長分析工具
目前:使用中

名稱:Histats
官網:Histats
作用:站長分析工具
目前:使用中

名稱:百度統計
官網:百度統計
作用:站長分析工具
目前:去除

13 則留言:

  1. 有一個問題... 為甚麼你的網頁列上有圖? 那個Google Chrome

    回覆刪除
    回覆
    1. 那裡是「Top Menu」
      在範本裡面搜尋「<b:widget id='LinkList1' locked='false' title='Top Menu' type='LinkList'>」,
      大約往下3~4行左右會看到<ul>...</ul>,
      裡面包著<li>...<li>的迴圈(loop),這個迴圈就是讓我們增加連結項目時能從官方小工具直接新增用的。

      不過這個官方小工具無法放圖上去,所以要自己新增於迴圈後面才能放圖。

      假設加入的位置是在官方小工具後面,那麼就在</b:loop>行後面加入
      <li>
      <a href='連結網址' style='text-decoration: none;' target='_blank'><img original='圖片網址' src='圖片網址' style='vertical-align: -2px'/>建議使用Chrome瀏覽器</a>
      </li>

      text-decoration: none 這是文字顯示效果(none是指跟隨預設值)
      vertical-align: -2px 這是圖片的垂直對齊位置

      刪除
    2. 那請問要將blank改為甚麼才不會另開分頁呢? (我自己忘記了...)

      刪除
    3. 喔~ 行啦

      自己把 style='text-decoration: none;' target='_blank'

      這段關掉就行啦~

      請無視已上的發問~

      刪除
  2. 你知道要怎樣做才能夠像WFU Blog 的上面新增訂閱?

    回覆刪除
    回覆
    1. 這部份我沒研究過不清楚。你可以直接到 WFU 那裏詢問看看喔!

      刪除
  3. 請問大大, 你認為將留言系統升級至 Google + 留言 好嗎?

    還有, 我有一個疑問, 為甚麼大大不升級, 還在用 Blogger 簡介呢?

    回覆刪除
    回覆
    1. 我一併在此回應喔!

      關於火狐一直呈現「Loading」,這部份個人目前不打算額外說明。因為雖然看似「Loading」,但其實該顯現的最終也都能完整出現,並沒有因為「Loading」而使得功能 / 畫面不正常,所以希望你諒解,不過還是非常感謝你的建議!

      升級到 Google+ 留言系統好不好,這可能因人而異。我個人是持正面支持,但還在考慮是否使用...,畢竟這會變相使得訪客留言勢必得登入 Google 帳號。如果像 WFU 那樣比較技術面的 blog 是比較有實際效果的(至少訪客十之八九肯定 Google fans or users),可是我的 blog 比較偏向遊戲與其他資訊,多少會擔心訪客沒那麼願意特地登入 Google account 做留言動作。不過~我想未來這裡還是會轉換成 Google+ 的留言系統吧!(其他請見補充)

      Blogger 簡介部分呢!因為一直以來覺得那是一個很雞肋的工具,我自己去訪問其他部落格時都很少點開來看,幾乎都不記得它還存在著,呵~這兩三天觀察看看應該會升級了。謝謝提醒喔!

      【補充】
      你看一下 Google+ 留言系統官方說明
      這行字很重要「讀者必須建立 Google+ 專頁或 Google+ 個人資料,才能在您的網誌上留言。」,再者~我們都用了 WFU 側邊欄的最新回應 Hack,如果貿貿然使用 Google+ 留言系統,呵~你懂的。

      結論:支持但觀望~,關於這方面的討論建議你加入「Blogger中文社群」觀看,有討論到「相關訊息」。

      刪除
    2. 你有福了!!WFU已經想到併用原生留言系統+Google plus留言系統的方法了,詳見 Google+ 留言框「網頁版」安裝說明,這篇分享教學正熱騰騰的,呵~

      刪除
  4. http://www.kocpc.com.tw/

    網站圖片: http://www.kocpc.com.tw/wp-content/uploads/2013/01/3211.png

    那個網站的名字好像你的 La's jargon 一樣的 > <

    回覆刪除
    回覆
    1. 呵呵~還好啦,很多都這樣的

      刪除

【回覆須知】
✔ 請注意網路禮儀,禁止口出惡言、廣告張貼。
✔ 可用語法請參考這篇
✔ 與本文無關的留言請利用右側的「留言板」,反之請盡量留言在相關主題。
✔ OpenID留言,填入自己的網站、部落格網址即可。
✔ 圖片消失、檔案連結錯誤 / 更新,歡迎留言告知。
✔ 其他問題、想法,也歡迎留言說說....☺。