2015年6月14日 星期日

記錄，從Pixnet搬家搬到Blogger (Blogspot)

一念之間，我就離開了2004年申請的 Pixnet blog，搬了過來。

此時此刻，並沒有工具邦的搬家程式可供協助，但網路上仍有足夠的資源協助我的「遷徙」，把相關過程記下來，供大胖以及有需要的朋友們參考。



搬家


1. 用Blogtrans搬文章
由於 Pixnet匯出的是MT檔 (.txt)，Blogger吃的是XML檔，我參考底下這篇文章順利搬完

【Life】Pixnet 搬家到 Blogger - 使用 Blogtrans @CHING WEI
http://ching119.blogspot.tw/2011/07/lifepixnet-blogger-blogtrans.html

個人發現

  • 原本狀態為隱藏及草稿的文章，剛搬完會變成公開。
  • 想在Blogger繼續鎖成私密的話，只能選"草稿"。
  • 建議不留的草稿，先刪一刪再用Blogtrans搬。
  • 使用Blogtrans將Pixnet匯出的MT檔轉xml格式時，可以選擇轉哪些文章。原先的分類可順利匯入blogger，但訪客留言無法完全匯入。
  • 剛搬完，就可以看到圖，包括原先上傳到BSP空間 (e.g. Pixnet)的圖；但是，那些圖仍是連回Pixnet ( 網域名 pimg.tw )，要找時間置換新家的圖片網址。
  • 我沒有找到，上述第四步提到的blogger設定「設定 / 格式 / 轉換分行符號，把它改成否」（剛搬過來後，文章的間距的確很大）

 2.圖床使用 Picasa, flickr
Picasa是Google的相簿服務，Blogger寫文章想插入圖片時，可直接連結到Picasa相簿。Picasa那會自行建立「與網誌名稱同名之相簿」，可修改權限為私人相簿（且不影響相簿於網誌文章內的顯示），做為存放Blogger素材之內部相簿。

原先我就有使用 Flickr來放遊記的照片（Flickr提供外連；但圖片都必須是的自己版權所有）。

建議大家可搭配使用Picasa與Flickr這兩個網路相簿服務。
3.搬圖
個人在Pixnet時代連結Flickr相片的文章，在搬家後不受影響（繼續指向Flickr）。特別需要處理的是，原先在Pixnet寫文章時上傳到Pixnet「系統相簿」裡的圖片。

由於Pixnet「系統相簿」不能更改權限為公開，於是無法使用pepe在因應PIXNET MIB—無痛搬家到 Google Blogger /WordPress提到的Wget程式抓相簿。

於是，我試著直接下載Pixnet的「系統相簿」，直接傳到Picasa（直接從Pixnet下載，檔名會亂掉，便成無法參考，但個人決定硬幹。慢慢編輯Blogger文章，注意一下，對一下，找一下，花時間可解決此問題）。


4.編文章
續1-f，剛搬過來，文章間距過大。不過由於個人文章數350篇上下，抱著重溫舊夢看看自己過去寫了什麼的心態，便打算每篇自己巡一下，改一下。

個人發現只要在原先Pixnet建立的「繼續閱讀」以上（的段落），按一下「enter鍵」新增斷行，再按下「<-鍵」刪掉不需要的斷行，便可去除整篇文章各段間過大的間距。

編完「繼續閱讀」以上，儲存若能成功消掉整篇文章各段落間過大的間距，還是建議你/妳耐心地檢視整篇文章，進行圖片尺寸的調整。

 無論是否這篇文章過去是否就使用Flickr，都可以編一下。圖片若超出邊界的話，可試著在「特大」與「原始尺寸」間切換，或者往較小的尺寸選擇（將較小尺寸的圖片置左的話，會形成「文繞圖」的景象，可視需要決定是否選擇「置中」）。
5.於原網誌插入搬家提醒
工具邦網誌大學曾提供過此項服務，目前已無法申請（若您有建議的方式，歡迎您跟我提醒～）

 搬家時可參考的文章
【3C】Pixnet 搬家至 Blogger 心得 (一) - 準備工作@阿咪生活亂記
Blogger 是否搬家到 Wordpress 的比較﹍部落格經營觀念釐清@WFU BLOG


版型


後台的「範本」區塊，選「自訂」可用blogger提供的介面調整版型，若想直接調HTML、CSS的話需選擇「編輯HTML」，底下主要列出個人調整的Code。

調整CSS的過程中，請記得不定時備份範本（「範本」區塊右上角「備份/還原」）。CSS調整時可按「ctrl+f」迅速找到關鍵字

1.行距、間距與預設字型字體

我採用以下格式
.post-body {
  line-height: 1.2em; //行距
  letter-spacing: 1.5px; //字距
  font-family:tahoma, arial, helvetica, sans-serif;font-size:125%;
}
或許您的CSS版型已預先宣告了多個.post-body區塊，故此處除了搜尋".post-body"，也可嘗試搜看看"line-height"或"letter-spacing"，請先找到目前版型關於"line-height"或"letter-spacing"的設定值。
2.引言 (blockquote)

 a.搜尋 ]]></b:skin>
b.將以下這段code，插在 ]]></b:skin>之前
.post blockquote {
  font: 100% normal Tahoma, sans-serif;
  padding: 10px 10px 10px 25px;
  margin: 5px;
  background: #D2DFD9;  
} 
background可指定您喜愛的顏色。網路上可查色碼的網站很多， http://html-color-codes.info/ 是其中一個。


小工具 Widget等


透過後台的「版面配置」增加以下小工具
1. Histats 訪客計數

2. Flag Counter 收集訪客來源的國家/地區旗幟

3. Whos.amung.us 以世界地圖顯示訪客（您也可以使用即時訪客人數的工具）

4. 將Blogger預設的搜尋欄改為自訂搜尋，見WFU BLOG的教學文: [教學]取代 Blogger 搜尋小工具__新版「Google 自訂搜尋」

5. 以FeedBurner，燒個新的RSS
Original Feed的部份，填入Blogger的文章feed
e.g. http://您的名稱.blogspot.com/feeds/posts/default

搬過來Blogger以後
我的RSS改為 http://feeds.feedburner.com/blogspot/umin27

6.樹狀分類的方式顯示tag，推薦阿曼達的【部落格搬家】文章分類。批次標籤。最新回應一文。


8. Google Adsense
新開的blogger無法透過後台的「收益」區塊，加Adsense；但原先就有使用Adsense的朋友，可直接取得 Google Adsense廣告的code，加入新開的blogger。

9. 在每篇文章文末顯示Google Adsense廣告

a.先取得您要放的Adsense Code（以下僅為範例，請自行替換成你/妳的）
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- AD sample -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-05731190369xxxxx"
     data-ad-slot="22531xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

b.將取得的Adsense Code的第一行
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
透過http://www.elliotswan.com/postable/進行< > "三個符號的轉換，如下
 &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
整個Code長成這樣
&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
<!-- AD sample -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-05731190369xxxxx"
     data-ad-slot="22531xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
以下簡稱為AD Sample

c.用以下code將AD Sample夾起
<b:if cond='data:blog.pageType == "item"'>
<div style='text-align: center;'>  
     
</div>
</b:if>


e.g.
<b:if cond='data:blog.pageType == "item"'>
<div style='text-align: center;'>   
   AD Sample
</div>
</b:if>

d.將c.的程式碼片段置於<div class='post-footer'>之後，便可將Google Adsense置於每篇文末。

10. Google Analytics
我們能透過有別於Histats、Flag Counter之外，更具規模的 Google Analytics，以其他層面分析自己的網誌/網站。

當我發現 Google Analytics的右上角跳出『資源「http://umin27.blogspot.com/」沒有收到任何匹配。這表示您的網站沒有獲得任何工作階段，或網站標記不正確。』的提醒後，按下「了解詳情」，找到設定網頁追蹤程式碼的方式
https://support.google.com/analytics/answer/1008080?hl=zh-Hant&utm_id=ad

解法：把相關的 Google Analytics追蹤碼放在 blogger頁面的某個側欄中。


SEO，增加網誌被搜到的可能


1.Google Webmasters（網站管理員）
將網站加入 webmasters (目前稱為Search console, Google 索引)
https://www.google.com/webmasters/

提交Sitemap
先看看RSS & ATOM (以及Sitemap)的知識
Blogger 提供新的網站地圖(sitemap)格式﹍一勞永逸的提交方法

我就對Google Webmasters提交新格式的sitemap.xml以及舊的ATOM，如下:

2.也向Bing提交Sitemap ( http://www.bing.com/toolbox/submit-site-url )
見新 Blogger 部落格網址登錄搜尋引擎，並提交網站地圖（Sitemap）

有msn帳號的朋友更可參考 https://sofree.cc/bing-webmaster/  

 3.直接將網誌登錄至Google
登錄至Google
移除

直接將Blog加到Google網誌搜尋

4.metadata
可參考櫻桃椒的網誌: Blogger對文章的標題title做SEO優化
a. 進入「編輯HTML」，將原有的<title><data:blog.pagetitle/></title>，換成

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

接著在</b:if>下方，加一下description
<meta content='你/妳對自己網誌的描述' name='description'/>

整段code的範例長這樣...（大前提是，需夾在<head>與</head>間）

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<meta content='趕在老去之前，盡量多記一些奧克蘭運動家隊吧！' name='description'/>



走到此步，就是目前呈現在你/妳眼前的 A's大象的森林綠啦 :)


延伸閱讀

WP Blogger比較

違反網頁設計原則的前十大要項
最大寬度與最小寬度網頁設定

讓中國看到blog與圖的方式，含測試中國是否能看到的網頁

萬一Blogger被刪除該怎麼辦？
二階段認證google帳號

提交網站到DMOZ (我還沒申請)

備份範本

分析網站速度
http://fpt.pingdom.com/ 詳細地列出載入各元件的時間
透過dareboost分析
透過Google PageSpeed Insights 分析





張貼者： 於
標籤：

2 則留言:

訂閱： 張貼留言 (Atom)