2010年12月19日 星期日

Blogger in Draft可以直接在文章裡嵌入Youtube 影片


Blogger in Draft推出直接在部落格嵌入Youtube影片的功能,不同以往只能上載影片,這次可以直接在部落格後台搜尋影片且利用第三方的工具來直接嵌入自己部落格,我想喜歡分享影片的朋友,這功能應該是不錯的。

2010年11月24日 星期三

Blogger設計版面推出更多字型選擇


2011.1.22更新
更多字型已經正式啟用。

Blogger的後台字型一向只有7-8種字型,雖然字型都是英文的,對於以中文繁體寫作的我們,不是那麼實用,但還是通知大家後台有這個新增的功能,目前還在測試版,希望未來能有中文字體的增加。

2010年11月3日 星期三

Facebook share counter button推文計數按鈕如何安裝


有網友問到綸太郎部落格上Facebook臉書分享計數按鈕如何安裝?之前由於facebook有這個小工具可直接找到語法安裝,先前有專文介紹,新增Google Buzz 評論按鈕及Facebook Share推文分享計數按鈕,而現在因為FB改版後,這個share分享按鈕已經被改成Like,中文大概就是"讚",在網路上可以找到很多這個工具的安裝方法,所以就不再贅言。

2010年10月6日 星期三

如何利用FACEBOOK的Social plugins製作部落格的動態留言板--Live Stream篇


2011.3.18更新,
因為Facebook改版,此方法已不適用。

上篇分享了如何利用FACEBOOK的Social plugins製作部落格的留言板--fb:comments篇,接下來介紹類似的工具---動態留言板(Live Stream),這是針對擁有facebook帳號的朋友才可使用。

2010年9月30日 星期四

如何利用FACEBOOK的Social plugins製作部落格的留言板--fb:comments篇


2011.3.18更新,
因為Facebook改版,此方法已不適用。

Facebook的官網前一陣子有宣布未來不再支援FBML語法,所以先前利用fbml語法製作的留言板及Social plugins的元件語法有些許的更動,目前及未來是以iFrame及XFBML語法為支援對象,舊的FBML目前還是可以使用,但還是以新語法為主。

2010年8月31日 星期二

Blogger推出計數器及熱門文章小工具


2010.10.1更新,新工具正式版已推出。

Blogger in Draft最近推出兩個小工具,網誌統計資料(Blog’s stats)及熱門文章(Popular Posts ) 兩大功能,而之前的後台統計資料也已經正式釋出,不過目前覺得還有很多改進空間,但至少這也是長久以來使用者想要的功能。

2010年8月25日 星期三

古椎的人型娃娃個性化社會書籤


好久沒發文了,版面換了新的模板,想想還是要進入新的階段,因為不知道何時Blogger會完全停止對舊模板的支援,畫面設計感雖然簡單,有時間再慢慢修改了,今天在網路上看到幾組不錯的Social Bookmark社會書籤的圖案,感覺不錯,跟大家分享。

2010年8月11日 星期三

Blogger終於推出垃圾留言偵測過濾系統


可喜可賀,Blogger終於推出垃圾留言偵測系統(comment spam filtering),這個功能是大家期盼已久的留言審核機制,由於Google的帳號可以開幾乎是無限個部落格的功能,所以導致很多人建立了許多垃圾帳號與垃圾網站,常常留下使用者需清除的垃圾留言,最近就有一個常留言的廣告,在後台審核時需一再拒絕清除的,真的覺得很煩,所以Google Blogger現在釋出這個功能,對綸太郎而言真的是不錯的功能。

2010年7月31日 星期六

可自行置換新版模版背景功能


2010.9.10更新,
背景上傳功能已正式釋出。

Blogger in Draft最近應使用者的要求,在新版範本設計工具推出可以自行上傳部落格背景的功能,讓使用者可以更符合自己的需求,也不用利用綸太郎在上篇介紹的如何置換新版部落格範本的背景圖案,去修改後台html的程式碼,迅速且方便的置換背景。

2010年7月13日 星期二

如何置換新版部落格範本的背景圖案


之前綸太郎有寫過一篇Blogger template模板教學課程---CSS外觀解說,不過目前新的範本推出後,這篇就形同廢文,派不上用場,之前土人有問過關於部落格背景的問題,所以就把如何置換背景的方法跟大家分享。

2010年7月4日 星期日

為你的部落格添上繽紛多彩的時鐘小玩意time blogparts

最近天災頻傳,心情也覺得有點灰灰的,想到我這個好久沒有更新的部落格,來寫寫文章好了,幫自己的部落格添些美麗的色彩吧。

Blogger後台推出部落格統計分析功能


2010.8.30更新,此功能已正式上路了。

Blogger in Draft測試區後台推出了統計分析工具,讓您在部落格後台時就能夠看到你的部落格最即時的統計資訊,而不用透過Google Analytics 或是安裝其他統計工具,就能取得關於部落格的資訊,很不錯的功能。

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

2010年5月17日 星期一

Blogger 測試版推出全畫面的實際預覽功能


Blogger推出了Better Post Preview,讓作者可以在實際的模板上預覽自己文章實際呈現的樣子,很不錯的功能。

原先我們預覽的畫面只有在白色的介面底下,如下圖這樣,


對於一些以文字為主的部落格或許沒有差別,但你如果是圖文式的部落格,而且喜歡圖片置左或置右的朋友可能這個版面預覽對你就很有幫助,另外對於圖表的呈現,還有喜歡在文章上用五顏六色的色彩來點綴,配合模板底色的設計,編寫文章時先預覽呈現的畫面,也是很有幫助的。

預覽的畫面如下,他會另頁開啟,而且在左上角有個"預覽"的字樣顯示,



如果文章需要修正,在原先的編輯區修正後,可以跳到預覽頁重新整理,即可看到修改過的頁面,非常的方便。

當你在寫作的時候,有需要此項功能,記得要登入Blogger in Draft測試版的畫面,才能實作,不過我想未來可能不久就會正式釋出了,大家可以先熟悉看看。

最後記得預覽後還是要記得"發佈文章",可別只顧著欣賞自己所寫的圖文並茂的文章而忘了按下發佈按鈕歐。

參考來源:
Better Post Preview

2010年5月10日 星期一

線上人數whos.amung.us工具的新改變


最近發現大家常在用的線上人數whos.amung.us有了新的變化,可以直接將計數器以浮動的方式顯示在螢幕畫面的左右或是底部,感覺還不錯。


官網: http://whos.amung.us/

語法類似以下這樣
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('你的ID', 'right-middle')</script>

如果你以前已經申請過whos.amung.us,可以複製上面語法,貼在你的部落格上,只要把上面的ID(紅色)變成你的即可,位置(綠色)可以自己調整,不用申請新的ID。

位置視你版面的配置,可改成以下的語法,

左邊頂端 left-upper 底部左邊 bottom-left 右邊頂端 right-upper
左邊中東 left-middle 底部中東 bottom-center 右邊中東 right-middle
左邊底部 left-lower 底部右邊 bottom-right 右邊底部 right-lower


計數器出現位置可以直接點選官網上該圖的位置區,程式碼就會有新的變化,展示圖也會秀出該位置,可以自己調整看看,怎樣的配置最適合你的版面。

不過我發現他的左右邊或是上下端都不是螢幕的最左或是最右,而是距離邊界都有一段小小的距離,而且顏色大小是無法改變的,但如果喜歡這個變化的朋友,可以改用看看。

2010年4月21日 星期三

幫嵌入式留言欄位增點色彩變化


好久沒有發文了,今天來寫寫一些版面變化的小技巧,如果您是利用嵌入式留言欄(comment form)的可以參考看看。

留言以往綸太郎都是採用彈出視窗的方式來留言,這回改變用嵌入式留言欄,感覺版面很單調,就來做點變化,你可以改變底色,或是自行設計美美或配合你版面的風格來變化,或許會讓訪客有興趣來主動留言,或是加強留言單元,提高與網友的互動。

怎麼做呢,我們只要增加一個定義即可。

以下是淺藍色底的留言欄,


版面配置→修改Html,然後在CSS區新增一個定義(放在]]></b:skin>之前即可)

/*嵌入式意見欄的外觀設計*/
.comment-form {
display: block;
max-width: 540px; /*背景寬度*/
padding: 5px;
font-size: 8pt;
margin-bottom: 5px;
border: dotted 1px #85b1de; /*邊框款式及顏色*/
background-color: #EDF2F7; /*背景顏色*/
}

如果要用背景圖,那就把最後一個background-color改成
background: #EDF2F7 url('你的背景圖片') no-repeat ;
即可。


這樣你就可以擁有一個不一樣的留言欄位了。

如果想調整留言欄的高度,可以參考這篇
修改嵌入式留言欄的寬度,將height設成你想要的高度,背景圖片就比較容易配合設計了。

2010年4月5日 星期一

Facebook摘文與 meta content的關係


2010.11.3更新,因為Facebook一直改版,且和Google衝突,目前這個方法失效,頭很痛。

這個問題困擾綸太郎很久了,為什麼每次將自己的文章貼上Facebook後,截取的文章內容永遠是"分享在Google Blogger設立部落格的心得及技巧教學",今天終於獲得解答,可能有朋友已經知道為什麼,但是綸太郎自己比較及實驗過後,發現了答案,覺得很高興,跟大家分享。

2010年3月28日 星期日

試用Blogger 新版範本設計工具改版心得


Google Blogger推出了新的範本設計工具,綸太郎一定要來試看看,雖說有15個模版,百種照片可利用,真的想利用時,仍舊希望有更多的選擇,試用過程來跟大家分享,套版後發現後台Html設計的真的是有夠複雜,原先熟悉的元素定義大都改名稱了,要一項一項去測試,所以目前先以自己套用的模板,跟大家說明。

套用的模板:Awesome Inc.系列的第四種模版,為什麼選擇這個模版,


1、單篇文章背景有圓角的設計,在Picture Window系列也有,但是他是透明底圖,對於資訊類的文章,太過搶眼,不適用,不過這個圓角在IE瀏覽器是沒有效果的。
2、單張圖片有背景修飾功能,這在Watermark系列也有,不過他少了文章背景圓角功能,套用過後感覺圖片較有質感。
3、替換背景圖案相當方便,因為Awesome Inc.系列,它的底色是透明的,在四種系列當中,只有Simple系列底圖非透明,要換底圖還要修改一些東西,有點麻煩,而文章及元件的部份是設定類似白色,換背景圖不用考慮文字的色彩變更。

修改新的範本設計工具,要有一個概念就是$的用法,這代表這個元素是可變動的,會跟著你後台進階設定而有不同,例如color: $(link.visited.color);在進階裡要修改就是連結→已點閱的連結顏色。


如果你已經決定你的配色或是字體,你也可以直接修改,
例如, font: $(body.font);
改成 font: 14px;
這樣一來後台進階的設定就不會套用了,不過修改過後自己要記得,不然使用進階設定時,你會覺得怎麼改來改去還是一樣的大小,囧。

請注意:要修改前請儲存原有的模板,改壞了還可以換回來歐。

綸太郎分四大部分來說明,這是以目前我套用的模板為主,敘述或許有些瑣碎,但儘量以大家能看得懂為主。

【整體寬度】
想修改版本寬度,原本是930px,邊欄是360px,最大在後台可以拉到1000px,



整個部落格個寬度定義,是用以下這兩個語法,包裹住的,位在]]></b:skin>下方
<b:template-skin>
</b:template-skin>

所以你想讓顯示介面更大的話,就必須到後台的Html修改,找到
]]></b:skin>
<b:template-skin>
<b:variable default='930px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='370px'/>

這段就是控制整個版面的寬度的語法,在]]></b:skin>下面,這裡可以看到default='930px'就是最佳或是最原始的設定是930px,如果要修改就是在後面的value='1000px'你可以改成value='1280px'等等。

content.width 整體部落格的寬度
main.column.left.width 左邊欄的寬度
main.column.right.width 右邊欄的寬度

所以文章區的寬度,就是整體寬度扣掉左右邊欄的寬度自動產生的,如果你沒有左邊欄,就像上面的語法原始的寬度為0。

基本上只要修改上面的語法,這個區塊其他語法最好是不要去動他。

【分頁欄設定】
另外就是blogger最近新增的工具,頁面欄,如果想新增頁面欄,如下圖這樣,就到


版面設定→新增小工具→網頁,設定網頁清單
如果對分頁不清楚的,請參考這篇
Blogger Pages分頁功能讓您輕鬆有個導覽列
目前這個分頁欄的背景是用圖片,如果想修改背景圖案,找到後台語法
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="none" value="url(http://www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png)"/>

將圖片網址改成你的亦可,圖檔20*200px的圖片。

但如果你想要的是用色彩代替,像我的部落格這樣,找到
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

直接把上面的綠色定義,換成直接下面以色彩數字的定義即可。
background: #008800;

如果想調整分頁欄裡每個項目的底色,則是以下這個定義,
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

跟上方是一樣的作法。

【頁尾區】
原先整個版面的背景是用 background: $(body.background);這個語法來控制,但在頁尾區卻是一片類似白色的底色,


如果想套用和你部落格一樣的背景,求一致性的話,找到
.footer-fauxborder-left {
border-top: 1px solid $(widget.border.color);
background-color: $(widget.background.color);
將紅色部分改成
background: $(body.background);
就會套用你的背景圖,如果你想用其他顏色代替亦可,就改成background: #0000FF;甚至你自己的圖片網址都可以。

但由於原先的文字顏色是灰黑色,以我選擇這個背景是深藍的,所以改了之後文字會看不清楚,所以需要再調整,因為頁尾區部份是套用全部widget的顏色設計,你可以自己調整顏色,相關的語法如下

在.footer-fauxborder-left { 這個敘述,新增
color:color: #FEFDFA;
的語法,表示文字顏色是淺灰色的

以下三個是要新增的定義
/*頁尾標題欄的顏色*/
.footer-fauxborder-left h2 {
color: #FEFDFA;
}
/*頁尾區超連結的顏色*/
.footer-fauxborder-left a {
color:#BCD8FF;
}
/*頁尾區滑鼠滑過及拜訪過的顏色*/
.footer-fauxborder-left a:visited, a:hover {
color:#FF7E28;
}


但如果你整個頁尾區都不想要,想讓他消失不見,只要在
.footer-outer {這個敘述加上
height: 0;
即可,讓他的高度變成0,就會隱藏起來,這是我目前的作法,給大家參考。

【Blogger Hacks區】
至於blogger Hacks的套用,目前綸太郎使用的有
繼續閱讀
作者和一般留言者不同
回應編號
元件縮短
發現如何利用捲軸讓邊欄(Sidebar)元件縮短裡面,在後台html加上scrolling2的語法會失敗,但是套用在小工具的部分還是可以利用的,所以目前"我在看的網誌"因為無法後台套用這個Hacks,所以只好選擇顯示5篇來減少所佔的位置,其他Hacks都能正常套用。

其實綸太郎試用過後,發現這個利用變數來設定模版的多種變化是很棒的構想,但是從後台一些語法的設計,例如以上提到的頁尾部分,我覺得原先的設計者應該還沒有設計完成,應該還有更完美的空間,但是已經很棒了,只是一下子從陽春的blogger變成彈性很大的blogger,其實真的有點難度去修改後台的東西,所以以上分享的是這次改版的經驗,至於看不懂的部份就先跳過,慢慢學習吧,畢竟三年前自己也是從完全不懂一直摸索到現在,發現有時後硬學是學不起來的,融會貫通後或是熟悉介面後才有那種原來如此的感覺,這是最近自己的發現。

2010.5.15更新,
鑒於瀏覽速度有點緩慢,所以停用新版範本設計工具的版本,回歸以前的版本。

延伸閱讀:
驚為天人的Blogger templates官方模版終於測試推出

2010年3月27日 星期六

【道歉啟事】跟PTT的水妹妹說聲抱歉

上一篇文章"不同網誌有不一樣的作者顯示名稱",我是從PTT那裏看到的,因為對方沒有教學網址,我只有在網誌上註明"作者"
有一位強者 O9229689l7 (水妹妹)回答了這個問題,謝謝他。


因為我寫文章如果來源是別人的網站或部落格介紹的,文章會引用出處,著名來源網址,但是PTT的東西,只能註明從哪看到的,當時看到這篇是很開心,但是疏忽要向原作者請示,才能轉載他的語法,這是我的錯誤,跟水妹妹道歉,對不起,是我的疏忽。

今天上PTT一看,作者我想是很生氣吧,不爽我抄襲他的文章,以後我會謹慎注意的,而且我的本意根本不是抄襲,而是想介紹很棒的東西給大家分享,但錯的是我沒有先照會原作者,這是我的錯,所以藉由部落格來向水妹妹道歉。

如果有人需要這個功能時,請上PTT BBS,部落格版搜尋"[Blogger] 可以給不同的blog不同的顯示名稱嗎"這篇文章就能看到解答了。

再次跟PTT 部落格版的水妹妹說聲抱歉,真的非常對不起。

2010年3月12日 星期五

驚為天人的Blogger templates官方模版終於測試推出


Goolge Blogger的官方模板(Templates)一直以來都是使用者詬病的項目之ㄧ,最近一年來Blogger真的有大幅改進,最新送給大家的禮物就是模板的新增,目前一共有4種模版,15種變化,如果不想找尋網路上其他資源的模板,或許可以先來嘗鮮Blogger的新玩意,試用之後,真的讓綸太郎驚為天人,真的是有考慮到使用者的需求,我想這就是我要的後台,應該也會是眾家部落格的Number ONE吧。

登入測試版

你會發現版面配置區多了一個選項,範本設計工具,按下後就可以嘗試新鮮的玩意了


一共有四個項目可以自己做調整,分別是範本、背景、版面配置及進階選項。

範本總計有四種版本,每種版本有不同的佈景、配置與配色,


版面配置,可以調整主體版面配置,例如兩欄、三欄,甚至更多


這個小工具的配置,我很喜歡,也覺得很實用,以前都要自己修改,現在不用了。


另外頁尾也可以有特殊的配置



可以調整版面的寬度


背景部分,除了可以有官方提供的最佳背景配色,


按下背景圖片後還可以選擇背景圖案,圖片大概有上百張吧,



最後進階部份,則是調整部落格各個項目的字體顏色、大小及字型,


如果你都設定完成,按下右上角的套用至網誌,就可以有個嶄新的版面了。



雖然還在測試版階段,還沒有去研究它的Html,但到目前為止,覺得多元化小工具的配置介面真的很不錯,很多背景圖案可以做變化也很棒,感覺後台介面有點類似Tubmlr,這是之前有介紹過的微網誌服務,或許下次換模版時就來用用官方的模板吧。

參考來源:
The Blogger Template Designer