2015年6月14日 星期日

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

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

此時此刻,並沒有工具邦的搬家程式可供協助,但網路上仍有足夠的資源協助我的「遷徙」,把相關過程記下來,供大胖以及有需要的朋友們參考(Pixnet、天空與樂多的匯出檔都是MT檔)。



搬家


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素材之內部相簿。

原先我就有使用 F
lickr來放遊記的照片(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,推薦阿曼達的【部落格搬家】文章分類。批次標籤。最新回應一文。(2015.7取消此種分類方式)

7.最新回應參考WFU的Blogger 最新回應+留言者頭像+文章標題 (2015.7改用 Disqus)

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.meta tag
可參考櫻桃椒的網誌: 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="Oakland A's and My Hometown, Taiwan (Formosa)" name="description"/>

還有給G+, FB, Twitter的meta tag,見結構化資料 SEO 與 meta 標籤@ oxxo studio


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


延伸閱讀

WP Blogger比較

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

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

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

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

備份範本

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

2 則留言: