三步驟讓你輕鬆從 WordPress 搬家到 Blogger

繼前一篇三步驟讓你輕鬆從 Blogger 搬家到 WordPress 之後, 我在免費虛擬主機上的文章也從玩票性質日漸增多, 由於使用的是利用免費虛擬主機架設的WordPress, 難免擔心哪天網站突然被無預警關閉, 那麼豈不欲哭無淚? 畢竟不是自己花錢租用的虛擬主機, 穩定性總是令人擔心. 所以今天決定把自己在免費虛擬主機上的文章備份到Blogger上, 狡兔三窟嘛, 多一重備份總是好的.

所以本篇示範的便是如何從 WordPress 搬家到 Blogger!

備份網站

首先, 先備份網站以防不測. 到Wordpress後台→[Tools]→[Exports]→選取 All Content→最後按下[Download Export File]

安裝搬家外掛小工具

由於 WordPress 和 Blogger 二者使用的編程語言不同, 從WordPress下載的備份檔格式是WXR, 是無法直接匯入 Blogger 的.

所以如果要從 Wordpress 搬家到 Blogger, 我們需要安裝一個 Export to Blogger 的外掛小工具.

到 Wordpress 後台→選[Edit Site]→[Plugins]→[Add New]

然後在搜尋列內輸入 Export to Blogger, 找到後按下[Install Now]→然後按下[Network Activate]

接下來回到[My Sites]→[Dashboard]→[Plugins]→找到剛才安裝的 Export to Blogger 按下[Setting]→在Option處記得勾選所有你要輸出的分類, 然後按下[Export XML]鍵.

輸入WordPress備份檔到Blogger

最後一步便是將自WordPress輸出的XML檔匯入Blogger裡. 首先, 先到Blogger後台→[設定]→[匯入內容], 因為我是備份用, 所以我選擇關閉自動發布匯入文章→按下[匯入]鍵即可.

Q&A

➤ 請問圖片是否也能一併搬到 Blogger 呢?
不行, 這個外掛工具搬移的內容只有文章文字的部份, 並不會把文內的圖片一併移入.

➤ 為何我用外掛工具下載的 XML 檔案是空的?
請確保在按下[Export XML]鍵前, 你有在 Option 處記得勾選所有你要輸出的分類. 

➤ Wordpress 文章分類不會被匯出.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

警告 Blogger 的使用者 - 備份的重要性

使用 Blogger 近二年, 一直以來大力推薦 Blogger 的免費, 好用, 靈活, 自由和幾乎零限制(在不違法的前提下), 不料, 今天我居然自打嘴巴, 被 Blogger 在未經提醒的情形下硬生生的刪除了二篇我花不少心血的文章, 而且沒有通知, 沒有原因, 最爛的是, 沒有備份!! 刪完沒了, 就沒了, 太可惡了, 還申訴無門!

所以, 必需通知所有使用 Blogger 的站長們務必時時備份你所有的文章, 因為你不知何時它們會刪你的文, 會刪那一篇, 不會有事先通知, 也不是只是還原為草稿, 而是整篇刪除, 沒了就沒了!!!

先說一下被刪文章的內容, 一篇是介紹即將走入歷史的feedburner和它的替代品. 另一篇是如何將部落格主題的區塊分成二個部份.

二篇的內容完全針對如何使用 How-to, 那裡會有所謂的"違反社群規定"的內容???

接下來, 不僅僅是文章被刪, 連要進自己的 Blogger 後台, 或是點看自己或是其它 Blogger 的網站, 都會跳出這個恐怖嚇人的警示畫面....

正在氣到不行時, 上網一查, 才發現, 應該不是 Blogger 真心想要刪我的文啦, 應該是 Blogger 被駭客攻擊了, 有不少人都發生了類似的情況, 說起來, 我只被刪了2篇還算幸運, 有些人被秒刪了一堆.... 如果沒有備份, 應該會心臟病發吧!

好在是, 當文章被刪時, 都會收到來自 Blogger 的通知信, 所以, 至少知道有什麼文章被莫名其妙的刪掉了, 也才方便救回被刪文章.

首先要感謝一下 Blogger 經營學習資源分享這個社團, 和站長分享的網站時光機一文讓我順利救回被刪文章.

接下來, 自然是乖乖的備份網站的主題和內容, 以防不測.

主題的備份

在Blogger後台→[主題]→按下[自訂]鍵旁的向下鍵→然後[備份]即可

內容的備份

在Blogger後台→[設定]→往下拉到[管理網誌]→然後按下[備份內容]即可.

不論是備份主題還是備份內容都很簡單與方便, 問題在於人類的惰性! 總是安逸之後就會懶散, 於是從某一天開始, 就不會再勤於備份了.

雖說今天早上的事件, 讓我一度對 Blogger 死心, 準備要改用 WordPress 了, 但鑑於 Google 解決問題的速度, 加上我對 Blogger 的諸多優點有點覺得捨不得離開, 所以, 又暫時放棄轉到WordPress的念頭, 決定好好研究如何定期備份我的 Blogger, 

啟動 Blogger 自動備份功能?

若是 Blogger 能有自動備份的功能, 該有多好呢? 當然啦, 目前 Blogger 是沒有這個功能的, 但是, 有位韋恩大神為你研究了數種為 Blogger 網站自動備份的方法, 各位可以移駕參考.

根據韋恩介紹的幾種方法裡, 利用email備份再自動轉發到備份站是最佳的做法, 但由於韋恩介紹的 Blogger 後台是舊版的畫面, 有些地方已與今日的新版不同, 所以這裡加入新版的圖示.

設定接收備份的 email 信箱

Blogger後台→[設定]→按下[邀請更多人加入文章通知]

然後在跳出的對方框裡輸入你要備份文章的email信箱→然後按下[傳送]鍵→回到email裡收信, 會收到一封來自Blogger的邀請函, 按下[訂閱]鍵, 便完成訂閱了.

過一會兒, 你便會發現在 Blogger 後台[以電子郵件發文至]的下方會出現剛才訂閱的email 地址.

設定接收備份的網站
 

接下來, 用這個email開一個 Blogger 的新備份網站, 並設定用 email 發文功能: Blogger後台→[設定]→按下[透過電子郵件張貼文章]→因為只是用來備份, 所以選擇[將電子郵件另存成草稿文章]→記得選一個[secretWord]→按下[儲存]鍵

設定email自動轉址功能

接下來, 則是設定gmail的自動轉址功能, 到接收備份的email, 按下右上方的齒輪→然後選[轉寄和POP/IMAP]→此時在[新增轉寄地址]處輸入上方從Blogger 後台改了secretWord的@blogger.com email地址→按下[下一步]→[繼續]→[完成]

然後回到你新建的備份站後台, 你會看到一封被存成草稿來自gmail的轉寄確認信, 打開它, 按下連結確認要求後, 就成功的把自動備份功能設好了.

此時, 你已成功的設定好gmail的自動轉址功能了, 但請再回到gmail, 按下右上方的齒輪→然後選[轉寄和POP/IMAP]→因為預設值是[停用轉寄], 所以要自己點選[轉寄外來郵件副本給]的選項, 然後按下下方的[儲存變更], 此時, 自動轉寄功能便成功的啟動了.

必須說, 想出這招的韋恩真是天才, 非常的聰明, 利用的原理是: 
➤ A: 每次發文時用Blogger的自動發文通知功能將新文發到A信箱

➤ B: 另架一個備份Blogger網站, 使用Blogger本身的電子郵件張貼文章功能

➤ 最後, 用gmail的自動轉址功能把A信箱收到的新文自動轉寄到Blogger設定好的電子郵件張貼功能裡, Blogger便會自動擷取發布到備份網站上.

臉書粉專自動備份

由於本來就已安裝了Blogger發文自動轉發臉書粉專的功能, 所以所有發的文章在文字部份其實都有保存在粉專中, 雖然失去了圖片和原有的格式設定, 但至少所有的文字內容是被完整的保存下來, 等於是在Blogger本身之外的另一種自動備份功能, 以防整個Google出問題時, 至少還有粉專可以取得失去的文章. 至於時差大約是在Blogger發文後2-3小時會自動轉發至臉書粉專, 所以, 時效性還是可取的.

詳情請參考這篇: 如何讓Blogger 自動轉發到臉書粉專?

利用電子報訂閱自動備份

狡免三窟, 除了天才辦法的利用Blogger電子郵件功能自動在另一個Blogger備份站上自動備份之外, 還有原來就有的Blogger發文自動轉發到臉書粉專的文字備份之外, 今天的駭客刪文事件著實嚇到我了, 所以決定再加一重保障. 那就是利用follow.it訂閱自己網站的電子報. 於是當文章不幸在無預警情況下被刪時, 還可以從follow.it裡利用 copy & paste 取回文字和圖片.

詳情請看: 如何申請及安裝follow.it電子報訂閱表格.

因此, 本站每次新文發布, 都應該同時會有3個地方有備份版本, 而3個不同的服務要同時出事的機率應該是微乎其微了, 所以, 應該從此可以高枕無憂了!

自動備份不可不知的缺點

以上三種自動備份功能都有著共同的一個缺點, 這個缺點也許對於追求完美的發文者沒有太大的影響, 但對於我這種想到哪寫到哪, 寫完就先發文的人, 影響就是: 以上三種自動備份都只會抓到第一次最新發文的內容, 對於事後追加的內容和修改的部份就不會再重新寄出, 所以以上三種備份到的內容都是第一次發文後的內容, 對於修改和追加部份不會包括在內.

因此, 定期手動備份完整站內內容及主題還是有其必要性的!!

Blogger Support Center

以免費服務來說, Google Blogger 的服務真的算是不錯了, 如果有任何問題, 也可以到他們的Support Center提問. 當然啦, 建議先搜尋一下是否已有問題及解答, 如果無法在現有問題中搜尋相關內容, 也可以按下[Ask now]自行提問.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

如何將Blogger標頭區分為兩個部分？

如果喜歡的主題模版標頭部份不含廣告顯示區, 但卻很想放廣告? 又或者是標頭只有一個區塊, 但想要分隔成二塊放置不同圖片或元件?

把一個區塊區分成二塊並不困難 (如上圖, 分割表頭區, 新增廣告欄位), 所以並不需要為了因為沒有廣告欄位而放棄這個主題哦.

步驟一:

首先, 先到Blogger後台的[主題]→[編輯HTML]→按下 Ctrl+F  →然後在搜查列輸入: <b:section class='header' 

然後找尋緊接在這個 <b:section class='header'  後面出現的第一個 </b:section>, 然後在它下面貼入下面的程式碼:

<!--加入標頭的右邊-->
<b:section id='header-right' showaddelement='yes'></b:section>
<div style='clear: both;'/>
<!--加入標頭的右邊結束-->

步驟二:

然後, 按下 Ctrl+F  →然後在搜查列輸入: ]]></b:skin> →在 ]]></b:skin> 上方貼入下面的程式碼:

/*區分標頭為2部份的寛度設定*/
#header, body#layout 
#header {width:33%;display:inline-block;float:left;}
#header-right, body#layout 
#header-right 
{width:65%;display:inline-block;float:right;padding:10px;}
#header-right .widget {margin:0;}
.Header1 {
width: 100%; display: flex;
}

.header {
float: left;
width:50%;
margin:0;
padding: 0;
overflow:hidden;
}

.header-right {
float: right;
width:50%;
margin:0;
padding: 0;
overflow:hidden;
}

#layout #header, #layout #header-right {
    padding: 0px !important;
    margin: 0px !important;
    width: 50% !important;
    }
/*區分標頭為2部份的寛度設定 - 結束*/

按下[儲存]後, 回到[版面配置]可以看到多了一個標頭區塊了.

步驟三:

回到[版面配置], 可以利用[+新增小工具]在header-right的區塊裡加入Google AdSense的廣告程式碼了.

同樣的做法也可以用在把頁腳部份切割成想要的區塊.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

標題背景格式設定

有時一篇文章落落長, 想要為文章分段設定不同的大小標題好讓一篇篇長長的文章有分段區塊的感覺.

此篇介紹的程式碼可以貼在單篇文章的[<>HTML檢視]裡, 只單為特定的某些文章做設定, 也可以選擇貼在Blogger主題模版裡, 為整個網站的某個特別的標題做固定的背景設定.

在開始前, 先簡單介紹一下Blogger文章編輯列裡提供的4個標題的屬性.

在文章[段落]下, 有大標籤/標題/子標題/小標題4種. 它們的HTML tag分別如下, 當然啦, 你也可以自行定義你想要設定標題背景的標題為h5/h6/h7...

大標籤 - h1

標題 - h2

子標題 - h3

小標題 - h4

所以, 下面的CSS程式碼裡的heading tag就依據你想要加上標題背景的tag來自行修改.

簡單介紹一下

⧭ 背景形狀設定:

border-radius:5px 50px;
如果想要標籤背景呈現成的四個直角, 那麼把上面的 5px 50px; 變成 100px

-moz-border-radius:5px 50px; 
設定同上.

⧭ 背景漸層顏色設定:

background:-moz-linear-gradient(right,#ccc 20%,#000 20%); 
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#000),color-stop(1,#ccc));

如果不想背景是漸層顏色, 那麼把二個顏色都設定同樣的色碼即可. 可以在這裡查HTML顏色代碼.

請注意: 0.20 這裡的數字大小決定了左邊顏色的長度, 舉例數值愈大左邊的顏色愈長.

⧭ 背景框線設定:

border:1px solid #999;
這裡可以設定標題背景框線的粗線/框線格式/框線顏色.

框線格式有以下幾種選擇:

➤ dotted - 點點邊框
➤ dashed - 虛線邊框
➤ solid - 實線邊框
➤ double - 雙線邊框
➤ groove - 3D立體溝槽式邊框
➤ ridge - 3D立體突起式邊框
➤ inset - 3D立體邊框
➤ outset - 3D立體邊框
➤ none - 取消邊框
➤ hidden - 隱藏邊框

講了一堆的設定, 還是要實測才能清楚明白如何設定才是自己想要的格式, 可以到這裡來測試框邊和漸層顏色:

只需把上圖紅線框住的二行刪除, 並貼入本文的CSS程式碼, 便會出現一個 200px 高的圖示, 可以自行在這個網站測試出自己喜歡的顏色和格式後再代入上方的程式碼.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

如何讓手機上的影片自動調整符合手機營幕尺寸?

一個好的主題模版本身的設定就應該是會自動將文章裡的youtube影片為不同尺寸的營幕做調整, 然而有時候偏偏會喜歡上一個不會自動將影片做調整的主題模版, 這時, 真有一種"恨鐵不成鋼"的感覺, 對這個主題無法捨棄, 可偏偏發文的影片在手機上看就會被硬生生的卡斷只剩一半.

今天人手一機的時代下, 真的不能做個網站只有在PC上看時是正常的, 到了手機就斷片了. 所以, 如果真的愛上了一個對手機用戶不友善的主題時, 沒關係, 本篇示範如何讓文章中的youtube 影片在不同尺寸的營幕上都能完整呈現.

好好的影文因為在手機上被截斷, 感覺真的很掉潻, 建議最好的解決辦法, 就是另選一款功能設置上對手機用戶友善的主題模版, 但如果真的不想更換主題, 就是鐘愛這款, 也沒關係, 解決方法超級簡單, 只需在從youtube影上取得的內嵌程式碼:

➤ Copy下程式碼, 回到Blogger 後台
➤ 文章編輯模式選[<>HTML檢視], 在要加入影片處貼入程式碼
➤ 然後在youtube 的程式碼的前面加上:

<div class="video-responsive">
<iframe 這裡是youtube的內嵌程式碼></iframe>
</div>
➤按下[發布]後, 手機上的影片就會正常顯示囉.

還有另一種方法可供參考:

➤ Copy YouTube影片網址
➤ 到這個網站取得嵌入程式碼

➤ Copy下程式碼, 回到Blogger 後台
➤ 文章編輯模式選[<>HTML檢視], 在要加入影片處貼入崁入程式碼
➤ 按下[發布]鍵即可.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

讓Blogger的圖片自動符合手機營幕尺寸

一個好的主題模版本身的設定就應該是會自動將文章裡的圖片為不同尺寸的營幕做調整, 然而有時候偏偏會喜歡上一個不會自動將圖片做調整的主題模版, 這時, 真有一種"恨鐵不成鋼"的感覺, 對這個主題無法捨棄, 可偏偏發文的圖片在手機上看就會被硬生生的卡斷只剩一半.

今天人手一機的時代下, 真的不能做個網站只有在PC上看時是正常的, 到了手機就斷片了. 所以, 如果真的愛上了一個對手機用戶不友善的主題時, 沒關係, 本篇示範如何讓文章中的圖片在不同尺寸的營幕上都會完整呈現.

一些美美的圖文因為在手機上被截斷, 感覺真的很掉潻, 建議最好的解決辦法, 就是另選一款功能設置上對手機用戶友善的主題模版, 但如果真的不想更換主題, 就是鐘愛這款, 也沒關係, 只要利用這篇介紹的[文章範本]功能, 在這裡貼入下面的程式碼, 之後的每篇文章圖片都會自動調整成符合營幕尺寸的大小了.

如果是要挽救已經發布的文章, 也很簡單, 回到該篇文章裡, 選取[<>HTML檢視]的編輯模式, 在文章前插入上面的程式碼即可.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀

善用Blogger提供的"文章範本"

Blogger提供了一個很好用的功能 - "文章範本". 顧名思義, 就是先行設定好每篇新文章的格式, 儲存後以後每次編輯新文章, 固定的格式或元素就會自動出現, 不用再每篇都手動更改或添加了.

舉例說明, 如本站每篇文章下方都想要加入一個粉專和按讚按鍵, 或是有些網站每篇文章下方想要加入橫幅的AddThis萬用分享鍵, 這些都可以在[文章範本]中設定好, 以後每次編輯新文章時, 這些元素都會自動出現.

為您的Blogger設定[文章範本]的方法如下:

先登入到Blogger後台→往下拉, 找到[文章]→點選[文章範本]→然後在空白處貼上未來新文章的格式和添加元素→按下[儲存]鍵即可.

接下來, 便可以試按下[+新文章], 就會看到添加在範本中的元件了. 

請看實例, 這個網站的所有文章下方的萬用分享鍵便是使用[文章範本]後自動添加的. 還有本站下方的粉專和按讚鍵也是利用了文章範本, 無需每篇新文章手動添加.

如果覺得有用, 請幫我按讚, 或是拍拍小手哦.

天馬行空 - 365個平凡無奇日子裡的無限可能

或者 請我喝杯咖啡吧!

繼續閱讀