2010年2月4日 星期四

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


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

通常網站的功能是介紹某項主題的資訊或是詳細內容服務,與讀者的互動通常都是透過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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghcjnnUZeKNE9D1WMVldydneLI48TslnPwqXou7ZD32obuJr4VqT0YCLK1E4-RAtEr4N0SD_5RqpmLkb-xSS-f8nxU3siKHmhL3lVda6W37R5pK-gRvkt_UmjCu0esY_PVsQ912apcI2E/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再跟大家分享囉。
延伸閱讀:
利用部落格來架設屬於自己的書籤資料庫網站---介紹篇

16 則留言:

  1. 請問有自己布置新增小工具位置的相關教學嗎?
    就是增加可拖曳的位置教學
    因為我不知道專業的叫什麼
    所以我只能大概的說一下
    請問有嗎?

    回覆刪除
  2. blogger說明裡就有了,
    http://www.google.com/support/blogger/bin/answer.py?answer=46995&query=widget&type=
    還有
    http://www.google.com/support/blogger/bin/answer.py?hl=b5&answer=46888
    都可以參考

    回覆刪除
  3. 請問你這個版模是要怎麼控制文章要到那停
    然後接 Read More啊?

    回覆刪除
  4. 我沒有控制,套用而已。

    回覆刪除
  5. 後台,修改Html,上載模板,即可套用。我的模板網址http://btemplates.com/2009/07/17/mobipress/

    回覆刪除
  6. 請問有否blogger文章置項的方法?(除了調整發布時間)

    thanks

    回覆刪除
  7. 用新增小工具→新增Html或是文字單元,將它拖曳到文章區的上方也是可以的,但他就不屬於你所發表的文章就是了。

    回覆刪除
  8. 想問你一下!我也是用這個版模的
    比如你這個文章 “帶來流量的卡車造型社會書籤”
    在主頁就只顯示

    好久沒發文了,送上一篇卡車造型的社會書籤圖案系列,提醒自己該加足馬力,寫寫文章了。希望有更多人twitter我的文章希望有更多人加入我的粉絲團最後希望有更多人訂閱我的文章囉!最近進入怠惰期,沒什麼心思寫文,但是來訪人數不減反增,部落格排名也提高了,真是感恩,希望下一篇文章趕快出現吧。這個圖的作者,大概是希望卡車能為自己的網站帶來流量(traffic),就像是吉祥物一樣吧。下載頁面:Download參考來源:Freebie...

    然後就 Read more了
    那個要在主頁顯示多長的文章內容可以設置嗎?
    怎麼我有的篇文章在主頁就看得到全篇文章內容了

    回覆刪除
  9. 你之前就問過相同的問題了,不再回覆。

    回覆刪除
  10. 我已經在用那個版模了啊。。你上次說套用
    但是有些文章還是顯示很長的文章內容。。
    這要怎麼辦?
    謝謝!

    回覆刪除
  11. 或許你可以看看這篇http://easyadsensevn.blogspot.com/2008/09/how-to-add-blogger-read-more-expandable_05.html文章,或許對你有幫助,如果不適合你的需求,或許選擇適合你需要的模板會比較好。

    回覆刪除
  12. 用http://easyadsensevn.blogspot.com/2008/09/how-to-add-blogger-read-more-expandable_05.html 修改後會多一個read more!

    我想知道你用MobiPress Template有沒有修改過那些readmore...比如 “如何利用 Facebook帳號製作部落格的留言板---API金鑰申請篇(Blogger系統用)”

    在主頁只顯示

    最近看了重灌狂人的文章在部落格嵌入Facebook留言板,借 3.5億個會員讓流量破表!(Facebook Connect),發現了這個Facebook Connect的好東西,利用Facebook...

    顯示的這些文章內容是這個template自己形成的還是你讓他就只顯示怎麼多!

    謝謝!

    回覆刪除
  13. 因為修改很多地方,我也不記得了,大概是那篇文章提到的那樣,我也不懂java script,所以就亂試就變成現在這樣,所以無法為你解答。

    回覆刪除
  14. 你好!你可以把你的 跟 readmore的代碼給我看看嗎?
    那個需要擴展窗口小部件模板
    如果不麻煩的話!
    謝謝!

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能