2012年8月1日 星期三

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(2) 安裝 Blogger 官方小工具

讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(2) 安裝 Blogger 官方小工具

Wayne Fu 0 A+

(Pic from: jQuery TOOLS)
上一篇的「留言 #02」Frank Liu 詢問「能否把 Blogger 官方小工具裝進這個分頁功能」。我的回答是,由於這個分頁功能是適用於安裝「HTML / Javascript」小工具,若要把 Blogger 官方小工具裝進去,受限於 Blogger 語法的關係,最多只能擺放一個;而且要修改 Blogger 語法的部分,說明起來得再整理一些 Blogger 語法知識。因此,原本認為這是個需要花點時間的任務。

沒想到睡前靈光一閃,突然想到一個「偷天換日」的點子,利用 javascript 來操作轉移 DOM 物件內容,把 Blogger 官方小工具的內容搬到我們的分頁功能裡,就達到了移花接木的效果,既輕鬆又簡單,完全不需要動到 Blogger 語法的部分,而且要擺放幾個 Blogger 官方小工具都行。只是現在要感嘆的是,如果老早就想到這個點子,我的側邊欄滿滿的分頁效果,當初就不用 hack 得那麼累了...好的,以下就來看看如何實做。


一、找出 Blogger 官方小工具的 ID

假設我們要將三個 Blogger 官方小工具加入分頁:「搜尋」、「標籤」、「熱門文章」。首先到 Blogger 後台打開範本文件:修改 HTML → 接著搜尋以上三個小工具的區塊。搜尋的技巧很簡單,只要搜尋小工具的標題字串,馬上就能找到了,類似以下這三段程式碼:

<b:widget id='CustomSearch1' locked='false' title='搜尋' type='CustomSearch'>
<b:widget id='Label1' locked='false' title='標籤' type='Label'>
<b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts'>
以上三段程式碼藍字的部分就是該區塊的 ID,請記下自己範本裡面的 ID,因為如果你的範本裏同樣的小工具裝了兩個以上,ID 就可能跟我的藍字部分不一樣。



二、把 Blogger 官方小工具的位置擺在最上方

到後台 → 版面配置,把要加入分頁功能的三個 Blogger 官方小工具,用滑鼠把位置拖曳到最上方的位置,如同下圖一般──



拖曳到最上方的重點在於,這三個小工具的位置絕對要比之後安裝分頁功能的「HTML/Javascript」小工具要高。


三、把 Blogger 官方小工具隱藏起來

記下 ID 後,一樣待在範本的畫面,請在 <head> 與 </head> 之間插入以下程式碼:

<style type='text/css'>
#CustomSearch1 {display: none;}
#Label1 {display: none;}
#PopularPosts1 {display: none;}
</style>

以上藍字的部分請改為自己的 ID 字串。


四、安裝程式碼

安裝步驟請參考「上一篇」 來執行,但最重要的一點,新增加的這個「HTML/Javascript」小工具,在版面配置裏的位置絕對要用滑鼠拖曳到那三個 Blogger 官方小工具之下,否則以下的程式碼就無法成功複製官方小工具的內容了!

接著請在 BKBL 這兩行之間插入以下程式碼:


B~D:藍字請改為自己的 ID 字串

E~G:如果側邊欄只裝一個分頁功能的話,綠字的 ID 就不用變動;但若側邊欄像我的部落格裝了許多分頁功能的話,不但這裡綠字的 ID 要變換,原始程式碼相對應的 ID 也要變換。

I~K:這三行分別把三個 Blogger 官方小工具的 HTML 內容,複製到三個分頁裡面。

M~O:複製完之後,Blogger 官方小工具就沒有利用價值了,這三行的程式碼分別把三個官方小工具給刪除。「狡兔死、走狗烹」,雖然有點殘忍,但不整個刪除的話,隱藏起來的小工具仍會各佔一行的高度,使得側邊欄不美觀,所以砍掉是正確的抉擇。

2013.1.14 補充

感謝 +Julius Zhang 於【留言 #08】回報「"熱門文章" 用這個方法套入 tab 時格式會跑掉 文章標題連結會跑到縮圖的底下去」。經過測試,「熱門文章」放在這個 TAB 之後,原本 <div class='item-thumbnail'> 這個區塊的 class 'item-thumbnail' 裡面有 float: left 的屬性, 不知為何消失了。

解決方法如下:在範本中搜尋「<div class='item-thumbnail'>」字串,應該會找到兩個,這兩個都改成以下的字串:「<div class='item-thumbnail' style='float: left; margin-right: 5px;'>」,這樣就能強制圖片區塊浮動在左側。



五、常見 FAQ

日後若有常見問題,會持續補充在此。

Q1: 為什麼網誌存檔放在tab裡,會有"載入中…"

Ans: 不是每個官方工具都能在這個分頁工具正常執行,例如「網誌存檔」就是一個。日後若有其他官方工具不相容,會在此補充。


讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」系列標題:
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP