懶人法‧利用草稿文章來存模板系統圖片

常常Blogger在改模板時會用到一些自己設計或是下載的圖片，不管是背景圖案或是小圖示ICON，大部分的人或許會利用Flickr或是其他的相簿來儲存這些圖案，綸太郎要介紹的就是懶人法的存圖方式，不用登入其他帳號或是打開Picasa相簿就能完成的小秘訣，只要在部落格後台系統就可完成。

這個方式應該很多人都知道，只是還是有新手使用者不太了解，所以還是說明一下，這是我每次改模版時都會利用到的方式，把模版所需用的圖片存在文章草稿裡，要刪除增加都很方便。

如何做呢?

首先先建立一個新文章，然後在標題處命名為"2009年3月改模板圖庫---勿刪除"，名稱自己訂，看得懂即可，最重要是不能把這個文章刪除，不然你要找出圖片網址，還要進入Picasa圖庫去找，就太麻煩了。

把你需要的模板Templates相關圖片上載入文章裡，然後按下立即儲存，他就會以草稿的形式存在，切記不可發佈文章，儲存完成，然後你可以按下預覽，點選你要的圖片，然後以右鍵內容來查看圖片網址，在Firefox裡是用"屬性"，在IE是用"內容"，就可以看出圖片的網址






在Firefox下，在圖片屬性網址區，點選後，按下全選反白後就可複製網址，記得將裡面的s400改成s1600，如果你的圖大於400px，這樣改才能全圖展現。
圖片網址應該是

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONubCPqAJdRjpqEbVIfeiWMomf0wIzRiYivPixoOgVybzx1XLt5LioS7Gex0O56gMVSL9zLHfgvJexN9EHzJGQkK2AfedymqoPw-ARLr0Fc1iWPvRXB2iA1vsE_o-m4RUbpmGLBH-Ftw/s400/01titlebg.jpg

改成
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONubCPqAJdRjpqEbVIfeiWMomf0wIzRiYivPixoOgVybzx1XLt5LioS7Gex0O56gMVSL9zLHfgvJexN9EHzJGQkK2AfedymqoPw-ARLr0Fc1iWPvRXB2iA1vsE_o-m4RUbpmGLBH-Ftw/s1600/01titlebg.jpg


在IE底下，則是點選內容的網址，和上面一樣，將s400改成s1600，這是綸太郎的習慣，大部分都是把圖片剪裁成我要的大小，而不習慣用縮圖尺寸來控制，所以不管圖片大小我都會一律改s1600，



這樣做得好處就是你只要進入部落格系統後台，就能以文章草稿作為你模板的圖床，不用煩惱要利用什麼有開放外連功能的相簿來使用，這是Google Blogger的好處之一，雖然圖片是存在以你的部落格為名的Picasa未公開的相簿裡，但是只要你知道網址就可以外連，並不受因為是未公開或是草稿的限制而不接受外連，如果你要刪除圖片也很簡單，直接在草稿裡刪除也是可以，但是完全刪除的方式還是要進入Picasa的系統相簿裡把它刪除，才能真正的刪除。

這是綸太郎自己運用的改版小秘訣，如果有什麼臨時需要的圖片，也是可以用這種方式來外連，譬如以你的部落格為名而申請某些web2.0或是網路服務時，所需要的大頭像，或是相關圖檔，都是可以彈性運用的方法，和大家分享。

延伸閱讀：
Blogger圖片大小的控制
Blogger內建圖片語法改變

在導覽工具列上放置搜尋框

上次有提到在部落格名稱下方放個水平連結導覽列，其實很多模板的設計在這裡會在右方加個搜尋框，當你的文章多的時候，這個搜尋框也就能派上用場了。

象徵春天來臨的復活節小兔子彩蛋圖示

網路上發現了這款Easter Bunny Icons的圖庫，真的很有趣，在復活節即將來臨前，和大家分享。

在部落格下方加個雜誌版型的圖文導覽列

如何製作類似雜誌版形的圖文導覽列，將圖片與短文介紹相結合，增加部落格的吸引力。

在部落格名稱下方放個水平連結導覽列

Google Blogger官方的模板通常非常的簡單，簡單到很多人不想加入這塊園地，但是真的有心要擁有一個獨特且有自己風格的版面，還是以Blogger為優先考慮，因為它的可創造性非常強，接下來綸太郎會慢慢介紹這個系列的文章，最主要是現在網路上的模板在Google的大力整頓下出現了許多不合用的情形，雖然設計許多非常漂亮且多功能性的模板，但是要入手修改的東西真的非常多，我自己都改得都非常辛苦，遑論是剛加入的新手，而且很多模版我要的只是某一項功能，並非全部，如果有耐心的話還是可以用官方模板創造屬於自己的模板，不僅獨特且適合自己的需要，也不怕Google Blogger的模板更新，都可以無障礙的套用。

喚回童心的日本超可愛卡通桌布

常常逛日本網站，也喜歡日本網站提供的可愛風網路素材，介紹這個網站是我搜尋日本旅遊資訊時偶然發現的，他設計日本每個縣市都有其代表的卡通人物來當做代言人，介紹當地的旅遊資訊，非常的可愛又富親切感。

結合FeedBurner訂閱人數的Rss訂閱圖示

設計一個專屬自己的RSS圖示，將FeedBurner的訂閱人數與RSS圖示相結合，讓你的版面更漂亮，並將訂閱圖示放在醒目的地方，大型訂閱圖示也是增加RSS訂閱人數的小秘訣歐。

最近我另一個網站---東京封印在改版，研究了許多templates模板，最後是利用官方的模板來改，才不會又發生很多Bug無法解決，看到許多進階級的模板有很多CSS格式上的好東西可供利用，就自己修改一下，未來會慢慢分享，如何在套用官方單調的模板下，創造自己所需的版面。


這是東京封印的訂閱圖示，寬度320px

其實這個圖形製作很簡單，就是利用一個長條圖，將FeedBurner Count訂閱人數的圖案放在這個圖型之中而已，調整它的最佳位置，就能顯示如我部落格上的圖案。

我以0與1謎詭世界訂閱圖示來說明，寬度250px，高度74px，

首先你要設計一款類似以下的圖形，寬度要配合你的Sidebar邊欄的寬度，譬如我的邊欄是270px，我就設計一個250px寬度的圖片，如下，


這個元件製作適用於你有申請FeedBurner的服務(現在已稱為AdSense for Feeds)，利用Feed Count的語法來製作。
首先在你的CSS定義區(就是放在]]></b:skin>之前，因為有些人不懂什麼是css定義區，可參考概說這篇)，
#subscribebox {
width: 250px;
height: 74px;
margin: 5px 0 0 5px;
background: transparent url(圖片網址) no-repeat;
}
#subscribebox a {
display:block;
width: 250px;
height: 74px;
}
#subscribebox img {
margin-left:15px;
margin-top:25px;
}

這上面的#subscribebox與#subscribebox a 就是設定RSS背景圖的寬度與高度，而
#subscribebox img {
margin-left:15px;
margin-top:25px;
}
就是Feed count的圖形定義位置，你可以自行慢慢調整。

然後在網頁元素→新增小工具，新增"Html/JavaScrip" ，放進這個元件即可。

裡面的資料要用你自己的相關Feed，不要照抄歐。
<div id="subscribebox">
<a href="你的訂閱網址" title="訂閱......最新文章"><img width="88" style="border:0" alt="...的RSS" src="http://feeds2.feedburner.com/~fc/XXXXX?bg=99CCFF&fg=666666&anim=0" height="26"/></a></div>
這是一般FeedBurner訂閱人數的語法為
<p><a href="http://feeds2.feedburner.com/lun01"><img src="http://feeds2.feedburner.com/~fc/lun01?bg=99CCFF&fg=666666&anim=0" height="26" width="88" style="border:0" alt="" /></a></p>
我們只是將這個語法用subscribebox的格式來定義，將裡面的<p>及</p>以<div id="subscribebox">和</div>取代包覆起來，即可展示你想呈現的樣子。

這樣就有專屬你自己的Rss訂閱圖示了，有興趣的朋友也可以自己製作一個，很有意思呢。

加強blogger作者留言和一般留言的區分

在Blogger裡如何突顯作者留言回覆(或稱版主回覆)與一般讀者留言的區塊的不同，通常我們是透過CSS的語法，強調文字顏色的不同來區別，以前綸太郎在使用的Blogger Hacks資源網站這一篇文章有提到，是參考高特色他---亮显示作者评论与评论通知的作法(連結已失效)，只是這個做法，我常常將程式碼加錯地方，要修正好多次才能正確展示，最近看到一篇文章，衍生了以下的作法。

展示成果如下圖， 作者部分用藍色區塊顯示，


參考來源：How to Style and Highlight Author Comments

照這個方法，最初顯示的圖片如下，經過我的修正才有上面的格式出現。


因為覺得他的語法，是在Html的結構裡，套用Css外觀語法，這應該不是正常的模板規則，記得綸太郎在Blogger template模板教學課程---概說及基本結構曾提到，模板的構成是由css外觀+html結構與內容，所以我把他提供的Hacks做了一些更改，就是把這兩者分開，當然你要直接套用他的語法自己再做些修正也是可以的。

記得先備份原始模板
進入blogger後台→版面配置→修改HTML，勾選展開小裝置範本，
找到
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
P.S.如果你找不到上面這個區塊來修改，可能是你套用的模板已經修正很多地方了，這在官方的模板是可以套用的，因為我的另一個網站，套用此法是不行的。

然後以下列程式碼置換
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<b:if cond='data:comment.author == data:post.author'>
<p>
<div class='comment-me'>
<data:comment.body/>
</div>
</p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>
</dd>

我修改了紅色的部份，他原先的是採取直接在html內容結構裡加上css外觀語法， 原始語法是
<div style='color:#FFFFFF; background-color:#555555;padding:5px;'>
而我以
<div class='comment-me'>
取代，然後在上面CSS外觀定義處，多了一項 .comment-me這個定義，你可以把它放在comment區塊中，這名稱你可以自己命名，用comment-author亦可，只是我怕會和其他模版原有的定義相衝突，所以取名為comment-me，而這呈現的外觀格式，顏色、字體、行距，甚至可以加上背景與邊框，當然你要加上背景圖片亦可，都可以自己設計的，而且可隨時變更樣式。

以下我是針對我的樣板，設計的.comment-me的語法，你可以自己修改，因為我的留言有編號，所以和右邊的距離一定要遠一些，所以設計margin-right: 35px;
.comment-me {
margin-right: 35px;
margin-bottom: 5px;
color: #666666;
font-size: 8pt;
line-height: 1.5em;
background-color: #E0ECFF;
border: 1px dotted #C0C0C0;
padding:5px;
}

2012.2.26更新
這個.comment-me {　定義，請跟你的相關的comment區域的定義放在一起，有朋友放在css最前面，在IE可正常顯示，其他瀏覽器則無法作用，修正過後即可正常顯示。

這樣一來外觀歸外觀(css)，內容結構歸內容結構（html），感覺就會比較符合我的要求了。

另外Abin's Tech Note也有寫類似的文章---作者和一般回應的標示區別 (Author comment highlighting) ，但是他是連作者名稱這部分都有變更，而我介紹的這個Hacks主要是針對作者回應的內容格式做區隔，這兩個Hacks是不太相同的，如果有需要的也可以參照他的作法。

題外話: 最近如果你的留言系統，是採嵌入式留言的，在IE6底下無法張貼意見的，可以改成彈出視窗或是開新頁的模式，這是我最近發現的Bug，已經好多天了，Google還沒修正，不過Firefox是沒有問題的，至於IE7我沒有測試。

2009.10.18 更新
Blogger Highlight author comments , 作者回應上色 for Blogger
目前發現這個方式最簡單使用。

參考來源：
Blogger FAQs: How to Style and Highlight Author Comments

幾款RSS Icon訂閱圖示最新分享

DelliXmas Icon


最近又發現幾款RSS訂閱圖示設計的相當精緻，跟大家分享，