電腦玩物換上全新 Google Blogger 響應式版面!邀請讀者測試


之前我的電腦玩物部落格中使用的舊版面也已經好幾年沒有大更動了,一來我不是設計網頁的專家,二來在時間分配上,我有正職工作、講座課程工作,部落格寫文章是副業,所以把時間花在每天寫出最好的文章,就幾乎分配完我所有的時間了,對於更好的版面呈現,只好擱置為次要的順位。

不過,前幾天(2017/3/21)我使用的部落格平台 Google Blogger 推出了一系列的「響應式網頁全新主題」,這倒是可以幫我省下許多時間,直接替換新主題即可。

於是我選了一款適合電腦玩物的「數位工作方法主題」的風格,趁著周末,直接替換,只做了簡單的修改,並且精簡了之前的很多版面內容。

全新的電腦玩物版面,不知道大家覺得如何,或是有沒有發現什麼問題?有沒有覺得缺少哪個功能?邀請電腦玩物的讀者朋友們來跟我一起測試看看,如果大家有空的話,也歡迎留言提供你的心得。

下面讓我來提示幾個改版後的重點。




  • 精簡的版面,功能列與搜尋按鈕

邀請大家實際打開「電腦玩物」網站來試試看。

首先我換上的新版面比之前精簡很多,以文章的資訊流為主軸,左上角與右上角則有兩個切換功能。



左上角的選單,可以打開更多內容的功能列,裡面有我的作者簡介,以及之前的一些外掛。



右上角則會有一個常駐的「搜尋」按鈕,點擊後,可以輸入關鍵字來搜尋電腦玩物的文章。

之前很多讀者都跟我說常常會來搜尋我的站內文章,所以這個重要的功能,現在會常駐在右上角的搜尋按鈕。





  • 訂閱按鈕、分頁瀏覽:

在網頁的最開頭,會看到一個[訂閱]按鈕,可以用電子郵件訂閱我的每天最新文章,我都會提供「全文閱讀」,收到文章後不會浪費你要切換網站的時間。

在訂閱按鈕下方,則有我挑選的一些「分頁」,包含我的課程資訊、書籍資訊,還有一些我整理過的精選文章清單。





  • 響應式網頁,自動適應你的螢幕大小:

新版的電腦玩物,終於擁有真正的響應式網頁。

如果螢幕夠大時,左方的資訊欄也會直接展開顯示。



而如果使用平板、手機,現在也能更舒適的閱讀電腦玩物的文章了!





  • 一些之前讀者需要的功能:

之前有很多讀者會一篇一篇的看我發布的文章,在左方的資訊欄的「網誌存檔」,可以展開,展開後就能看到每一個月分的文章清單。




左方還有一個[標籤],也可以展開,展開後可以看到電腦玩物中最重要的幾個文章分類,讓你根據分類瀏覽相關文章。





  • 分享文章按鈕:

在每一篇文章的標題和結尾處,會有一個簡潔的[分享]按鈕,點擊後,你可以把文章分享到你的社群網站。





  • 熱門文章繼續讀:

而當你閱讀完電腦玩物的某一篇文章後,繼續往下捲動,可以看到其他即時更新的熱門文章。

以上,帶大家導覽一下電腦玩物新版面的幾個重點後,我也希望聽聽大家的想法,歡迎大家來留言回饋喔!

最後,再次謝謝大家十年來對電腦玩物持續的支持與鼓勵。


留言

  1. 我是忠實讀者,在此給一點小小建議:
    1. 可以加入一個back to top按鈕,當有長文章時很好用。
    2. 上方的Bar可以調整一下寬度,大概是現在的一半到三分之二左右吧,視覺上好像比較舒服。
    3. 除了上方的Bar會在網頁下拉時一起跟著下拉(固定於上方),頁面的左右兩側,不妨也可以放一些閱讀時會需要用的功能、工具(但可以有哪些,我則沒有細想),也一起固定著往下移動。

    回覆刪除
    回覆
    1. 讓我來研究看看有沒有這些功能可以調整

      刪除
  2. 原來版主也有正職工作,我一直以為blogger就是你的正職..... XD

    回覆刪除
    回覆
    1. 部落格目前還是有空時撰寫與經營為主

      刪除
  3. blog.zoncheng.com 我昨天要更新時意外發現有新的template, 也是花了點時間換了XD

    回覆刪除
  4. 手機板上面的介紹顯得太大了,灰底也感覺有點...奇怪,評論的字也偏淡

    回覆刪除
    回覆
    1. 感謝回饋,我先慢慢收集大家意見後,再找時間來一次調整

      刪除
  5. 很好我也换,手机评论上下空间小,架设wordpress也有自动适应手机的主题,wordpress平台版本在微信里不能浏览了,不知道下次会不会封简书。

    回覆刪除
    回覆
    1. 原來你也有用簡書阿~這幾天我才發現這新平台...

      刪除
  6. 版面變得狹小,暫時還不習慣。上方的 Bar 內容文字如果整合到左邊隱藏的個人簡介裡面似乎更簡潔。

    回覆刪除
    回覆
    1. 我也有點苦惱上方那條 Bar ,不過這是版型內建的,暫時也還在找方法看能不能縮小,或是像你說的移到左方

      刪除
  7. 在手機上閱讀,當拉往下的時候,上方所出現的訂閱bar會大概佔據首激化面的1/5左右,個人感覺可視區塊變得小小的...

    回覆刪除
    回覆
    1. 這也是我目前苦惱,不知道應該用什麼語法去縮小,歡迎有知道的高手朋友可以提供建議

      刪除
  8. 放一堆廣告就不用在這邊瞎扯什麼版面易讀性

    回覆刪除
    回覆
    1. 目前看起來行動版確實廣告顯示得有點多,這邊我也會後續試試看不同功能調整其頻率

      刪除
    2. 哈,素質真低,用匿名躲在螢幕後面大聲wwww

      刪除
    3. 目前我嘗試開啟了 Google 的「廣告平衡」功能,據稱會根據我設定的頻率(我設定為 65% )自動做降低,讓一些不需要的廣告不要出現,希望在電腦版與手機版頁面上會起一起效果,大家可以再協助我追蹤觀察看看

      刪除
  9. 回覆
    1. 新的版面還不太知道應該怎麼擺放廣告,後續會再看看可以如何調整

      刪除
  10. 這個版型瀏覽起來很舒服哦!而且没了左右滑動切換上下一篇文章,避免閱讀時跑掉,讚!

    回覆刪除
    回覆
    1. 我也很困擾之前行動版那個左右滑動,但又改不了

      刪除
    2. 現在解決了啊!不過先前我看wfublog.com的功能,確實可以處理掉這個問題

      刪除
    3. wfublog 才是 Blogger 修改的高手,我其實不太懂網頁程式碼,也非工程師,所以這個問題對我來說一直是難題

      刪除
    4. 你現在也沒這些問題了阿

      刪除
    5. 哈哈,那算是替換 Blogger 內建新版型後的意外收穫

      刪除
  11. 電腦版很清楚,辛苦大大了!

    回覆刪除
  12. 廣告的配置可以再調整,因為現在的廣告集中在上部的中間區塊中,跟內容區塊不太容易分,有點影響到閱讀時的判斷。如果要將廣告放在中間區塊,不如放在右邊的區塊就好,起碼中間的區塊內容不會被廣告橫幅切割。另外現在中間區塊的廣告,有些是動態的,這樣會讓整個版面更亂....

    回覆刪除
    回覆
    1. 感謝你的回饋,目前使用的廣告區塊是會根據版面自動調整大小,我來看看能否進一步進行控制

      刪除
  13. 正文能否不要用這麼淺的灰色,很難讀。謝謝

    回覆刪除
  14. 板主您好:可以按讚的FB按鈕好像沒有顯示,因為每次看您的文章,雖沒有留言,但至少會按個讚,感謝您多年來無私且鉅細靡遺地寫文章,真的令我獲益不少。

    回覆刪除
    回覆
    1. 感謝您的提醒,這部分因為還要花時間研究一下怎麼重新裝回去,可能也是要變成等有空時才能處理的延後事項了^^

      刪除
  15. 新版本感覺很好閱讀,站長太讚了。
    手機版的部分,雖然有廣告,但是並不是全屏覆蓋式的廣告,也不影響閱讀體驗,倒是覺得還可以。
    不知不覺也看了十年的電腦玩物了,站長不說都還不知道已經這麼久了,現在已經習慣了每天打開電腦,先看看這裡,都快把這裡設成首頁了。

    回覆刪除
  16. 有在關注您的網站很久了,這次響應式改版整體很不錯,簡約的風格,也增加手機瀏覽的方便性。

    不過一點小建議,目前在電腦版以及手機版進入首頁時,最上方的橫幅列高度太大了,造成第一篇文章會壓的太下面。

    建議可把最上方一些網誌說明移到左上角的簡介裡面或縮小行高或縮小字體,最上方廣告橫幅放到右邊,這樣子可以把一篇文章的位置拉到更上面一點,畫面會更乾淨哦,進入網站時也可以幫助視覺更好聚焦在第一篇文章上面。

    回覆刪除
    回覆
    1. 感謝您的建議,網誌說明我會抽空來調整看看,不過手機版的廣告好像沒辦法出現在右邊,他是自動找位置填進去,並且自動判斷要顯示的大小(也是 Google 的響應式廣告)

      刪除
    2. [知名]模板,上方的 bar 尺寸小很多,可以考慮。

      刪除
    3. 是的,其實我一開始是想選知名模板,但知名模板有個問題,就是我的很多文章都有教學大圖片,在知名模板上會有許多圖片超出的問題,所以上週末替換時沒有選他。

      不過或許之後有額外的空檔時,我會再來試試看知名模板還有哪些微調可以改正我第一次測試遇到的問題。

      刪除
  17. 沒有了 G+ 按鈕 ( 平時習慣看完的文章會按 G+) , 分辨不到哪些文章已看

    回覆刪除
    回覆
    1. 哈哈,目前我還不知道如何把分享按鈕像之前一樣直接顯示出來

      刪除
  18. 您是用Blogger或Blogspot啊?

    回覆刪除
    回覆
    1. 這兩個應該是一樣,正式名稱是 Blogger

      刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

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

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

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

為什麼大家愛用 Trello ?最佳整理教學讓事情井然有序

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

最簡單養成習慣方法是「解決問題」,不靠時間表、獎懲與意志力

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱