跳到主要內容

Blogger 動態檢視入門

阿兜仔洋洋灑灑寫了10大拒絕使用的理由叫你不要用「動態檢視」樣板,其中幾條是我也認同為相當不妥善之處。
  1. 不支援自訂 AdSense 編排
  2. 不支援一些小工具(Widget) 
  3. 沒辦法編輯 HTML 結構
  4. SEO不友善 (搜尋引擎讀不到你的文章)
  5. 損失一些文章點閱數
  6. 不支援「繼續閱讀」
  7. 你的部落格會跟一大半的人撞版
  8. SMO 不友善  (例如不能加上FB留言板)
  9. 無法新增下拉選單
  10. 沒有標題圖示、LOGO
動態檢視的原始範例

以上的優缺點見仁見智,但我不得不提這個「動態檢視」樣板本身有幾個嚴重的BUG,使用之前請先(確定你能)解決這兩個問題:看上面的範例網站你就會發現怪怪的,選單跟右邊小工具不見了

載入不完整

有時候留言沒顯示有時正常,但大部分時間都看不到,而且上面深色選單列會空白。查了好久發現原來是程式本身的邏輯錯誤,原因是它在資料還沒載入完就直接顯示。

在HTML樣板 (範本>編輯HTML) 裡面找到這段
setTimeout(function() {
 blogger.ui().configure().view();
}, 0);
改成
$(function(){
 blogger.ui().configure().view();
})

如果你沒有用jQuery記得在<head>先加上這行
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
或者你在懶一點,或不想要用jQuery,可以把最後一行的數字 0 直接改成 1000 也行得通。其實這是原發現人提供的解法,但我發現他自己反而用我建議的jQuey解法

不會即時更新 (可選)

//避免IE8不支援 Date.toISOString()
if(!Date.prototype.toISOString){(function(){function e(e){var t=String(e);if(t.length===1){t="0"+t}return t}Date.prototype.toISOString=function(){return this.getUTCFullYear()+"-"+e(this.getUTCMonth()+1)+"-"+e(this.getUTCDate())+"T"+e(this.getUTCHours())+":"+e(this.getUTCMinutes())+":"+e(this.getUTCSeconds())+"."+String((this.getUTCMilliseconds()/1e3).toFixed(3)).slice(2,5)+"Z"}})()}
if(window.location.pathname.toString() == '/'){
 window.location.pathname = '/search?updated-max=' + new Date().toISOString();
}

這段Script加到HTML樣板 (範本>編輯HTML) 的<head>裡面
不知道為什麼使用動態檢視,有時發了新文章、修改標題,甚至刪除文章等等都不會在首頁立即看到改變,強迫重整了幾次都一樣,但如果使用搜尋文章就正常了。似乎伺服器那邊的快取沒空管好,這個作法是當有人瀏覽你的首頁,就把他帶到搜尋所有最新文章的結果。

補充:當我換上動態檢視第二天後,好像又變得正常。如果你的Blogger也在"抽"了,不妨用這招試試。

這套樣板的一些限制

  1. 插入任何的<style>都會被移除
    - 但是你可以在<head>插入
    <link type='text/css' rel='stylesheet' href='example.css' />
  2. 在Body插入任何的HTML元素都可能會被移除,例如計數器
    - 但是你可以用 Javascript 在 Body onLoad 之後加入你想要的地方

Responsive Not Included

如果你想要隨視窗大小調整,抱歉這套樣板本身沒有。你可以參考我設計的CSS:
<link href='https://dl.dropboxusercontent.com/u/7165134/assets/blogspot/dynamic-responsive.css' rel='stylesheet' type='text/css'/>
請下載存到別的地方再使用

把 Loading Gear 圖案換掉

如果你不喜歡它可以換掉:
換成你要的圖案URL,寬高改成跟圖片一致就可以了
.blogger-gear,.overview-sspe {
 background-image:url('loading-suqare-grey.gif') !important;
 height:128px !important;
 width: 128px !important;
} 

留言

Ricky寫道…
我找不到改 Loading 的地方欸 , 請問是在哪裡呢 ?

另外為什麼我自己網誌的 "網頁工具" 的地方都顯示不出來 !?
但是跑來你這邊卻看的到你的 ...
而且我自己用IE也看的到 ,
但我用Chrome看我自己的網頁都會變成灰灰一條 ....

這個網誌中的熱門文章

卡馬警衛 - 使用手冊

(核心架構 2.0,持續開發中) 卡馬警衛 x 掰噗   掰噗是在噗浪上和陪伴卡馬警衛工作的好夥伴 卡馬警衛截自此手冊更新前提供以下服務 自動回應 互動聊天 當日星座運勢查詢 地區天氣預報查詢 颱風最新動態 即時地震報告 當期發票號碼查詢 台鐵時刻與票價查詢 台灣電視節目查詢 咕狗翻譯 Youtube 影片/音樂 點播 以及影片資訊轉載功能 噗浪狗仔搜尋引擎 (beta) ※  請不要濫用服務資源,留給網友更多的福利  ※

Plurk Box Layout CSS

擁擠的版面掰掰~ 噗文盒子 body .block_cnt .plurk.cboxAnchor .plurk_cnt{overflow:hidden} body .block_cnt .plurk.cboxAnchor .plurk_cnt table{margin-bottom:20px;position:relative;top:20px} body .block_cnt .plurk.cboxAnchor .plurk_cnt table .td_qual{position:absolute;top:-20px;background:#efefef;width:100%} body .block_cnt .plurk.cboxAnchor .plurk_cnt table .td_cnt{padding:5px 12px} body .block_cnt .td_response_count{z-index:999;position:relative} 留言區塊 body #form_holder .plurk .plurk_cnt .td_qual{position:absolute;top:0} body #form_holder .plurk .plurk_cnt .td_cnt{padding:15px 10px 0} body #form_holder .qualifier{opacity:0.5} body #form_holder .text_holder{color:#222} 噗主回覆底色 body #form_holder .plurk.highlight_owner{background-color:#faecdf} body #form_holder .plurk_cnt{background:none!important} How To...

各種的點餅乾遊戲 クッキークリッカー

圈內似乎曾流行某款令人上癮的 點餅乾遊戲 阿罵表示 Cookies Crush!! 自製噗浪背景(CSS下載) まどマギクリッカー 點小圓手辦遊戲:出自飲料送的 小圓手辦 艦くり ぎょに☆クリッカー 魔理沙とアリスのクッキー☆Clicker