Blogger後台新增社會書籤按鈕設計

今天看到Google Blogger新增了一個新的功能，就是社會書籤分享按鈕(Social Bookmark Share Button)的設計，讓您不用再使用其他的Hacks程式，在Blogger後台就可以直接加上社會書籤的功能，讓您的文章分享到更多網路工具上。


如何做呢?進入後台→設計→在網誌文章區，按下編輯，


就會跳出文章編輯區的設定，只要勾選"顯示分享按鈕"這一欄位即可完成。



而這部份的位置是可用滑鼠拖曳移動到你想放的位置上，


選擇好位置，按下儲存鍵即可完成，你就會發現你的文章版面上有了分享工具列(如下圖)。



如果你想在前面加上一些中文說明，提醒網友注意且使用，後台→設計→修改Html，勾選展開小裝置範本，找到這段程式碼，
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
然後在前面加上類似，"分享您的網誌："這些文字，
分享您的網誌：<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
就會出現下圖這樣，



但如果你的模板不是採用官方的模板，或是已經更改很多後台html的語法，這個工具列可能安裝後沒法看見，

通常是你的模板少了以下程式碼，這段程式碼是社會書籤出現的程式碼。
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
只要將這段程式碼加到你想加的位置上即可，通常是在
<div class='post-footer-line post-footer-line-2'>
的前面或後面，或是post-footer-line-1或3，自己加上即可，每個模版都不盡相同。

如果還是找不到正確位置，就只能按下"將迷你組件範本回復為預設值"，應該就可以解決，但是你原先裝的Hacks是有可能不見的，所以修改前記得備份。

所以不用透過Hacks程式，你也可以輕鬆有個分享按鈕欄，如下圖，需要的朋友可以裝看看。


P.S.另外如果您想將圖片置換成其他圖片，目前綸太郎還在研究中，和以往置換的方式有些許不同，如果研究成功再跟大家分享。

參考來源：
Blogger Buzz: New Share Buttons

如何隱藏邊欄小工具的標題部份

這兩天使用Blogger的朋友是否有注意到，邊欄小工具跟以往有些不一樣，原本標題區可以不用填寫資料，就可直接儲存，而現在無法這樣做，他會顯示"必填欄位不能空白"，讓我們一定要給它個標題，這個小工具才能有效儲存，造成一些不便。

2010.7.4更新，
目前Blogger後台已經刪除這個機制，不用給標題也可儲存了。



但是有些小工具為了版面上的需要(如下圖)，綸太郎覺得標題根本是多餘的，或是一個Html/java script裡面有很多語法，算是彙整的資訊，也無法下標題。


這時想隱藏這個標題，達到版面的美觀，如何做呢?

我們新增小工具後還是給他下個標題，例如"置頂文章"，


只要在Firefox底下瀏覽網頁，然後檢視→頁面原始碼(IE亦可，檢視原始檔)，找到 置頂文章關鍵字，可以看到這個元件的名稱，如下圖：


發現這個小工具的id為HTML1，然後類別為<h2 class='title'>
所以我們在後台→修改Html裡面，新增一個定義(放在]]></b:skin>之前即可)

#HTML1 h2.title{
display: none;
}

這部份舊有的widget小工具你只要不修改，不重新儲存，沒有標題還是沒問題的，但是如果有再次儲存，他就會出現錯誤，所以照以上的方式就能隱藏這個標題區了，達到你想要的版面配置，另外目前似乎是針對某些小工具，例如html/java script、圖片、文字等的小工具才有這樣的現象，其他還是可以無標題的儲存，所以有需要的朋友可以試看看。

另外網友小雨提供一個更方便的方式，就是在標題區，打入<及任何英數字元即可，例如
<3 按下儲存，標題區也可隱藏。
這個方式綸太郎再另一篇網誌(Blank title widgets)也看過，標題區打入
<h2></h2> 也是可以的，供大家參考。

BloggerAds推出新的橫式廣告，讓您賺更多

今天登入BloggerAds的後台，發現有新的橫式廣告(Banner ads)可以安裝，名稱還蠻霸子的，稱為

橫幅霸刊頭廣告

新版Blogger範本設計工具正式啟用

2010年3月份Blogger測試版推出了更人性化的版面設計工具，而今天2010年6月終於正式啟用了---Blogger新版範本設計工具(Blogger Template Designer)，我覺得對於新加入或是對於更新範本的苦手而言，真的是項好消息，更多彈性運用與背景、顏色的設計都可以自行掌握，版面更新只在一瞬間，應該是非常有趣的後台設計。

今天登入blogger後台的朋友，應該會發現跳出一個新視窗，新功能的服務，


進入後台，也發現原有的版面配置變成了"設計"，而原有的版面配置裡的"字型和顏色"也消失了，還有"挑選新範本"的頁面也移除了。



這次正式版推出，跟以往測試版的內容也有些許的不同，
1、所有的後台的說明文字都以中文顯示。
2、範本版型部分多一項，"輕柔雅緻"，從4種變成5種，而其他類別也有增加template，所以從原先15種配置變成22種，選擇更多。
3、背景圖片選擇更多。
4、進階部份，各單項元素的細部設定更多，例如pager、資訊提供這些細部設定的顏色與文字大小定義等等。

以下是Google針對這次改變所製作的影片，


最後的slogan是"展現你的風格"，我想這就是blogger想幫部落客使用者達到的目標。

如果要使用新的範本設計工具的朋友，記得舊有的模板要備份，因為如果覺得不適用，在修改HTML下方有讓你選擇舊模板的選項，



最下方的經典範本(Classic)，應該是用不到的，大家應該都是使用２００６年以後的版本。

我覺得這次的改版完全運用到WYSIWYG的作法，所見即所得的版面修改，讓你可以即時在畫面下方看到你修改的內容變化，這是很值得稱讚的，別家的部落格似乎都是要存檔後才能再呈現你修改的內容。

不過由於Google Blogger是美國公司，所以關於模版方面，都是以專業性及普遍性為主，美式風格為主，而比較偏向我們喜歡的可愛型或是獨特風格型的畫面設計較少，好像沒有看到什麼甜美風或是日本可愛風之類的，我是覺得比較可惜。

另外關於瀏覽器的適用部分，官網是有說明他們修改了許多bug，可以Cross-browser support，但還是要等網友們試用了，自己才了解，我自己試用先前的測試版，在IE底下是會拖慢網頁載入速度，但是新的正式版好像是快了些，但是這是以試用的部落格測試的，可能也不會很準，而且自己才改回舊版不久，短時間內不想再修改了，或許有朋友修改過可以分享心得看看，是否新版的範本設計真的有修正bug。


參考來源：
Blogger Template Designer Now Available To Everyone
延伸閱讀：
驚為天人的Blogger templates官方模版終於測試推出
試用 Blogger 新版範本設計工具改版心得

如何隱藏分類頁面的說明文字

常在瀏覽部落格時，如果選擇文章分類來讀取文章時，會發現最上方有一列文字，
顯示更多包含「label」標籤的最新文章‧顯示較舊文章
，如果想隱藏這行文字，如下圖這樣，該怎麼做呢?


其實這個小技巧無關痛癢，只是畫面的簡潔而已，感覺是有點多餘的功能，只要進入後台，
版面配置→修改 Html，在CSS區(即]]></b:skin>之前)插入一個新的定義即可。

.status-msg-wrap {
display: none;
}
這樣你就會發現這行說明文字消失，畫面也簡潔許多，跟大家分享。

參考來源：
How to hide "Show all post with label" form

新增數字分頁導覽列，讓瀏覽更方便

2011.3.30更新
此功能已失效，js檔的網頁已被回報是有害網站，謝謝Lonyice的回報。

先前有寫一篇一分鐘讓你的部落格也有數字分頁效果，感覺不是很好用，載入時間較久，最近在網路上看到有人寫出Adding 10 Styles Numbered Page Navigation for Blogger，試用過後覺得速度還可以，但是在文章分類及索引部分還是無法數字分頁，兩者各有其優缺點，跟大家分享。

後台→版面配置→修改 HTML，然後，
找到</body>，在前面加上以下語法，這段是數字分頁出現的部份，
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://files.bloggerwidgets.cz.cc/js/page-navi2.0.js' type='text/javascript'/>
</b:if>
</b:if>

var pageCount=5;
每頁顯示幾篇文章，請配合後台設定→格式，最多顯示，主頁欄的數字。
var displayPageNum=3;
頁數欄位前後顯示的頁數，譬如設3，如果現在在第四頁，
顯示則為123 4 567

以下則是數字分頁的顯示格式，格式可參考該篇文章，例如我利用的是第3種，語法為，
在]]></b:skin>前面加上
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}

.showpageArea a {
color: #fff;
}

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;
}

.showpageNum a:hover {
background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

記得原先.showpageArea a {
color: #fff;
}
我改成.showpageArea a {
color: #999;
}
這是顯示數字頁、previous及next字樣的顏色，因為我的底為白色，所以previous及next也為白色會看不到，所以改成#999的灰色。

其他的樣式，則參考該頁的說明，自行加入即可。

另外Xavier's Note也有寫出另一種可跳頁的數字分頁的效果，有跳頁功能的分頁效果，喜歡的朋友也可以利用。

參考文章：
Adding 10 Styles Numbered Page Navigation for Blogger