2014年精選20款Responsive Web Design (RWD) Blogger免費範本


這二年的網站設計,最大主流就是朝向RWD風格來設計,所以漸漸的,一些Blogger Template也都支援RWD,而本文中所列出的「免費」Blogger範本都是由網路收集而來,不同的是我過濾掉一些我認為設計的不是很好的部分,這邊所謂不是很好的部分指的是支援的RWD程度不足,或者整體的設計風格我不太喜歡,當然,這是很主觀的,因為每個人喜歡的樣式不同,所以以下列出的範本只供參考,沒有絕對的好壞,但會以支援RWD設計為主,也歡迎各位推薦好的Blogger範本。

什麼是Responsive Layout?即「Responsive Web Design」,簡稱「RWD」中文翻成「自適應網頁設計」,簡單的來說就是可以根據用戶的閱讀裝置,讓網頁可以在不同的解析度下,自動呈現不同的介面,舉例來說:若你用 PC看網頁,那麼就呈現適合PC可以瀏覽的版面,若用手機或平板來看網頁,那麼有Responsive Layout的佈景主題,就會自動調適成適合觀看的版面設計,以得到較佳的閱讀體驗。

推薦閱讀:2014年Blogger響應式範本第二彈,精選50款免費RWD範本

下載:20+ Blogger Templates 打包下載 (各位可由下方單獨下載範本,或由左邊連結全部打包下載)

1.【Brand Mag UX

這個範本在我之前介紹「TEMPLATEISM」這個Blogger範本提供網站時就有提到,這個範本除了支援RWD外,在整體的設計上,我覺得比較特別的是左邊有設計了一層導覽列,這是比較有特色的地方

Live DemoDownload (備用載點)

2.【Aware

由「IVYThemes」所釋出,這個網站也提供一些付費的範本,有需要的人可以自行前往觀看,除了以下這個顏色外,Aware還提供不同的範本主題顏色下載,各位可參考此連結

Live DemoDownload (備用載點)

3.【MyExtraNews

同樣是由「IVYThemes」所設計,所以字體的大小有點偏小,想要套用的人可以稍微改變一下字型大小

Live DemoDownload (備用載點)

4.【ExtraNews

和上面的MyExtraNews範本是類似的,但在首頁的特色文章與文章列表部分有些許的不同,MyExtraNews在首頁文章是以單欄式的列表方式,而ExtraNews則是採用雙欄式,另外,除了原本提供的藍色系之外,官方也提供了不同的顏色主題供大家下載,有需求的人請按此連結

Live DemoDownload (備用載點)

5.【MXfluity

由「IVYThemes」所釋出,上方有動態選單,首頁以九宮格的方式來呈現

Live DemoDownload (備用載點)

6.【Sight

由「Soratemplates」所釋出,這範本有免費版、付費版二個版本,一般免費版本的就已經夠個人使用了

Live DemoDownload (備用載點)

7.【Wedding Mag

這是由「TEMPLATEISM」中所挑選出來的,雖然它是以婚禮的故事來呈現這個範本,但用來做為一般的美食或生活記錄都蠻適合的,就看各位怎麼應用了

Live DemoDownload (備用載點)

8.【Grid Pin

來源為「Weblogtemplates」,此範本有類似Pinterest瀑布流呈現方式,我個人覺得還蠻適合套用在攝影類的部落格上

Live DemoDownload (備用載點)

9.【Indonesia

選自「Soratemplates」,與上面的「Sight」同樣,具有免費版本與付費版,本文提供的是免費版本

Live DemoDownload (備用載點)

10.【DarkRed

這範本來配色上採紅、黑色系為主,和一般的淺色系有些不同,我個人其實蠻喜歡這種色系的,不過要使用的人請注意一下圖片的呈現問題,不然有些圖若配上黑色系,會有一點不搭的感覺

Live DemoDownload (備用載點)

11.【Excelencia

這個範本比較吸引我的地方是主頁圖片的動態特效,如果它的邊欄能放到右邊去,那麼我會更喜歡

Live DemoDownload (備用載點)

12.【Bresponsive

此範本是由「SpicyTricks」所挑選出來的,我自己蠻喜歡它的設計的,簡潔又大方,有內建幾個廣告欄位

Live DemoDownload (備用載點)

13.【TheTuts

走簡潔、乾淨的風格,右邊的邊欄具有頁籤式的呈現方式,字體建議可以放大一點,對中文字來說會比較適合,另外,在首頁中,訪客可以藉由左上角的按鈕來選擇橫列式或九宮格式的呈閱方式

Live DemoDownload (備用載點)

14.【RBSimple

已內建分享按鈕、相關文章等功能,亦有內建廣告欄位

Live DemoDownload (備用載點)

15.【Pingrey

蠻像上面介紹選的範本「MXfluity」,首頁文章都是以九宮格的方式呈現,有內建分享按鈕

Live DemoDownload (備用載點)

16.【Adsosive

由圖片就可以看出,這一款範本蠻有設計感的,網頁上方具有動態選單的功能,內建分享按鈕與相關文章的Widget,如果文章內文的寬度能寬一點的話,那我覺得會更加分

Live DemoDownload (備用載點)

17.【Enpine Blog

由「Template Trackers」所釋出,也是我個人蠻喜歡的一款,版面夠大,在書寫文章時不怕寬度不夠,簡潔大方

Live DemoDownload (備用載點)

18.【7seas blog

取自「Template Trackers」,這個範本蠻酷的,有類似Pinterest瀑布流的風格,蠻適合作為攝影類或美食網誌的首頁

Live DemoDownload (備用載點)

19.【Sensational

由「Blogtipsntricks.com」釋出,也是走清爽風,上方有一層功能列,而網頁下方則有四個子欄位可供使用

Live DemoDownload

作者不希望他人直接分享下載連結,所以在此向各位說明如何下載此範本,首先,進入官方的下載頁後,請輸入EMail,並點擊「Signup Now!」,其實作者就是希望訪客能夠訂閱他們的文章

接著請輸入驗証碼,並點擊「Complete Subscription Request

點擊「Close Window」關閉FeedBurner視窗

此時,請到信箱中點擊「驗証網址」來驗証你的信箱,另外,在信箱中也會附有下載範本的網址和密碼

當然,我們最後的目的是要下載範本,所以請進入下載頁面,點擊「Enter Password」輸入郵件中所附的密碼

最後便可以看到由「Blogtipsntricks.com」所提供的所有範本的下載點,找到想要下載的範本,並點擊「Download」即可。註:以我自己測試的情況來看,官方目前是以Dropbox為存放檔案的地方,因此有時候會出現流量過大的問題而導致無法下載,若有遇到這種情況,可能就需要稍後再下載了

20.【Minimum

同樣由「Blogtipsntricks.com」的作者所設計,此款範本給人的感覺就是非常的簡單、乾淨,下載的方式和上面的Sensational範本相同,請自行參考上面的說明

Live DemoDownload

小結:在此次的範本篩選中,很多範本都是來自相同的地方,例如:「IVYThemes」,所以在看完這些範本後,可以逛逛原始的出處,也許有更好的範本我沒有發現而已,同時也相當歡迎各位推薦你所愛的Blogger範本。註:如果想由「IVYThemes」中RWD的範本,建議可由官網上方的分類處,以「Responsive Layout」直接尋找

  • Pingback: [特別企劃] 精選25款響應式WordPress佈景主題推薦 « 網路賺錢教學站()

  • Samuel Leung

    版主您好,非常感謝您分享這些RWD Templates,對我幫助很大,但我對Blogger不太熟悉,遇到幾個問題想請教您,
    我安裝了【TheTuts】,但發覺字型太小,在編輯HTML內試過改了很多地方的 Font-Size 仍未能成功:
    1)在主頁的貼文摘要名單,請問在哪裡可以改變貼文摘要內文的 Font-Size?(貼文標題的Font-Size我卻找到)
    2)在貼文的詳細內文的 Font-Size?(詳細貼文內的標題Font-Size我卻找到)
    3)另外,請問在Blogger內, 如何令手機的行動版主題也能顯示所有標籤? 如: 熱門文章 / 文章分類 等等…
    Thank you.