Blogger文章編輯區新版模式正式啟用

今天發現Blogger後台有一些小改變，這改變不知是何時開始的，就是文章編輯區增加了許多對於文字及Html設定的改變，其實這在Blogger in Draft時就有出現，不過當時並沒有試用，既然已經正式啟用，就來用用看吧，有些功能還真的不錯用，不過要適應還是要慢慢來。

如何變更為新版的文章編輯畫面呢?

進入後台，設定→基本，最下方有一區顯示"一般設定"，選擇"新版文章編輯器"，然後按下儲存設定，就完成了，記得這個套用是所有你以這個帳號申請的部落格，不是只針對單一的網誌歐。

試用過後覺得有些心得跟大家分享，
先來說說缺點吧，
● 修改Html區，少了圖片載入的功能，這是我寫文章的主要方式，少了這選項對我影響蠻大的。

● 上傳圖片時沒有大中小選項，一律先以320px大小(中型)的格式上傳，之後可再修改。
● 多了許多不必要的程式碼，div....，這個我最討厭。

● 少了影片視訊輸入的部份，可能是因為Google Video終止服務，還有避免侵權的事情吧。

優點，
● 多了向前、向後的復原及回復的功能方向鍵
● 增加文字背景顏色的設定，這對標記重要文字很有用

● 圖片不受5張限制，上載後可再點選要將圖片插在哪裡，一篇文章的圖片暫存區，一個頁面大概是8張，多過8張要按下一步才會到第9張的頁面，還有發佈過後要增加新的圖片，圖片也會在新的暫存區，不會是舊有的那一個，這是要注意的。

● 圖片可以在文章區直接編輯更改，大中小或是置中、靠左、靠右及移除
● 多了文字加上刪除線功能
● 可自由拖曳加大編輯區

● 程式碼錯誤會提醒你，哪裡發生錯誤，這以前也有，但是新版的好像比較強些

無所謂優缺點：
● 跳出視窗的預覽模式

● 字型從8個變成7個，少了Lucida Grande、Webdings，多了Helvetica
● 多了編輯Html設定，這個應該對從其他軟體轉貼到blogger後台的人有幫助，而撰寫設定，則對程式碼的轉換有幫助，不用把<及>用程式碼代替了。

總體而言，我覺得對圖片載入的影響最大，不受限5張而且能在想要的地方插入，因為它的原理是將圖片先放到一個暫存區，跟WordPress的原理很相似，點選插入他才會真正產生在文章裡，還有不用再修改圖片的長與寬了，直接將語法改成s800或是s1600，就能顯示最大的圖，不過我想也會影響文章載入的速度吧。

這篇文章就是使用新的文章邊輯器寫的，多花了很多時間，自己還蠻喜歡文字背景的功能。

後記：這個項目符號在IE6根本無法正常顯示，都擠在一起了，真是沒用的東西呢。

2009.9.26更新
目前已推出新版編輯器已加入"繼續閱讀--(Read More)"的功能，新進入Blogger的朋友，建議可以直接使用，就不用利用Hacks了，詳情請見
英文：Creating 'After the jump' summaries
中文：[Let's JUMP!] 眾所期待，Blogger開放繼續閱讀功能

將首頁、較新及較舊文章文字以圖片代替

這個算是雞肋的功能吧，有些人或許很久以前就已經有用過了，不過綸太郎還是將它分享出來，有時也想調整一下版面，但又不想有太大變更，就微調一下吧，用些小小圖片增添趣味吧。

將回到首頁(blog-pager)、較舊的文章(blog-pager-older-link )及較新的文章(blog-pager-newer-link )以圖片代替，圖片可以自行尋找，選擇你覺得有趣、漂亮或是適合你版面的圖樣都可，綸太郎是利用Iconfinder這個網站來找圖的，


譬如首頁圖案，輸入"Home"，而向左圖案，輸入"Left"，就可以找到你要的圖案，向右的圖，就將向左的圖利用影像編輯軟圖將圖作"水平旋轉"，就能得到向右的圖片了。


如何置換呢?一樣記得先備份原始的模板
進入後台→版面配置→修改HTML→勾選"展開小裝置範本"，然候找到以下的語法，將它置換即可，


較新的文章
<data:newerPageTitle/>
以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>
置換

較舊的文章
<data:olderPageTitle/>
以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>
置換

首頁，有兩個地方都要置換
<data:homeMsg/>
以
<img src='圖片網址' style='border:none; background:#FFFFFF;'/>
置換

以上這樣修改html的語法後，就能將這些文字連結以圖片替代了。

如果發現你的圖片區高度太低，或是還是想用原本的文字連結，而想修改展示文字的顏色大小，可以找到以下Css部分的，
#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center; }
修改或是新增裡面的語法，讓版面更適合你的需求。

另外如果想保留原有的文字，而想再加上圖片，也可以不用如同上方的語法用置換的方式，而是將圖片語法直接加上語法的前或後，這都是可以自行運用的方式。

參考來源：
Replace Home and Posts Links by images in Blogger--Blog Godown

用縮圖顯示相關文章的功能(Thumbnails for Blogger)

最近看到很多部落格都有使用LinkWithin工具來顯示相關文章，不過綸太郎介紹的只適用Google Blogger的部落格，其實比較起來好像也沒什麼差異，只是blogger可以設定超過5篇以上的聯播，還有顏色、文字大小等可以自訂，自由度相較下會稍微高些。

文章參考於:
Related Posts with Thumbnails for Blogger~ Blogger Widgets

先決條件，你的圖片是在後台文章編輯上傳的圖檔，如果你是利用其他的圖庫，例如Flickr、photobucket或是經由url上傳等，這工具是無效的。

---

進入後台→版面配置→修改HTML，勾選展開小裝置範本，
然後找到
</head>
在上方加上以上語法
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

以上是相關文章的CSS外觀區設定，然後再找到
<div class='post-footer-line post-footer-line-1'>
然後將以下語法加在後面即可，
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


大概出現的位置如下圖，


其中
var maxresults=5;
你可以自行修改你要展示的相關文章篇數，我有試過最高可以展示到6篇，通常是你一篇文章有2個標籤分類，可能就能抓到，但有時你設6篇，他展示的只有3篇，我想應該是這個工具的判斷相關性的程度吧。

var relatedpoststitle="Related Posts";
另外英文標題的Related Posts，你也可改成你要的名稱，例如:同類型的文章，或許您也感興趣...等等

還有可以修改的就是圖片的標題名稱顏色及滑鼠划過的背景顏色，例如，這在最上方的
#related-posts h2{
標題部份，這是顯示Related Posts字型的大小、顏色

#related-posts a{
color:red;
也可以將文章標題的文字改成紅色或是其他顏色

#related-posts a:hover {
background-color:#d4eaf2;
背景顏色，本來是#d4eaf2;淺藍的，我改成紫藍色



#related-posts a{
border : 1px solid #666;
}
另外我在每篇縮圖文章加上邊框，border : 1px solid #666; 讓縮圖區有邊框，這都是可以自行修改的地方。


因為這個Hacks多了CSS區，所以你可以修改成你要的樣子，再加上html區你也可以加在你想加的地方，不一定要在文章末，在文章前亦可，只要你懂得整個版面的配置，這個工具也是相當的自由。

如果單篇文章沒有圖片，他就會顯示這張圖


而原先有裝Abin's Tech Note的加入相關文章功能 (Related Post)，這是文字型的列表，先試驗幾天再拿掉，有興趣的朋友可以裝看看。

另外關於顯示欄位的寬度與高度，目前我是沒法修改，這是要告訴大家的。

Note:如果語法上出現錯誤，請至原網站Copy語法，因為有朋友反應無法安裝成功，目前找不出原因，綸太郎自己安裝這篇文章上的語法是沒有問題。

2009.11.13更新，
目前這項功能，已拆除，因為覺淂頁尾放太多東西，很雜，正在尋找更好的配置方法。

文章分類新增標籤雲功能(Label Cloud)

最近Blogger官方釋出最新的功能，就是標籤雲(Lable Cloud)，我想應該很多人都已經知道了，喜歡這個功能的朋友，不用再安裝hacks程式就可以在後台直接設定成標籤雲狀態，還有也可以選擇是否顯示你的標籤(分類)名稱，及文章篇數的設定。

如何設定呢? 很簡單，
進入後台，版面配置→網頁元素→新增小工具，選擇"標籤"，原先只有"清單"，現在多了一項"雲端"，就是標籤雲的選項，你也可以在原先的標籤小工具修改，或是再新增一個亦可。


原先的清單分類


雲端分類


這裡也可以選擇你想顯示的分類名稱，其實我想過將兩個文章分類顯示的項目不同，但目前似乎是無法這樣設定，如果你有兩個文章分類，要顯示的項目都是要一樣的，因為原先想說標籤雲設定顯示較熱門的文章類別，另外原始的就是全部的文章類別，但現階段官方好像是無法達成這種功能。

顯示功能裡面，點選"已選取的標籤 "，勾選你要顯示的分類，就可顯示特定類別了。



不過目前試用後，覺得很醜，還是喜歡目前的兩欄式分類，有需要的朋友可以自行修改，另外關於標籤的文字大小修改，可以參閱
Improved Label Gadgets - Now Supporting Label Clouds and More! 這篇文章的說明。

安裝有問題的朋友，則可以參考
小Ken思路不轉彎: [Blogger partly cloudy] Blogger官方版標籤雲與所需之樣板修改

延伸閱讀：
文章分類太長了嗎?教你將它變成兩行

找個喜歡的Twitter Button細細念吧

偶然間發現這個Twitter Button的網站，網站提供的Twitter的按鈕連結非常豐富，可以挑選一個適合你的部落格樣式，來碎碎唸吧。

網站：
Get Free Twitter Buttons - Great for a Blog, Forum, or Website


在上方空白填入處，輸入你的Twitter ID帳號即可，選擇你喜歡的按鈕格式，再將語法貼到邊欄裡即可，非常的方便。


By TwitterButtons.com

如果你有發現破圖的現象，就是圖片無法顯示的語法，注意一下img src的語法是否有問題，譬如http://wwww/變成4個W，刪除一個即可，或是少了www，或是多了一個images/資料夾的語法，是作者不小心多加上的，像上面這個藍色的twitter的語法即是。

正常圖片的語法是http://www.twitterbuttons.com/images/ex/圖片名稱.png
感覺這個作者還蠻粗心的，不過如果喜歡的話自己改一下即可。

也有動態的圖示

Maverick Money Makers


By TwitterButtons.com

直立式的


By TwitterButtons.com

蠻漂亮的，看起來蠻專業


By: Twitter Buttons

徽章式的


By TwitterButtons.com

可愛的小鳥




By: Twitter Buttons


By TwitterButtons.com


By TwitterButtons.com


By: Twitter Buttons


By TwitterButtons.com

無聊時就換換圖片按鈕，也不錯的。

新增Plurk、Twitter及Facebook推文按鈕

隨著網路工具發展愈來越多元的趨勢，當然部落格也要隨著時代日新月異來個更新，新增了三個部落格推文按鈕，分別是Plurk(噗浪)、Twitter(推特)及Facebook(臉書)。


其實這三個工具我很少在用，不過想想還是研究一下，畢竟最近這三者是大熱門的網路工具，參考了Browny Walking: [tip] 在 Blogger 加入 Plurk 推文按鈕及Not My Business---在Blogger文章中放置噗浪與twitter推文按鈕這兩篇文章，如果你是初學者，建議使用這兩篇文章的方式即可，作者都寫得很詳細，綸太郎自己也設了一列推文工具列，和文章上方的共享書籤其實大同小異，可以說是第一代和第二代吧，也把文章原先前頭的Funp推文鈕整合到這個工具列上，讓版面看起來不致太過雜亂，不過建議比較熟悉html語法的朋友再來使用，記得修改前，一定要備份。

進入後台→版面配置→修改Html，勾選"展開小裝置範本"

先新增兩個定義，就是推文工具列(.bookmarkpush)的CSS外觀定義，還有推文工具列的圖片定義(.bookmarkpush img)這裡你可以依據你的版面自行調整，我的圖片都是60px*60px大小，你可以自行到網路上尋找適合你自己的圖片，或是用文字代替亦可。
.bookmarkpush {
padding-top: 10px;
}
.bookmarkpush img{
padding-right: 10px;
}

第一個定義是工具列與上方有10px的距離，第二個則是工具列內的圖片與右邊距離10px，這些都可自行調整。

以上這部分放在CSS區即可，即]]></b:skin>前就行了。

而以下這段則是放在內容結構區Html裡面了(以我的版面應該是在Labels這行下方，就是 <div class='post-footer-line post-footer-line-2'>......</div>這個區塊下)，所以要比較熟悉版面配置的朋友再使用，不然很可能會加錯地方，因為每個模版的配置都不太一樣，在你的版面適當的位置自行加入，我是放在文章後面，訂閱文字之前，原始的語法如下，裡頭紅色的文字，及綠色圖片位址你可以換成你自己的，

<div class='bookmarkpush'>如果您也喜歡這篇文章&#65292;歡迎推文分享......<br/> <div class='funp_button' style='float:left; margin-right:10px; font-size:0px;'><data:post.url/></div> <a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='http://sites.google.com/site/lunfiles/box/plurkc1.png'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='http://sites.google.com/site/lunfiles/box/twitterc1.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src=' http://sites.google.com/site/lunfiles/box/facebookc1.png'/></a></div>
其中上方紫色的Funp按鈕，你可以選擇不加入，如果要加記得要在</head>前面加入以下這段Java Script的程式碼才能運作，
<script src='http://blogger-ext2.googlecode.com/svn/trunk/3rd/funp_button2.js'/>另外因為綸太郎的推文工具列是在文章展開後(按下繼續閱讀後)才出現分享推文的工具列，所以前後會多加上兩行敘述，
<div align='left'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
推文分享工具列程式碼
</b:if>
</div>
如果沒有加入的話，會在首頁及文章本頁都會出現推文工具列。

另外先前有跟我一樣，在文章末放入訂閱的提醒文字列(歡迎訂閱RSS，最快收到最新的文章。)者，記得上面的
</b:if>
</div>是要加到類似以下這段語法之後
<div class='subscribe2'><a href='http://feeds2.feedburner.com/lun01' title='訂閱0與1謎詭世界'>歡迎訂閱RSS&#65292;最快收到最新的文章&#12290;</a></div>
因為有幾個朋友有使用這個工具列，所以提醒一下。

每個模版都不盡相同，要自己找到對的地方加上去即可，或是加在你原先的共享書籤後頭也行，只是圖片你要自行搜尋較小的圖，然後參考這篇單篇文章加入共享書籤(Social-Bookmarks)，不過這部份就有點複雜了，只要後頭再加上
<a expr:href='&quot;http://www.plurk.com/?qualifier=shares&amp;status=&quot; + data:post.url + &quot; &quot; + &quot;(&quot; + data:post.title + &quot;)&quot;' target='_blank' title='推文至 plurk'><img src='圖片網址'/></a>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + data:post.url' target='_blank' title='推文至twitter'><img src='圖片網址'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='分享至 Facebook'><img src='圖片網址'/></a>即可。

延伸閱讀：
Social Media Web 2.0 Cloud Icons
在文章下方放置訂閱RSS的文字敘述
Blogger template模板教學課程---概說及基本結構

四季春夏秋冬的Rss Feed Icon

最近看到一篇文章介紹許多Rss Icons的圖示，覺得這個四季圖案的設計非常特別，自己也很喜歡，跟大家分享。