電腦玩物換上了Blogger Super Simple新版型,歡迎測試回饋

playpcblogger-01playpcblogger-02

電腦玩物所使用的部落格平台是Google的Blogger服務,今年初Blogger推出了「範本設計工具」,讓我們這些網頁程式語法的初學者可以用超級簡單,甚至完全不需要輸入一個語法的情況下,用視覺化的圖形編輯介面,非常自由的替換、調整自己的版型。不過之前我用Blogger範本設計工具替換了新版型後,卻發現怎麼修改都很難在IE 8中很流暢的讀取,於是只好暫時替換回舊介面。

而昨天經由介紹「Google New」這個Google新訊發佈中心,讓我看到Blogger前幾天推出了一個「Super Simple」新範本,於是決定再來試試看,畢竟這麼好用的工具就內建在Blogger中,不用實在太可惜了。

Blogger的範本設計工具真的非常親切又好操作,當然,替換版型後我還是會再重新加上一些自己之前使用的Blogger Hack修改。而幫電腦玩物換上Super SImple新樣板後,不能免俗的打開各種瀏覽器測試看看,並且用網頁測速工具檢查讀取效能是否可以接受。結果這次的替換版型似乎順利很多,目前都還沒有發現什麼問題,在IE 8上的執行表現沒有出錯(當然在IE 6會有一些版型顯示上的問題,但不致於影響讀取)。

上述的操作步驟,我之前也寫過各自獨立的單篇文章,這次就順便將其羅列如下:

  1. Google Blogger 平台推出超貼心範本設計工具,實作改版心得
  2. 電腦玩物那些原創內容外,我所抄襲的 Blogger Hack 技巧摘錄
  3. Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示?
  4. GTmetrix 線上免費分析網站效能缺陷,根治拖慢網頁速度元兇
  5. Pingdom 網頁速度優化參考工具使用心得
  6. [雜言]慢半拍的電腦玩物加速記 (謎之音:終於~嘆!)

playpcblogger-04

 

寫這篇文章的主要目的,除了筆記一下電腦玩物的版型替換日誌之外,也希望邀請使用RSS閱讀器、電子郵件訂閱來瀏覽電腦玩物文章的朋友,撥空到「電腦玩物部落格」中,幫忙用您常用的瀏覽器測試看看電腦玩物新版型,如果發現什麼問題?或者有任何具體建議?都歡迎留言討論。

 

另外,也借此文章之便,順便再次說明一下電腦玩物網站中的幾個或許大家容易忽略之處。例如,讀者可以利用部落格右上方的「電腦玩物站內搜尋」來查詢電腦玩物寫過的文章。

說到這個搜尋器,有用過的朋友應該會發現,裡面整合了電腦玩物善用佳軟小眾軟件三個部落格的文章,後兩者是中國的資訊部落客。這其實是個很有趣的機緣,在某次的機會下我們談起三個部落格在介紹資訊的角度上剛好各有不同,如果能夠把站內搜尋整合,就能讓讀者同時搜尋到更豐富全面的軟體、網站資訊,或者是同個軟體的不同心得分析。

而如果你這次只想針對其中一個部落格進行搜索,也可以點擊「限制結果」下方的特定部落格名稱即可。這是利用「Google自訂搜尋」服務完成的,我也推薦對於資訊搜尋有重度需要的朋友一定要學會使用這個免費工具

playpcblogger-03

 

最後,這次終於在許多讀者的提醒下,直接擺上「內嵌在本頁」的留言輸入欄,希望這個功能可以穩定運行(因為之前嘗試的時候會有些怪問題),也邀請讀者能幫忙留言測試看看。

並且我也「暫時」嘗試性的取消了留言驗證詞的功能,也就是目前讀者可以匿名、不需輸入任何驗證、不需跳頁直接留言,希望帶給讀者一些方便之外,我也是想試試看Blogger最近新增的「垃圾留言」阻擋過濾效果如何^^。

 

電腦玩物裡的寫作原則一直沒變:「部落格瑣事:關於垃圾留言、全文輸出與文章轉貼」,除了希望跟大家分享「一切發生在我電腦上的事」,能夠把自己的數位應用心得做自我反省思考的同時,也和大家一起討論外;對於電腦玩物裡的文章、留言基本上我都抱持著開放分享的態度,所以本著「創用CC」的原則,只要在非商業使用下你有註明出處(附上一個連回本文的超連結),那麼你可以自由的轉貼、複製我的文章全文。

最後的最後,再次建議大家可以用Google Reader閱讀器訂閱電腦玩物(或是電子郵件等其它方式),網站右上方有訂閱的按鈕連結,而電腦玩物仍將繼續提供全文的寄送,歡迎大家「直接在Google閱讀器」讀完電腦玩物文章,並且善用Google閱讀器各種功能做好我們的知識庫收藏分享,這樣,才是數位時代最有效率的資訊接收方式。

留言

  1. Hi I am one of the Google fans and already subscribed to your blog.
    Thank you for the information!

    回覆刪除
  2. 頁面看起來更簡潔了,還蠻利於閱讀的:D 當然在Firefox3.6.10和Chrome6.0.427上都很正常沒問題

    回覆刪除
  3. 讀取速度變快了

    回覆刪除
  4. 訂閱沒問題,RSS下的分享功能也都正常

    我使用Google瀏覽器,瀏覽版面OK

    留言送出!

    回覆刪除
  5. 新版型真不錯的說~!
    我改天也想換了。

    回覆刪除
  6. 新版面變的很簡潔
    我喜歡
    讀取速度也快好多喔:D
    眼睛覺得還蘇西嗲~

    回覆刪除
  7. 新界面不错。顺便问下博主是如何让首页文章折叠的呢?很奇怪 blogspot 本身居然不提供这个功能。

    回覆刪除
  8. blogspot已經內建繼續閱讀功能囉

    只要在文章分段處加上


    即可~

    回覆刪除
  9. 好乾淨的版面啊!而且終於有留言框了。
    看了很舒服。

    回覆刪除
  10. 既然留言整合到同一個頁面了,留言的RSS/Atom資料補完整一點吧,在head tag內有數個link tag,你可以發現title都是電腦玩物,這樣讀者在點進去之前是分不出來的。

    回覆刪除
  11. 這個我不知道怎麼設定耶?
    歡迎提供更詳細的作法~~^^

    回覆刪除
  12. 版面很簡潔,然後讀取變很快~
    這次改版送你個"讚"

    回覆刪除
  13. 文章字體好像變小了!!

    回覆刪除
  14. 令人驚訝的簡潔呢!不錯喔,我喜歡~

    回覆刪除
  15. 一直覺得那個推薦到twitter,plurk的圖示....好醜....
    twitter可以用官方的,plurk好像還得再找找....

    回覆刪除
  16. 呵呵,這個我可以徵求設計嗎XD

    回覆刪除
  17. 部落格最後還是會回歸內容導向
    我也想把自己的blog弄的讀取順暢一點

    回覆刪除
  18. 訂閱電腦玩物rss有不短的一段時間了。
    說真的全文分享,真的就感心ㄟ。
    趁機會答謝一下。

    回覆刪除
  19. 新介面是不錯,但是在書籤列中電腦玩物前的圖示在很久前已經一直在「B」及「電」之間的圖示不停更換(當我每次瀏覽的時間),可以解決這個問題嗎?

    回覆刪除
  20. 感覺上面的分享按鈕相對的醜了點,Blogger有內建的分享按鈕,是在文章後,然後比較小,像這樣 http://ppt.cc/2PRY

    我覺得還滿好看的,雖然按鈕小了點。

    後台→設計→網頁元素→網誌文章處案編輯→分享按鈕打勾即可


    目前內建沒有PLURK的按鈕,我是自己加上去的。

    用的方法是在後台修改HTML

    在< head>後加上

    < script>
    function Plurk(TitleName,Link) {
    var Link=Link.replace('http://','http:%2f%2f');
    window.open('http://www.plurk.com/?status=' + Link +' ' + '(' + TitleName + ')');
    }
    < /script>


    展開小範本裝置

    找到< div class='post-share-buttons'>

    在div與< b:include data='post' name='shareButtons'/>中間插入

    < a expr:onclick='"javascript:Plurk(\"" + data:post.title + "\", \"" + data:post.url + "\");"' href='javascript:void(0)' title='將文章推到 Plurk'>
    < img height='22' src='http://statics.plurk.com/b872d9e40dbce69e5cde4787ccb74e60.png' width='22'/>< /a>


    圖片用的是plurk官方圖,所以沒有灰色的,稍有點突兀,不過我自己很喜歡噗浪所以就當作強調XD


    希望有點幫助

    回覆刪除
  21. 剛剛忘了提

    要調整CSS把欄位拉大

    .post-share-buttons {
    width:140px !important;
    }

    回覆刪除
  22. 剛剛留言不見了!?

    補一下

    我剛剛留言是說,上面的推文按鈕可以用Blogger本身提供的就好

    內建的按鈕少了PLURK,我是自己手動加上去的。

    像這樣http://ppt.cc/2PRY

    回覆刪除
  23. @Lawliet:內容確實是最重要的啊~

    @Kid':我有發現google chrome上會怪怪的,其它瀏覽器在我這邊沒有問題。不知道有朋友知道問題和在與解決方法嗎?還是說因為我把圖存在skydrive的關係?

    @夜殘狼:感謝你提供的作法,我是希望能夠擺在目前的位置,然後按鈕要夠大XD 我的網頁語法不是很熟,所以老實說不太會調blogger官方的位置,有時間再來調整看看吧^^

    回覆刪除
  24. @夜殘狼:我將你剛剛提供的精采語法教學救回來了^^
    剛剛因為用了太多語法和英文,被blogger自動判定成垃圾留言了XD

    回覆刪除
  25. 我也想說可能是被系統當垃圾留言了~~謝謝幫我救回來



    剛剛測試了一下,要調位置還滿簡單的

    編輯HTML

    找到< div class="widget-content"> (就是現在放推文按鈕的地方)

    將原本官方推文按鈕的< div class='post-share-buttons'>整個區塊移到< div class="widget-content">的位置取代掉原本的按鈕即可

    下面還有廣告的關係

    所以取代到
    < scripr type="text/javascript">


    這串文字前面就可以了


    至於大小的話~因為官方的圖片是採用CSS語法來放圖的

    所以要放大的話我想只能把http://www.blogger.com/img/share_buttons.png這張官方圖片另存起來自己放大再調整CSS語法了 (或是有沒有高手有甚麼更好的方式!?)


    達不太到要求~SORRY~

    回覆刪除
  26. Simple is best.
    我也想來換新版型了 ^_^

    回覆刪除
  27. @夜殘狼:解釋得很詳盡了,謝謝你~這樣真的要空出時間好好試試看囉^^

    回覆刪除
  28. 新版型清爽簡潔,但用微軟正黑體取代新細明體會更好看,還有電腦玩物前的圖示在Google瀏覽器好像不能顯示,只會顯示出Blogger原來的圖示!!

    回覆刪除
  29. 老實說,我也不知道為什麼會這樣?歡迎幫我解惑(其它瀏覽器都可以正常顯示~)

    回覆刪除
  30. 前面有朋友提到字體變小,確實之前使用的是15,目前是14,大家覺得還習慣嗎?會不會太小呢?

    回覆刪除
  31. 很不錯, 這樣的讀取速度才是真正給人用的 ^^ icon 顯示不正常的問題, 在 <link href="..." rel=".." 的後面補上 type="image/x-icon" 應該就可以了。

    回覆刪除
  32. 原來加入換行符就能實現折疊文章的功能,我居然一直都不知道,多謝博主提醒。

    不過我這裡顯示的是“閱讀更多帖子”,看起來怪怪的,請問如何如何把它改成“繼續閱讀”呢?

    回覆刪除
  33. 不確定blogger要如何修改模版,也許有個edit template功能?

    找到類似下面這段



    將"電腦玩物 - Atom"的部份修改一下就可以了。

    回覆刪除
  34. 不確定blogger要如何修改模版,也許有個edit template功能?

    找到類似下面這段

    < link rel="alternate" type="application/atom+xml" title="電腦玩物 - Atom" href="http://playpcesor.blogspot.com/feeds/3577619413058925029/comments/default" />

    將"電腦玩物 - Atom"的部份修改一下就可以了。

    ------------
    抱歉剛剛不了解留言語法,導致整段消失,重發一篇。

    回覆刪除
  35. @harnack:
    在後台的「設計」,[網頁元素]的調整畫面中,找到「網誌文章」欄位進行編輯,就可以設定繼續閱讀要顯示的說明文字

    @匿名:
    blogger後台有編輯HTML範本的地方,但是搜尋不到atom這類的設定~

    回覆刪除
  36. 讀取速度變快了
    而且版面乾淨許多

    回覆刪除
  37. 謝謝大家喜歡我的新版面~^^

    回覆刪除
  38. Blogger 終於推出 Mobile Template
    不需要再用 Blogger Touch 了

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

自動化圖片去背教學!只需 Word 或 PowerPoint 搞定

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

AnyDesk 最快的遠端桌面軟體,免費免安裝中文教學

如何把 Google 日曆行程快速轉成 Evernote 子彈筆記待辦清單

比惱人鬧鐘有效! Google 時鐘結合智慧助理的早起設定技巧

如何在忙碌職場深度工作?反思對深度工作力的 4 個實踐技巧

8萬張百年前水彩畫構築的世界風景相簿,歷史地理教學資料庫

四款手機掃描紙張辨識中文 OCR App 實測: LINE 效果最好