2009年12月28日 星期一

藝廊式的部落格模板(Blogger templates)


最近看到一個很不錯的模板(Blogger Templates),結合雜誌型與圖片展覽型的模板型態,方便利用,有興趣的朋友可以試用看看。

網頁:Ferias Blogger Template - BTemplates
展示網頁
下載網頁

這個模版有幾項特色,
1、雜誌型的模板,首頁的文章圖片自動縮小

這是使用JavaScript Hacks製作出來的效果,因為都是針對英文字作設計,所以受限於中文字的字數,有些文章縮寫字數不一定符合要求。
如何設定字數,找到以下的語法,加以修改即可。
summary_noimg = 440; 沒有圖片的摘要字數
summary_img = 360; 有圖片的摘要字數
img_thumb_height = 140; 圖片的高度
img_thumb_width = 140; 圖片的寬度

如果有裝這個Hacks,你先前的繼續閱讀功能會失效,會以這個的設定為主,所以通常字數我都會設很小,例如設
summary_noimg = 100;
summary_img = 80;

2、標頭區可安裝廣告(468*60)

一開始安裝,你會發現版面上多了一個160*600的廣告,這是安裝在標題右側的廣告位置,你可已在後台小工具找到AdSense這個設定,將它改成468*60的格式即可配合整個版面的設計,或是移除,放置其他的小工具,這個區位的定義是#header-right。

3、標頭區下方有圖片展示空間,替換圖片容易


之前綸太郎有在在部落格下方加個雜誌版型的圖文導覽列這篇文章裡提到怎樣設定長條型圖片展示,增加部落格的吸引力,

而這個作者用了更方便的方式,我們只要編輯後台上方標題為"Lorem ipsum dolor"那四個小工具的設定,就可以隨時替換圖片與連結,而不用到html去修改。

後台設定小工具,



完成後的模樣,


4、意見回應區作者頭像的設定,無法正確顯示


由於這個模版製作時應該是沒有考慮到現在Blogger官方已經釋出頭像顯示的功能,所以你如果設定意見區頭像要顯示,格式上會有些錯亂,所以想使用這個模版,目前設定最好是設成不顯示大頭,算是這個模版最大的缺點,我有試著修正過,但是無法成功。

5、相關文章功能(Related Posts)


這個模版很貼心,已經設計好相關文章的列表顯示,會以相同標籤的文章為基準。

以上就是這個模版的介紹,算是多功能性的模板設計,熟悉模板配置的朋友,可以試用看看。

2009年12月18日 星期五

善用版面空間做AdSense廣告配置


網站的編排通常會以有限的空間作最有效的利用為原則,當然適當的留白也是很重要,但如果你的部落格不是以設計為主,而是一般的部落格而且有放Google AdSense時,這時留白的空間就可以利用網站CSS編排設計,來適當運用這些空間了。

通常我們會在本文的下方或是上方放入Google AdSense的廣告,這時你會發現右手邊空了一大塊,這時我們就可以妥善的運用這塊地方,放入你想配置的單元。

通常找到#main-wrapper { 就可以知道你的本文寬度為多少,以本站來說width: 600px;
而一般的AdSense通常我們會放大矩形336*280或中矩形300*250,當然還有小矩形250*250,在AdSense 支援中心裡有說明,我應該使用哪種廣告格式?
我們發現最有效的廣告格式為:336x280 大矩形、300x250 中矩形以及 160x600 寬幅摩天大廣告。

所以以綸太郎的部落格而言,最多可以擠到兩個300*250的廣告,不過並非放滿三個廣告收益就會越大,所以我選擇了放一個大矩形廣告搭配上隨機文章,作為單篇文章下方的廣告單元,不過一直以來都覺得樣式很醜,


今天研究了一下,也跟大家分享怎樣利用CSS編排,來設計一個適合你自己版面的廣告單元,當然不放廣告也可以,你可以放相關文章或是和社會書籤搭配都可以,就看你自己的運用。

先來說明概念,這個廣告單元就如以下面的圖片所示


將一個大單元裡面,劃分成兩個小單元,一個是廣告,一個是隨機文章
整個大單元我們以 .post-extra定義
廣告我們以.post-ads
隨機文章我們以 .post-random
這些定義名稱,你可以自行定義,看得懂即可。
以下是綸太郎定義的相關CSS語法,我的語法配置都是以我自己的模板做範本,如果你要設定,請修改成你自己要用的語法,因為每個人的模板大小、位置都不同。

/* Post-Extra廣告配置及隨機文章單元*/
.post-extra {
width:580px;
height:300px;
background: url(圖片網址) no-repeat 5px;
margin-top: 5px;
}
.post-ads {
float:left;
width:340px;
height:290px;
overflow:hidden;
padding-top: 5px;
}
.post-random {
float:right;
width:230px;
height:270px;
overflow:hidden;
}
.post-random a {
color: #B6EBEB;
}
.post-random ul{
padding:0 5px 0 0;
margin: 30px 0 0 0;
list-style:inside;
}

大單元(.post-extra)的背景圖我以580*300的背景圖為主,


因為我的背景顏色為白色,而且我不想要讓Google AdSense的背景有顏色,然後在隨機文章的背景區位有個藍色的背景圖,到時候我只要調整隨機文章出現的文字區域就能和背景圖相配合。

記得如果你有使用背景圖,相關的高度及寬度一定要標示出來,例如
.post-extra {
width:580px;
height:300px;
如果高度(height:300px;)沒有標示,圖片會顯示部份而已。

廣告(.post-ads) 和隨機文章(.post-random),
這兩者很重要,一定要設定一邊在左 float:left; 一邊在右 float:left;
還有兩者加起來的寬度width:340px;+width:230px;要小於總寬度(.post-extra)width:580px;,記得有padding及margin都要算進去,然後超出的部分我們不顯示overflow:hidden;。

至於語法裡的
.post-random a {
這是設定隨機文章連結的顏色,因為原先是藍色,那搭配背景又是藍色,一定沒法明顯顯示,所以就多加了上面這個定義,將超連結的顏色設定為淺藍色,加強顯示。

另外.post-random ul{
這是項目單元(ul)的設定,因為如果沒有設定的話,在IE7和Firefox的顯示是不同的,在IE7看不到項目符號●
所以多加了這一個定義,每個人的模板不同,不一定你的不用加就可以顯示了,再則因為我設計的圖片已經有"隨機文章"的字樣,所以margin: 30px 0 0 0;要設定與上方相距30px。

當然Css設定完成就是要更改Html的配置了,先前我們都有提到要使某單元出現你要的css效果,就是以div將他圈住套用,當然這裡也是一樣的,我們找廣告單元,通常搜尋"pub-"這四個字即可,就能找到你的AdSense語法出現的地方,不過我想應該大家都會找,因為也是自己放進去的,但如果你是利用後台的網頁元素小工具新增廣告,這篇就不適用了。

原始模板記得備份,進入後台,版面配置→修改Html→勾選"展開小裝置範本" ,找到AdSense 單元
然後用div將相關語法給套住即可,
<b:if cond='data:blog.pageType == &quot;item&quot;'><br/>
<div class='post-extra'>
<div class='post-ads'>
336x280 Google AdSense廣告語法
</div>
<div class='post-random'>
隨機文章語法
</div>
</div>
</b:if>
<div style='clear:both;'/>

你可以看到紅色的div套住了綠色及深藍色的div區塊,這就是我們要達到的效果,前後再用
這個<b:if cond='data:blog.pageType == &quot;item&quot;'> 和</b:if>套住,之前我們已經在幫自己設計個版權所有的小方塊單元說明過,是讓這個單元在首頁不出現,單篇文章才出現的語法,所以記得你的div class是要放在這個語法下面,至於<div style='clear:both;'/>這是要清除格式的語法,這樣你就可以有個像綸太郎一樣的廣告單元配置了。


其實這個效果也是可以用表格(Table)做出來的,但較常利用在邊欄的小工具上,就是設計一個表格裡面放入兩個元件,如果想做的朋友也可以利用"Google文件",自己設計也是可以的,簡單的也是可以利用,但還是建議用css作這樣類似表格配置的處理,一來變更較容易,再來程式碼也較少,網頁載入負擔較輕。

初學者建議還是了解相關的配置再來玩這一部份,有空可以看看"新手推薦閱讀"單元,不然你會有一堆問題等著解決,常有朋友說看了文章還是不了解,因為我想大家都看了自己想看的那一篇,但是前後的相關知識或是資訊還未學習完成,其實大部分我的文章都有提到,Google Blogger官方的說明---Blogger 說明,也很多參考資料,只要你有耐心慢慢看,善用Google搜尋來慢慢學習,我想總會融會貫通的,早晚可以打通你的任督二脈的,擁有一個你自己親手打造的部落格。

2009年12月8日 星期二

適用部落格模板的圖示組合


當我們使用了官方的模板或是其他網路設計者設計的模板時,有時也想換換裝,幫自己的部落格增添活潑的小圖示(Blog Icons)來替代文字說明或是襯托文字,讓主題更明顯時,圖案的設計相對來的重要,如果自己不會設計,以下有幾款是適合使用在部落格上的小圖示,跟大家分享。

2009年12月1日 星期二

張貼意見以其他文字或圖片代替


在Google Blogger的留言模式有整頁模式、彈出式視窗及最新的已內嵌下列文章三種,如果你不是使用內嵌留言的方式,而想以圖片或是其他文字替代官方的"張貼意見"按鈕,可以參考下列的作法。


原先模板記得備份,進入後台,版面配置→修改Html→勾選"展開小裝置範本"
找到這句語法,
<data:postCommentMsg/>
你會發現有兩個地方會出現,要修改的是比較下方的那一個,就是語法裡面沒有width寬度和height高度的內嵌式(comment-form)語法。


要找到比較下方這個才對。


【文字顯示】
把<data:postCommentMsg/>換成你想要顯示的文字,例如"請留下你的意見"

【圖片顯示】

<data:postCommentMsg/>換成
<img src='圖片網址'/>
記得在Blogger的html語法裡,<img src="圖片網址"/>後面一定要有斜線/,不然模板會顯示錯誤,而無法儲存。

用圖片替代的方式,讓讀者可以輕鬆的知道要按哪裡留下他的意見,也是不錯的模板的小改造,如果喜歡我製作的圖片,請在圖片上按右鍵另存新檔,放到你自己的圖片空間裡,或是自己做個小圖也是可以的。


注意到張貼意見下方有個連結,就是訂閱的網址
訂閱:張貼意見(Atom)
綸太郎加上圖片後覺得有點礙眼,想把它消掉,怎麼做呢
一樣在後台]]></b:skin>之前加上這句定義,
.feed-links{
display: none;
}

這樣這個連結就會隱藏了,如果你的模版本來就有這個定義,那就不用新增了,直接加上display: none;的敘述即可。

但是這個連結是提供讀者訂閱的功能,一定要確定你的部落格有其他的連結按鈕可以訂閱,不然如果有些人不太會使用RSS功能,或者不知道從網址那裡按下橘色的RSS圖示就能訂閱,就會少了一個讓讀者訂閱的管道,這是要注意的小細節。

所以模板改造不用急在一時,大原則搞定,然後再慢慢修飾小地方,你也是可以擁有一個與眾不同的部落格的。