★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,是網路的基本禮儀。


上次談完如何利用部落格來架設屬於自己的書籤資料庫網站的概念,接下來就要分享怎樣把部落格變成網站的形式,架設屬於自己的書籤網路連結資料庫。

通常網站的功能是介紹某項主題的資訊或是詳細內容服務,與讀者的互動通常都是透過email來連絡,或是留下聯絡電話或是住址,跟部落格有著和讀者互動的及時性與可親性很不同,所以近幾年來部落格才會發展的如此迅速。

而我們用部落格來架設網站,因為不需要有留言迴響或是文章列表等服務,所以在後台可以把這些元件給隱藏起來或是刪除,但綸太郎不建議刪除相關的html架構,因為有可能官方修改模板架構,或是你想改模板時會造成適用的困難度,所以還是建議用隱藏的方式。


以下是以Protonema Blogger Template這個模板來說明,可分三大部分:

【部落格基本設定】
1、 關閉留言機制,不開放留言
後台→設定→意見,設為隱藏,還有反向連結也設為隱藏
2、 關閉RSS,讀者訂閱(這部份可彈性運用)
後台→設定→網站提供→允許網誌資訊提供,設為"無",為什麼說彈性,這是因為以我的部落格而言還有分頁的選項,以後還會更新延伸的分類,所以目前我是保留。
3、 隱藏網誌文章的相關選項
這有兩個做法,第一個從後台設定部份來執行,比較簡單,後台→網頁元素→把網誌文章的部份打開,所有的選項都不選取,這樣就都不會顯示了。



【CSS定義方面】
如何隱藏呢?最常利用到的就是dispay: none; 及 height:0;這兩個敘述。
1、如果上述第3項,隱藏了作者、分類、日期、留言等有關post-footer的部份,也可以在CSS部分找到相關的定義,用display: none;來設定亦可。

h2.date-header{ display:none; /*文章日期*/
.post-author{ display: none; /*作者名稱*/
.post-labels { display:none; /*文章分類*/
.post-comment-link { display:none; /*意見連結*/
.post-timestamp { display:none; /*發表時間*/
甚至.post-footer{ display:none; /*文章頁尾*/都可以整個隱藏起來

2、回到首頁、較新或較新的文章、及訂閱的連結
#blog-pager-newer-link { display:none; /*較新的文章*/
#blog-pager-older-link { display:none; /*較舊的文章*/
#blog-pager { display:none; /*回到首頁*/
.feed-links { display:none; /*訂閱連結*/

【元件只在首頁顯示】
如果你的網頁只有一頁,這部份可以跳過,由於我這個網頁無法放入所有我蒐集的連結,除了日本全國的資料,我還分為東京、關西、九州三大部分,所以勢必會出現單篇文章的延伸頁面,單篇文章的文章區和主頁的不同,主頁只有短短二行字,單篇頁面如果在放上和主頁相同的小工具,勢必會將整個版面往下推擠,整個版面會變得很難看,所以單篇文章的頁面,儘量維持主頁面和兩邊的工具欄維持同一直線的配置。

例如文章區下方我放了七個小工具,而在單篇文章頁面我只有出現兩個小工具,這是怎樣做到的,

以下是主結構圖,


單篇文章下方只有兩個小工具,


如果你想讓元件只出現在首頁,不在單篇文章出現

後台→網頁元素→修改Html,展開小裝置範本,找到該元件的html架構區,我以流行雜誌這一個區塊為例,
找到流行雜誌,這個元件定義是Html17,然後在
<b:widget id='HTML17' locked='false' title='流行雜誌' type='HTML'>
<b:includable id='main'>
下面放入這行程式碼
<b:if cond='data:blog.pageType != &quot;item&quot;'>
再找到下面一點點的
</b:includable>
</b:widget>
在上面放入
</b:if>
這個敘述,那流行雜誌這個元件就不會出現在單篇文章,而只會出現在首頁。
類似以下的圖


這樣大致就可以完成整個書籤部落格網誌的配置,至於用表格製作的書籤,我是利用Google文件製作的,再放到部落格的小工具裏。

另外還有一個小技巧,我的首頁文章,
歡迎來到這個部落格!!,原來的連結應該會是
http://japanplay.blogspot.com/2009/11/article.html
但我還是要讓他連到首頁,這時我們在編輯文章時,文章標題區下方有個連結,我們讓他指向首頁,設成
http://japanplay.blogspot.com/
這樣即可,如果發現你的修改文章區沒有這行,到後台的設定→格式→顯示連結欄位,把它設定為是,就會出現了。


還有不同元件背景及文字顏色不同,我是利用新增小工具,直接寫入語法,而非在像以前在後台編輯,這個做法可以不增加後台檔案的負擔,如果想移除元件時也不必修改Html的語法,這種作法綸太郎以前沒有介紹過,

例如橘色的時刻表查詢,


新增小工具,然後放入以下的語法,直接在小工具裏定義css語法,前後用<style type="text/css">
及</style>圍起來,後面再放入架構的語法。
<style type="text/css">
#orgmenu {
background:url(http://2.bp.blogspot.com/_c2aOyhdt6yA/Swes7HXYWKI/AAAAAAAAHYQ/OKx1IvgvI8E/s1600/orengenmenu.jpg) no-repeat;
width:195px;
height:250px;
padding:5px;
}

#orgmenu ul{
list-style:none;
padding:10px 8px 0 8px;
}
#orgmenu li{
list-style:none;
display:block;
padding:5px 0;
}
#orgmenu li a{
list-style:none;
display:block;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
padding:0 5px 0 10px;
}
#orgmenu li a:hover{
color:#ff0000;
text-decoration:none;
}
#orgmenu li .current{
list-style:none;
display:block;
color:#fff;
font-weight:bold; text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#orgmenu li a.current, #orgmenu li a:hover.current{
color:#fff; text-decoration:none;
}
</style>
<div id="orgmenu">
<ul>
<li>項目內容></li>
<li>項目內容></li>
<li>項目內容></li>
</ul>
</div>


最後介紹有個小工具,很多人有興趣的就是分頁的Widget小工具,


程式碼的來源,一分鐘在Blogger加上Tab View分類欄 凱特打結該該叫,大家可以參考作者的語法,自己再修改內容就可使用了,相當的方便。

以上大致就是以部落格形式來架設網站的教學分享,這是我自己修改模板的經驗,部落格不只是可以天天寫寫文章,也可以利用這種架構來設立網站,或許還有更多不一樣的利用,如果有想到更多的Idea再跟大家分享囉。
延伸閱讀:
利用部落格來架設屬於自己的書籤資料庫網站---介紹篇


由於綸太郎自己有一個日本旅遊的部落格,之前有利用Google Sites架設一個日本旅遊資料庫的Sites,但鑑於很多功能無法利用,目前已停用,也把裡面的資料轉為部落格使用,成立一個日本旅遊資料蒐集為主的部落格。

這種以書籤資料庫連結為主的部落格,當然Blogger模板跟普通部落格Template會不太一樣,要能提供大量連結的頁面使用,可能更新也很少,最主要是當作書籤網站來應用。

日本旅遊資料庫
這是我自己的經驗,常常要搜尋網站時都要從長長的書籤裡去找尋,雖然有分門別類,但是書籤仍是落落長,有人有建議可以利用iGoogle去創造屬於自己的首頁,但我總覺得不適應我自己的需求,所以想到用部落格來製作,一方面如果用網頁格式去做,耗費曠時,而且一個免費又穩定的空間難尋,當然就使用自己熟悉的部落格系統Google Blogger來執行這項任務。

用部落格語系統去製作書籤網站,有幾個重點及優點:
1、當然你要蒐集相當多某領域的書籤連結
2、文章區非重點部份,所以可以選擇文章區寬度較小的模板
3、文章回應功能可以關閉,由於屬功能性部落格所以此功能不是很需要
4、邊欄小工具一定要很豐富,可以用4欄、甚至5、6欄的模板,以下會介紹
5、一定要有導覽列,可以作為大分類的延伸書籤
6、把它當作自己的入門網站來利用,甚至是宣傳行銷的工具

以下就是我的模板的後台配置,你可以看到網頁元素裡面可以新增小工具的單元非常多,可以彈性的運用。


這是我自己成立的書籤部落格,樂遊日和一二三,有興趣的朋友可以去看看,大概就是這種形式,我的首頁只有一篇文章,短短的二行話,
歡迎來到這個部落格!!
第一次來的朋友,歡迎將此站加入我的最愛書籤。


其他的都是利用網頁元素的新增小工具完成的,沒有最新文章、迴響及文章索引的服務。

以下這些模板,是目前我蒐集到適合這種書籤式部落格來使用,大家搜尋時可以用” Magazine”雜誌類的範本做搜尋,通常4-6欄的部落格範本就適合用。

SCHEMER MAG


這位朋友就是利用這個模板製作的部落格,超厲害fREE2Favorites--利用部落格做網頁連結配置,大家可以去參觀,我的起初概念也是從這裡來的。
Live Demo
Download

Protonema Blogger Template


這是個六欄式的部落格,上方是三欄式的,sidebar旁邊還可以有一個寬欄位,而頁尾再分為三區,也有導覽列的設置,這是我目前利用的Blogger範本。
Live Demo
Download

Amoebaneo Blogger Template


格式和上面的Protonema Blogger Template幾乎一樣。配色及圖案不同。
Live Demo
Download

Blue Love


Live Demo
Download

Xclear Blogger Template


Live Demo
Download

White Clean Magazine


Live Demo
Download

Simple Fresh Magazine Blogger Template


Demo
Download

利用以上這些模板來做一個書籤連結的部落格,是因為Google Blogger支援Java Script的語言,所以你要放一些Widget小工具也很方便,更可以放上廣告增添收入,有些人喜歡部落格小工具,也可以都把它放上來。

由於綸太郎是將它當作自己東京封印的資料庫連結網站,例如你喜歡美食、電腦、漫畫、遊戲等,各種專領域的東西,都可以這樣來設立一個自己專屬的書籤部落格,其實要成立這種部落格,我想是要對你熟悉的領域相當熱愛才行,或是你的文章已經有上千篇,但想將他用更簡明的方式讓讀者瀏覽,而自己又不會網頁設計的朋友,可以參考看看,不一定是最好,但綸太郎覺得這是可以擴大部落格應用的一種方式。

下一篇會繼續談到如何在Blogger後台設定,讓你的部落格更符合書籤網站的特性,也會分享一些版面小工具配置的技巧。

延伸閱讀:
利用部落格來架設屬於自己的書籤資料庫網站---製作篇


Google Blogger的好處就是修改的彈性度很大,又不用付錢負擔主機的費用,所以沒有自架網站的朋友也可以不用透過驗證,就可以使用Facebook API的功能,繼上篇如何利用Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用),這篇要講到如何在Blogger的部落格中安裝Facebook的留言板(Comments Box,意見箱),看倌們繼續看下去唄。

綸太郎介紹的有兩種留言板,你可以看自己的部落格屬性,或是留言的狀態,決定你要用哪一種。

首先申請Facebook API金鑰,請參考
【第一步】:如何申請你的FACEBOOK 應用程式API金鑰


【第二步】部落格模板的修改

1、首先需先修改html的內容,要放入兩段程式碼,來宣告你的模板要套用Facebook的特殊程式碼規格

版面配置→修改Html,在模版最上方可以找到以下這段語法
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >
加入一行
xmlns:fb='http://www.facebook.com/2008/fbml'
變成
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
然後再加入以下程式碼,這裡API金鑰就可以應用了,

在</body>前(把滑鼠拉到模版html的最底端就可看見)放下以下程式碼
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW" type="text/javascript"></script><script type="text/javascript">FB.init("你的API金鑰");</script>

【第三步】加入Facebook留言板小工具Widget

目前留言板(Comments Box)及即時動態流視窗(The Live Stream Box),這兩種小工具,都可拿來當留言板,分別使用API金鑰及應用程式ID。

留言板(意見箱、Comments Box)
這個工具是可以開放非Facebook的朋友留言,只要輸入名稱及安全驗證碼,信箱沒填寫也可發言。
版面配置→網頁元素,新增小工具,然後放入以下程式碼即可
<fb:comments></fb:comments>
這是原先的規格,適合放在文章區下方,如果你想放在邊欄,就加上寬度設定即可, width="350",記得寬度不要太小,不然留言之後的安全驗證碼沒法完整出現,我是設350px,超出的部份再利用scrolling捲動軸來控制,你可以看你的邊欄寬度多大再來調整,語法如下 。
<fb:comments width="350"></fb:comments>


另外上一篇有談到,最好是讓他只在首頁出現,如何做呢?
版面配置→修改Html,展開小裝置範本

找到你的Facebook的區塊,利用關鍵字,例如我取名為'Facebook留言板',就找這區塊
<b:widget id='HTML9' locked='false' title='Facebook留言板' type='HTML'>
然後在
<b:includable id='main'>
下面加上這行語法
<b:if cond='data:blog.url == data:blog.homepageUrl'>

然後再下方一點,找到</b:includable>
在這行上方加上</b:if>

類似以下這張圖這樣,這個元件就只會出現在首頁而已,如果你有其他的元件也想這樣,如法泡製即可。


注意:如果你已經申請了粉絲專頁,或是相關的Facebook小工具有用到API金鑰的,都要改成你新申請的才可以用,不然你的部落格上同一個頁面有兩個金鑰,WIDGET小工具是無法正常顯示的。

例如以下粉絲專頁的程式碼,紅色的就是API金鑰的部份,
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/zh_TW"></script><script type="text/javascript">FB.init("aeb637XXXXXXda32c880";);</script><fb:fan profile_id="168040726587" stream="0" connections="10" logobar="1" width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/tokyoplayfans">東京封印</a> on Facebook</div>
你要將新的API金鑰取代紅色這個舊的API金鑰。

即時動態流視窗(The Live Stream Box)
版面配置→網頁元素,新增小工具,然後輸入以下程式碼即可
<fb:live-stream event_app_id="你的應用程式id" xid="YOUR_EVENT_XID" width="300" height="500"></fb:live-stream>
這和Comments Box留言版最大的不同,
1、限定只有Facebook的帳號可留言,不開放其他系統留言。
2、留言會顯示在個人帳號的近況更新上(目前只有版主及朋友的留言會出現,其他人的不會出現在近況更新上,另外版主的部份會顯示在自己帳號的塗鴉牆上),登入後即可在部落格這個元件中看到其他朋友的近況更新。
3、他在Facebook塗鴉牆上的超連結會直接連結到你的部落格首頁(聯外通網址)
4、在不同文章頁面留言,出現的留言內容都一樣,沒有整合的問題。
5、xid,還沒有研究出來是什麼,好像如果有多個動態流的話,可以用來加以區別的東西。


另外它有分所有觀眾朋友兩個頁面,朋友部份要登入Facebook帳號後才能看到其他人最新近況,而所有觀眾頁面則是你在部落格上的這個工具留言就會顯示出來。


在個人Facebook塗鴉牆出現的畫面也不同,


其實綸太郎覺得部落格的留言數目很多的話,利用這個工具是很有幫助的,不佔自己空間(可以利用scrolling來控制),目前Google Blogger也沒有提供Facebook帳號的留言,也可以鼓勵Facebook上的朋友來留言,另外如果你的部落格讀者都是來自Facebook上的好友的話,即時動態流視窗就很適合,只是我很討厭安全驗證這項設施,常常都看不清楚他的文字,用聽的更是霧沙沙了,有人知道怎樣取消嗎?

這兩個留言板各有優劣,有需要的朋友可以自己試著玩看看,但目前的情況下,綸太郎應該不久之後會刪除,或是改版,不然目前的模板真的負擔太大,Firefox瀏覽沒問題,但是IE跑得很慢也有停滯的狀況,正在想辦法修正中,元件真的裝太多了。


最近看了重灌狂人的文章在部落格嵌入Facebook留言板,借3.5億個會員讓流量破表!(Facebook Connect),發現了這個Facebook Connect的好東西,利用Facebook Developers(開發工具)來跟部落格做結合,雖然他介紹的留言迴響(意見箱,Comments Box)無法使用在一般的部落格系統,但綸太郎研究了一下,是可以套用在Google Blogger的,單獨設定為類似Cbox功能之類的留言板。

只是這個功能目前綸太郎研究過後,有幾點無法突破的困難,但還算堪用,還是介紹給大家實驗,看看有沒有人有更厲害的整合方式,這個是限於Google Blogger使用,但如果你的部落格系統可以修改後台Html及使用Java Script語法,也是可以用的,至於自架的應該參考Briian的文章即可。

注意事項:
1、首先你要有一個Facebook的帳號
2、留言版最好設定只在首頁出現,因為其他頁面的留言會分別在各頁面出現,所以你要當作個別文章的迴響功能也是可以的(需用widget放在本文下方,目前還無法整合入單篇文章中),因為少了Rss的功能,所以無法彙整,這個單元會在下一篇文章介紹。
3、如果你的部落格已經申請專有的粉絲專頁,建議是不要使用比較好,因為兩者有重複的地方,綸太郎的解決方式以下會說明。

【第一步】:如何申請你的FACEBOOK 應用程式API金鑰

登入Facebook帳號後,進入Facebook 開發工具的應用程式
http://www.facebook.com/developers/
建立你的開發程式
http://www.facebook.com/developers/#/developers/createapp.php
如果你沒有自己的粉絲專頁的話,可以鍵入你自己的部落格名稱,這時也會順便建立你的粉絲專頁,如果已經有的話,最好是另訂名稱,不然你會發現你的部落格有兩個粉絲專頁(會有點麻煩就是了)


在這裡我給他的名稱是,綸太郎的應用程式,點選"同意",然後按下建立應用程式,其實名稱空白也可以,他也會跳到下一頁就是,我們的目的只是要有一組API的金鑰

這時你會發現畫面跳出了你的應用程式的基本資料檔,
應用程式ID xxxxxxxxxxxx (這是你的應用程式的profile_id)
API金鑰 xxxxxxxxxxxx (很多小工具widget 會用到)
秘密 xxxxxxxxxxxx (決不可透露)


這個應用程式ID就是把滑鼠放在你的頁面上的大頭相片時,你可以看到狀態列顯示的數字,這個在用FBML工具來製作你的Facebook粉絲歡迎頁面---撰寫篇,綸太郎曾經提到。

然後下面有個聯外通,聯外通網址輸入你的部落格網址即可,下面的聯外通標誌可以自行上傳圖片,然後按下儲存即可。


這時你可以按下上方的回到我的應用程式,就可以看到你自己的應用程式的全部資料,如果想刪除這個API可以按下最下方的刪除鍵即可,


如果想修改裡面的內容,則是按下編輯設定,裡面的詳細內容,綸太郎還不是很了解,而按下查看應用程式專頁,則可瀏覽你的頁面。

設定好了,以後要查看你建立的應用程式,一樣連結到
http://www.facebook.com/developers/
就可以發現在右手邊有你設立的應用程式的小方框,按下more,就可以進入修改或是查閱。


以下就是你的應用程式的頁面,和粉絲頁面幾乎是一樣的,當然粉絲滿25人你也可以申請固定網址的,到http://www.facebook.com/username/這裡去申請即可。

以下就是利用Facebook應用程式申請完成的頁面


如果在留言板上留言,則會顯示在你個人Facebook帳號的塗鴉牆上(如果有勾選在我的 Facebook 個人檔案上留言的話),這裡可以看到個人帳號的塗鴉牆上超連結是連到應用程式,而非你的部落格,不過上方有顯示部落格的網址(下圖藍色虛線處),這就是目前我遇到的困難,不過如果在這個應用程式裡加上你自己部落格的宣傳,再導引讀者回到你的網頁上去也是可以的(如上面那張圖),另外如果你在個別頁面都有設置這個應用程式的留言板,這裡也可以視為一個匯集意見的園地。


其實你都不管Facebook應用程式的內容也是可以的,只是想為自己的部落格加上一個留言板功能,這樣就行了,只是綸太郎很龜毛,希望能有兩全其美的方式,有高手知道怎樣將傳自綸太郎的應用程式的連結變成我的部落格的連結,煩請留言告知。

介紹到這裡,對這個留言板還有興趣的朋友,下篇會告訴大家如何將Facebook留言板(Comments Box)放到Google Blogger的部落格上,因為文章真的太長了,要分上下兩篇來介紹,有安裝的朋友也可以互相交流意見討論。

下篇請看,
如何利用Facebook帳號製作部落格的留言板---安裝篇

參考資源:
在部落格嵌入Facebook留言板,借3.5億個會員讓流量破表!(Facebook Connect)
Comments Box - Facebook Developer Wiki


Blogger又推出新功能---Blogger Pages,部落格導覽列(Tabbar)的設置,或是稱為獨立網頁(分頁欄)的設置,讓你可以輕鬆的連上你想特定宣告的文章頁面,例如關於我(About Me)、連絡頁面(Contact Me)、部落格資訊的頁面等等,主要就是和部落格文章性質不同的頁面,用來說明或是加強宣傳等等的工具頁面。

在過去我們可能要透過自己在後台加入語法,或是套用非官方的模板才能達到這個效果,譬如綸太郎之前曾寫過的在部落格名稱下方放個水平連結導覽列,就是自己改造模板,現在Blogger 測試區也推出了這個功能讓我們試用,如果有興趣的朋友,可以玩玩看。

由於是Blogger 測試區(Blogger in Draft)推出的功能,可能還有些不穩定或是會再更新,但是我想不久後應該會正式推出,因為現在新增的部落格已經加入了這塊區間,看以下這張圖就可得知,原先標頭下方是沒有新增小工具列的空間的,現在多了一塊出來。


如何製作呢?
由於是測試區的功能,所以我們須登入測試區的頁面,http://draft.blogger.com,你會看到你的資訊主頁變成以下這樣,多了一塊淺藍色的區塊



這時我們要新增導覽列,要增加兩個地方,
第一、在標頭下方的網頁元素,新增小工具---網頁


這時你會看到只有首頁一個tab,這時我們可以按下儲存然後離開。


第二、來到文章區的功能頁,你可以發現多了一個,編輯網頁的頁面,這就是可以製作你要的獨立頁面。


寫好相關內容後就可以發佈了。

注意:網頁頁面的網址和一般文章網址是不同的

http://blogname.blogspot.com/p/about-me.html

他是以 p 為分頁的區別,和一般我們的2010/01以年月來分不一樣,為什麼我的網址會出現about-me而不是官方的blog-post,可以參考
如何控制文章網址的產生這篇的說明。

Blogger官方目前釋出可以發佈到10個獨立網頁,你可以先發佈幾個,就可以到後台的小工具去調整這些頁面顯示的順序,譬如我目前已製作了三個獨立頁面,在網頁小工具裏就可以看到,如下圖所示,
記得裡面的Automatically add new pages when they are published,要勾選才會自動出現在順序裡,沒有的話,以後再勾選也是可以的。


可以到前台看你的部落格,就會出現導覽功能了。


如果你是非官方的的部落格,進入Blogger in Draft並沒有看到標頭下方的新增小工具列,你可以回到後台的版面配置→修改Html,記得不用展開小裝置範本
然後找到
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

將裡面的no改成yes就會出現了。

如果還是找不到,就在 <div id='content-wrapper'>後面或是 <div id='main-wrapper'>前面,加上上述語法即可,

導覽列除了水平方式展現,也可以拖曳到邊欄,讓它成垂直顯示,要怎麼利用,就看自己版面的需求。

另外這個導覽列在後台的定義是PageList1,如果你想要給他不同的外觀,例如顏色、大小,可以自行在css區(加在]]></b:skin>之前即可)自行定義。
例如:
#PageList1 {
background: #FF7F7C;
font-size: 14px;
}

就會變成以下這樣

以下要談的則是另外的運用,初學者建議跳過,我想有的朋友可能想說要將導覽列連結到其他非獨立頁面的網頁,例如連結到你的Facebook頁面,目前綸太郎研究出來的只能放在這個官方產生的頁面的後面(或前面),沒法加入拖曳的獨立網頁裡,如何做呢?

先備份原始檔案,然後到後台的版面配置→修改Html,展開小裝置範本,然後找到crosscol-wrapper這個區段,下面有個b:loop開始的迴圈程式碼,li就是獨立網頁的項目,需在loop迴圈後面加上你的連結,其實前面也可以,不過應該很少人會在前面加,就在 </b:loop>後面加上以下語法即可。
<li><a href='http://www.facebook.com/01misteryfans'>Facebook</a></li>
要加幾個連結都可以,語法就像這樣
<li><a href='欲連結的網址'>連結名稱</a></li>


加上這個超連結,就沒有官方的10個獨立網頁的限制了。

加入導覽列可以讓你的部落格功能更豐富,更完整,這裡可以加入關於我或是部落格文章的總整理,讓版面的配置更彈性,隨著越來越多的網路功能,或許你也跟綸太郎一樣覺得頁面有些擠,把他整理成獨立頁面也是可以運用的方式,跟大家分享。

P.S.目前的模板並沒有套用這個功能。
參考來源:
Blogger Help:What Are Pages?

Valentine's Day countdown banner

今年的情人節(Valentine's Day)2月14日剛好碰到大年初一春節,真是吉祥又溫馨的日子,看到網路上有幾款戀愛時計自己很喜歡,雖然天氣很冷但我想戀愛中的人永遠都沉浸在溫暖的春光中吧。

● 網站:週刊少年しゃくれ
Blog-parts頁面---ブログパーツ - バレンタイン 


語法:
<script type="text/javascript" src="http://www.watarigraphic.com/blogparts/03/valentine.js"></script>
恋愛成就のおまじない!恋花ネット振り子時計ブログパーツ
想要戀愛成功的部落格時計
恋花ネット
網頁介紹:恋に効く!?振り子時計ブログパーツ - 恋花ネット
語法:
大型:160*234px
<script type="text/javascript" src="http://www.koibananet.com/blogparts/l_clock.js"></script><div><a href="http://www.koibananet.com/" target="_blank" title="東京の婚活は恋花ネット"><img src="http://www.koibananet.com/blogparts/logo_l.gif" border="0" width="160" height="14" alt="恋花ネット" /></a></div>
小型:130*192px
<script type="text/javascript" src="http://www.koibananet.com/blogparts/s_clock.js"></script><div><a href="http://www.koibananet.com/" target="_blank" title="東京の婚活は恋花ネット"><img src="http://www.koibananet.com/blogparts/logo_s.gif" border="0" width="130" height="14" alt="恋花ネット" /></a></div>
● 情人節的禮物
第一種,一直將游標放在禮物盒上,禮物會慢慢出現,點即會出現看板。


第二種,點擊後會出現玫瑰花在你目前的頁面上,滑鼠會失去作用,重新載入頁面即可停止。




以上掛件只支援可以顯示Java Script的部落格。

Valentine's Day Countdown Banners
倒數計時的長型貼紙,468*60px

Valentine's Day countdown banner


Valentine's Day countdown banner


Valentine's Day countdown banner


最後如果想寄給你的朋友情人節的卡片,可以參考這個網站,卡片有配樂及動畫,這是綸太郎常用來寄給朋友或親友的卡片網站,私人推薦。
E-Cards, Animated Greeting Cards and Online Greetings by Jacquie Lawson

情人節卡片預覽,點擊卡片動畫開始。




預祝大家有個愉快溫馨的情人節,情人不僅僅是兩情相悅的對方,也是你週遭你所愛的人、愛的物,珍惜緣份,珍惜所有。


很多時候我們寫文章時可以利用不同的CSS格式,幫自己的文章作點不同變化,常見的就是引用(blockquote)程式碼區的(Code)設計,另外很多人也有使用在文章下方加註重點畫記,今天綸太郎則是要分享自己用筆記本或是大型圖示,標記文章重點的方式,當然粗體及下橫線及顏色標記也是最基本的一種。

這個方式很簡單,你也可以試著自己做看看,利用不同的背景圖來當作重點標記的變化。

應該有些人在上篇文章就有看到這個效果了,原理也和以前談過的一樣,先下一個css定義,然後將要使用的文字用div或是span將他圈起來即可。

div和span的不同在哪裡?
div是針對整個區塊的設定,而span則是針對一段文字的設定,兩者是不同的,大家可以試看看,就知道效果是怎樣。

首先當然要先給的定義名稱,例如.post-note,我們把它放到後台版面配置的修改Html裡,放在 ]]></b:skin>之前適當的位置即可。

.post-note {
width: 500px; /*重點筆記的寬度*/
border-right:1px solid #D1D3FF;
margin-left: 30px; /*文字距離左邊的寬度*/
padding: 5px 0px 5px 30px;
background: url(背景圖網址) repeat-y;
}


這裡的圖案我是用長條圖,如下


所以repeat-y要垂直重複,你的文章有多長,背景就會帶到多長,如果想要用固定的長度,加上height: 300px;長度可自定,及overflow: auto;的敘述即可。
然後在編輯文章時,將要顯示在重點筆記區的文字,使用修改Html模式,然後在內容前後用div或是span圍起來即可,如下顯示
<div class="post-note">
重點筆記內容....
</div>


這樣顯示的樣子,就如下面這樣子,我要推薦去年的精選文章,

2009年推薦文章精選:
喚回童心的日本超可愛卡通桌布
新增Plurk、Twitter及Facebook推文按鈕
一分鐘讓你的部落格也有數字分頁效果
加強blogger作者留言和一般留言的區分
在部落格名稱下方放個水平連結導覽列
兩欄式簡潔的模板Flashyweb ---改版分享
Blogger Templates│2009年最新模板資源
如何利用捲軸讓邊欄(Sidebar)元件縮短
將繼續閱讀(Readmore)更改位置或外觀
設定留言回應編號,讓部落格互動更活潑


另外一種如果你是要使用一大片的圖案當做重點筆記的背景圖,那相對的寬度及長度就要設定出來,還有捲軸也要設定,所以再來一個新的定義

.post-note2 {
display : block;
padding-top: 50px;
padding-left: 70px;
width: 500px; /*重點筆記的寬度*/
height: 351px; /*重點筆記的高度*/
background: url(http://sites.google.com/site/lunfiles/box/flower.jpg) no-repeat;
overflow: auto:
}


這裡不同的是,要用display:block;的敘述,這樣才能夠設定padding與左右上下的距離。

要顯示的文字內容,一樣
<div class="post-note2">
重點筆記內容....
</div>


顯示如下,

0與1謎詭世界的Facebook粉絲專頁

剛踏入Google Blogger部落格的朋友否有很多的不確定,
來到這裡可以提供你最新關於Google Blogger的訊息
加入這個園地讓你對blogger的操作更快進入狀況
提供修改模版(Blogger templates)教學與小技巧
也歡迎大家分享討論關於blogger的一切


其他的文章區的變化,可以參考以下的文章,
[筆記]在文章裡顯示優質的程式碼區
就是要不一樣! 幫文字段落加上獨樹一格的底線 underline
都是類似的作法,大家可以參考看看。



程式碼來源

歡迎加入粉絲團

0與1謎詭世界 on Facebook

Facebook留言板

我在看什麼

追蹤者