2010年6月25日 星期五

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

2010年6月23日 星期三

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


這兩天使用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> 也是可以的,供大家參考。

2010年6月20日 星期日

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


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

橫幅霸刊頭廣告

2010年6月11日 星期五

新版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),應該是用不到的,大家應該都是使用2006年以後的版本。

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

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

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


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

2010年6月9日 星期三

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


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


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

.status-msg-wrap {
display: none;
}

這樣你就會發現這行說明文字消失,畫面也簡潔許多,跟大家分享。

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

2010年6月3日 星期四

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


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