2009年3月31日 星期二

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

常常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或是網路服務時,所需要的大頭像,或是相關圖檔,都是可以彈性運用的方法,和大家分享。

2009年3月27日 星期五

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


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

2009年3月24日 星期二

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


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

2009年3月19日 星期四

2009年3月15日 星期日

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


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

2009年3月14日 星期六

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


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

2009年3月11日 星期三

結合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訂閱圖示了,有興趣的朋友也可以自己製作一個,很有意思呢。

2009年3月4日 星期三

加強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
目前發現這個方式最簡單使用。

2009年3月1日 星期日