2009年3月15日 星期日

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


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

首先要介紹的是連結列(Menu Bar),大部分是稱為Menu功能列或是導覽條,在WordPress是稱為分頁,類似文章最上方的圖形,讓你製作一個超連結,連向你想連結的網站或頁面。

以下範例是套用官方模板的Stretch Denim(中間這個),這是個兩欄式的模板,


套用後展示如下,一個很單純的兩欄式模版,適合1024*768版面,記得模板上有註明"Stretch"的,就是寬型的版面,適合1024*768解析度,我的另一個網站東京封印,就是套用此模板修改的。


首先一樣是備份的你模板,然後版面配置→修改HTML,不用展開小裝置範本,然後加入以下連結列的CSS外觀語法,將這段語法放在header區下方即可。

我將連結列的外觀定義為Meun區,

/* Menu */
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-left: 5px;
padding: 1px 10px;
text-decoration: none;
font-size: 8pt;
color: #fefefe;
}
#menu a:hover {
text-decoration: none;
color: #Fefefe;
background: #789CFF;
height: 24px;
}
#menu .active a {
}


以上就是連結列的外觀定義,其中
#menu {
margin: 0 2%;
height: 26px;
padding-top: 10px;
background: #5F5F5F;
}
裡的margin:0 2%;設定最好和你的#header及content-wrapper 一樣,才不會產生左右不對齊
height:26px;就是連結列的高度,background是連結列的背景顏色
#menu a { 就是連結文字的顏色設定
#menu a:hover { 就是滑鼠停在上面的顏色設定
這些你都可以自行修改成你要的色彩也可以加上背景圖片。

設好了連結列的外觀設定後,當然就是要把這個東西放到你的版面上,通常我們會放在部落格標題(header-wrapper)與主文(content-wrapper)間,所以就要找到這個區塊的html語法,然後將以下的程式碼放入即可,

<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tokyoplay.blogspot.com/2008/04/tokyo-seals.html'>關於</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
<li><a href='網址' target='_blank'>網站名稱</a></li>
</ul>
</div>

找到header-wrapper這個區塊,如下圖,在標頭區<div id='header-wrapper>及內容區<div id='content-wrapper'>中間插入上面的語法即可。

其中Home就是連回你的主頁,我做一個範例,關於然後放上這篇的網址,這些你自己都可以修改,如果要再增加一個連結,一樣是在</ul>之前新增
<li><a href='網址' target='_blank'>網站名稱</a></li>

即可,如果不要在新視窗開啟,記得把target="_blank"刪除即可。

插入語法前


插入語法後


就會出現如下圖的連結列的。



這樣你的模板就會擁有一個連結列,非常的簡單,這個模版的觀念很簡單,就是先製作你要的元件外觀,以CSS定義,然後找到你要放這個元件的相關位置,再將HTML語法放入即可,最主要就是要放對地方,譬如說你想將連結列放在網站最上方,那你就將HTML語法那段<div id='menu'的區塊語法>放到 <div id='header-wrapper'>這個區塊上方,就會出現以下這種型式,如下圖。


所以這都可以自己調整控制的。

如果想製作一個漂亮的水平連結列Menu可以參考CSS Horizontal Menu 網站的設計,他會列出相關的CSS及HTML程式碼,讓你參考,也可以套用在你的模板上。


如果對模板template的整體配置不清楚者,可以參閱
Blogger template模板教學課程---概說及基本結構

69 則留言:

  1. 哈囉~綸太郎~~
    剛好你對於水平導覽列做出詳細的教學,
    順便想請教一下,有些blog(好像都是wordpress)在側邊工具列中,
    也可以做出分頁,點選後在wedget框框直接顯示,用以縮減側邊列的長度,
    不曉得你也解決的方法嗎?

    回覆刪除
  2. 你說的應該是這篇介紹的東西5 tabbed Content Widget for Blogger,我還沒學會,研究成功會再和大家分享。

    回覆刪除
  3. 我在btemplates見到有些模板本身就集成了一樓說的那個功能

    回覆刪除
  4. 我知道,我有試過,可是那些模版在IE下會出現錯誤,我還沒研究出解決方法,所以就沒有介紹。

    回覆刪除
  5. 好棒好棒~~你真厲害
    一起來看看這怎麼弄

    回覆刪除
  6. 綸太郎你好,
    看了你的部落格真是獲益良多.

    回覆刪除
  7. 再次感謝綸太郎的分享...
    文章多了後,的確是需要作整理與分類;
    這是很實用的功能。

    回覆刪除
  8. 您好,我的导航条在opera下显示正常,在IE下却高出些许,不能和下面的那条线对齐,弄了一晚了也没搞清楚,我用的是这个模板,http://templates.arcsin.se/colorvoid-blogger-template/盼回信。谢谢了

    回覆刪除
  9. To Steven,你本來就有做分類列表,現在再做個導覽連結也不錯。
    To 9299,找到#navigation {
    這一區,調整padding與上方的距離看看。

    回覆刪除
  10. 不好意思,又來叨擾!

    關於水平連結的部份,我按照教學都成功放上去了。

    只是我想把水平連接的名稱從左邊移到右邊,不知道該怎麼作?

    此外,本來位於左邊的標題,不知道為什麼會竟然變成中間了?我用的是跟綸太郎實驗室是一樣的版型。望敬請指教。謝謝。

    回覆刪除
  11. 水平連接修改,
    找到 #menu a {
    把float: left;
    margin-left: 5px;
    改成
    float: right;
    margin-right: 5px;

    標題區應該是找到
    #header-wrapper {或
    h1.title {
    看你的margin: 0 2%; 寬度設定
    或是padding的設定吧

    其實如果方便的話,可以附上你的網址,我比較可以看出問題出在哪裡?

    回覆刪除
  12. 嗯嗯,真的可以改到右邊。

    不過剛才嘗試了一下,標題還是處於中間,有點囧掉。除此以外,我做好的圖片要放上標題的背景,結果竟然被縮減成一半....

    不知道對此是有什麼方法可以解決的?謝謝。

    回覆刪除
  13. To影禰,展開小裝置範本,你找的原始碼有沒有這個東西,#headerBlock{text-align:center;
    把它修正為left看看,感覺怪怪

    標題區找到#header-wrapper {
    設高度及寬度
    height: 990px;
    width: 120px;
    這高寬你自己設,我只是示範

    還有/* Header這行
    你把它與主區分開了,應該是要放在
    ----------------------------------------------- */
    #header-wrapper {
    上面,因為你插入/* Menu */放錯地方了,修正一下。

    回覆刪除
  14. 嗯嗯。真的改好了...只不過標題都改到左邊了,我想要再往下面一點點,方便圖片的美觀,不知道還要加上什麼語法?

    但是令我疑惑的是,雖然在FF上可以顯示出圖片,但是在別的瀏覽器卻顯示不出來...@@(我用的是filcker..)

    回覆刪除
  15. 找到h1.title {
    padding-top: 38px;
    把距離變大些,例如
    padding-top: 88px;
    padding-left: 50px;
    還有敘述的部份
    #header .description {
    裡面的距離也要調整

    圖片跑不出來,那你直接在語法裡新增圖
    找到#header-wrapper {
    把background-color: #528bc5;
    改成background-color: #528bc5 url('http://farm4.static.flickr.com/3661/3391208233_950f6aafd8_o.jpg') no-repeat;
    記得原來你標頭的圖要刪掉。

    回覆刪除
  16. 依照你的方法,我已經知道怎麼調整標題之間的距離。不過圖片仍然還是跑不出來,而且就算用Picasa上傳,出來的結果還是一樣都變質了,跟原先的色彩不一樣了。

    原先的程式碼:
    background-color: $headerCornersColor;

    不知道這個有沒有關係?

    如果沒辦法的話,或許維持純文字來得簡潔許多也不錯。呵呵

    在此還是謝謝。

    回覆刪除
  17. background-color:這種語法,只能顯示顏色,無法顯示背景,要用background:

    或許你可以用一篇文章草稿將圖片放在裡面,再將網址放在background: url('圖片網址') no-repeat:
    記得網址裡面的s400要改成s1600

    回覆刪除
  18. 問一個很白痴的問題
    把圖片放在文章草稿後,再把文章草稿的網址放在background: url('圖片網址') no-repeat: 裡面?

    還有網址的s400,一時找不太到耶...能再詳細說明嗎?
    真不好意思,一直這樣勞煩你。感恩。

    回覆刪除
  19. 不是文章網址,隨便命個文章名稱,將圖上載存成文章草稿後,預覽點圖,按右鍵看圖片的網址,類似http://4.bp.blogspot.com/_c2aOyhdt6yA/Sby3N2VCEXI/AAAAAAAAFgE/StL32LyJSKE/s400/menu8.png
    你把其中的s400改成s1600,才能全圖展現。

    這個訣竅是因為我們上傳blogger的圖都會在Picasa裡有個以你的部落格名稱為名的不公開圖片資料夾,只要你文章不刪除,圖片都會存在資料夾裏,這是避免和其它圖庫(如Flickr)系統衝突的方式。

    回覆刪除
  20. 抱歉,補充一下,文章刪除圖片還是會存在,除非進Picasa裡將它刪掉。

    回覆刪除
  21. 請問一下,為什麼我放了以後,原本在上面的圖片就不見了

    回覆刪除
  22. To Jane,這樣很難回答你,你原本上面是什麼圖,我不知道,我看標頭處是有圖的,還有因為你有用旁邊的直的導覽列,建議語法menu名稱改成別的,譬如#menusecond不然兩個會衝突到。

    回覆刪除
  23. 成功顯示了,謝謝。

    我有改成menusecond了,而且剛好像是擺錯地方囧

    另外我找不到
    <div id='header-wrapper'>
    所以直接放在 <body>後面可以顯示出來了
    只是它會顯示在最頂端呢QAQ

    回覆刪除
  24. 你把它放到<div id='content-wrapper'>這個區塊前面就可以了,你的模板的標題區名稱是 header-inner,和我示範的模板名稱不一樣。

    回覆刪除
  25. 我是之前的影禰,現在改名了。XD
    現在回報!
    老實說,我覺得有點對不起你...><"

    因為剛才才發現圖片的副檔名有關連,雖然不知道為什麼在我這裡的標圖一定要用到png檔,jpeg檔就不能用。

    總之繞了一大圈,總算成功顯示出來,別的瀏覽器也正常。
    真的很感謝你的教學,受益良多!謝謝。

    回覆刪除
  26. 我大部分都是用png檔,沒想到會有IE不接受JPG檔的情況發生。

    回覆刪除
  27. 不好意思 我剛開始學如何改沒多久
    但照著 您說得作 為什麼我的 連接會變成 直的 不是 橫的.....就是說
    他會變成
    a
    b
    c
    而不是abc ><"是因為用的版面不同嗎???

    回覆刪除
  28. 因為你沒有留網址,我沒法幫你看,你找找看你放的區段位置是否有限定寬度造成的,width="xxx"這個關鍵字,或是你原來的模板就已經有定義#menu這個id也可能會造成。

    回覆刪除
  29. sorry 忘了留網址
    http://quartersection.blogspot.com/

    我也是要放在 標題下面
    所以我要找得是 定義 那一區域的囉??
    ps.新手苦手中 ><"

    回覆刪除
  30. 嗯,那個程式碼你是不是沒有裝,在你的部落格看不到我上面的這些程式碼,這樣我也沒法幫你除錯,還是你已經不想用了。

    回覆刪除
  31. sorry 因為放那個會讓我的版面 亂掉所以移除 我馬上把她加上去 sorry

    回覆刪除
  32. 其實你可以建一個測試的部落格,好了再把它置換掉即可,或是知道改了什麼地方,一樣加上去,這個#menu {
    margin: 0 %; 沒有這種語法,你把2刪了吧,這樣不行,因為模板不一樣,你就直接套用我的語法,會有問題的,找到 #content-wrapper {
    margin-left: 42px; /* to avoid the border image */
    width: 763px;
    }
    這段,這是你的主頁的寬度,所以改成#menu {
    margin-left: 42px;
    width: 763px;
    改成這樣,下面的語法應該一樣即可,其實不一樣的模板,不能這樣硬套用,如果真的想自己改,要先了解相關的css配置較好。

    回覆刪除
  33. ㄟ 不好意思 發現問題所在了
    用IE看 是ok的
    但是 用firefox會變得慘不能賭 怎會這樣呢????

    回覆刪除
  34. 你的#menu裡的高度height: 26px;不見了,應該是被擠下來的。

    回覆刪除
  35. 對啊 我加進去了 可是 大大 怎會這樣
    我用IE看板面 很正常
    可是我用Firefox
    我原本的背景顏色 會全部 不見 然後 整個 畫面會往右移

    不知道怎會這樣???

    回覆刪除
  36. 你的li定義是有背景圖的,li {
    background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat left 6px; 所以會影響排版,這個要拿掉,可是會影響整個項目圖案都沒有小藍點,建議妳還是用我介紹的模板改較好,或是尋找適合你的模板,如果真的要自己改,整個li ul的定義都要另外再定,會比較麻煩,我示範的這個模版原先都沒有li及ul的定義,所以跟你的模板會有衝突。

    回覆刪除
  37. 是喔 那為什麼用IE開 會ok 用 FF就不ok呢??
    難倒是因為FF比較嚴謹??

    改版面 是沒什麼問題呢 因為 本來就想改 哈哈 所以 用您用的那個比較好 因為 它限定比教少 是這意思嗎?

    回覆刪除
  38. 沒有說哪個比較好,最主要是設計者當初有沒有預設給大部分的瀏覽器適用,IE和FF甚至IE6.IE7.IE8很多情況都不同,所以用語法較簡單的來改會比較好一些,我自己是這樣覺得,其實用這個模版也沒有說比較好,只是看到很多人用,就用這個做範例,其實新手的話,還是可以找找網路上適合你的模板,就可以減少自己修改的精神與體力了,你只是要有功能列的模板,真的大部分非官方的模板都有這功能。

    回覆刪除
  39. 嗯嗯 是喔 沒關係啦 反正 就改囉 也挺有趣的 總是多學習一點 不是壞事

    感謝 您的教學 還是自己改 比較有趣 ^^

    回覆刪除
  40. To朱哈,那很好,想要自己改的心,我也曾有過,加油。

    回覆刪除
  41. ^^ 改了和您範本一樣的版面 結果 噗噗 不習慣 變得好寬喔....
    看來接下來是要修改大小:p
    其實我要改得地方也沒很多啦
    所以才想說自己來弄^^
    再次的感謝您的教導

    回覆刪除
  42. 嗨你好啊..我來過你這有3`45天了...我一直在看你的文章,改我的部落網頁..過來謝謝你這麼用心寫這個~
    see you soon..thanks

    回覆刪除
  43. 謝謝妳,blogger修改需要點耐心。

    回覆刪除
  44. 不好意思
    我想請問一下那個新增的字
    可以調整大小嗎??

    我的語法是這樣
    不知道怎麼改...


    不好意思又來打擾了...
    這是我的部落格
    http://cutemike520.blogspot.com/

    回覆刪除
  45. 可以啊,上方#menu a {
    裡面的font-size: 8pt;
    你可以設成你要的大小。

    回覆刪除
  46. 解決了
    這麼簡單的問題還打擾你
    不好意思

    再次感謝...

    回覆刪除
  47. 不客氣,多看些有關Css的文章會有幫助的。

    回覆刪除
  48. 想請教一下
    我用了大大提供的語法做了兩個menu的橫欄
    一個叫menu1 另一個就是2

    我的menu位置也是放在header與content之間
    這些都沒問題

    不過我現在想做點改變
    1. 讓menu的欄位能置中,不然列表都從左邊開始,右邊會很空曠,想要置中
    2. 如何調整每個列表的寬度與間距?
    3. 能在每個連結加上小圖示嘛?

    問題有點多~~~希望能簡單說明或提示~

    回覆刪除
  49. 1.你將#menu a {
    display: block;
    float: left;
    裡面的display: block;去掉,然後修改
    float: center; 即可。

    3.要有小圖,再加上
    #menu li {
    background: url("圖片網址") no-repeat;
    視圖片大小,再增加調整padding的數字。

    2,如果要固定寬度,這我不會,調整間距通常使用padding或是margin語法。

    回覆刪除
  50. 感謝您的教學,非常實用!
    想請問如果我導覽列裡頭的導覽,是想要放tag或是歷史文章列表之類的,意即要放上的是網頁元素裡的小工具,而非只是一個網址連結,請問這個導覽列有辦法做到嗎?
    謝謝!!

    回覆刪除
  51. 那建議你找一個類似的模板,例如
    http://btemplates.com/2009/10/22/lenomag/demo/這種的,或是http://btemplates.com/2009/11/23/dark-orange/
    導覽列的位置是有可能做到,只是很費功夫就是了。

    回覆刪除
  52. 想請教您
    這個導覽列的連結
    彼此的中間如何加入間隔呢?
    像是奇摩首頁的最下方連結那樣
    只是他是虛線
    那個間隔叫什麼呢?

    感激不盡

    回覆刪除
  53. 你可以在#menu {不加入背景顏色,然後在#menu a {加入背景顏色,就會有間隔的效果,或是加入不同於#menu的顏色也可以,yahoo的直虛線是用圖形製作的,
    語法把#menu a {的背景圖用
    background: url(虛線圖形位址) repeat-y right;}
    類似這樣。

    回覆刪除
  54. 原來是圖片
    難怪找老半天沒看到什麼語法在中間
    謝謝

    回覆刪除
  55. 想再請教您
    這個網站http://www.sohtanaka.com/
    的下方footer部分
    我也想做個剪影的圖案
    但是不知道要如何用文繞圖 文字在前圖再後的語法

    或是應該用別的方式製作呢?
    感謝

    回覆刪除
  56. 這是我的blog http://lifeformeet.blogspot.com/

    回覆刪除
  57. 圖片就用background定義即可,那出現的文字一定是在上面的,定義好文字要出現的區塊位置即可,跟你說的網站剪影及文繞圖好像沒有關係,不太清楚你要問的是什麼。

    回覆刪除
  58. 抱歉又有個問題想請教你..@_@"
    想請你到我blog看一下
    最下方的導覽列與瀏覽器底端仍有一段距離
    請問要如何拉近呢?要去哪邊修改?
    想把導覽列放在最下方但是不要讓footer與文章下方的空白過大

    感謝..

    回覆刪除
  59. 你將.sidebar .widget, .main .widget {裡面的
    margin:0;
    padding:0;
    都改成0,就可以縮短一些距離。

    回覆刪除
  60. 你好,我使用後發現這個水平導覽列跟頁面不符合,就是導覽列會跑出來,有什麼方法能使導覽列的寬度跟頁面一樣,不會跑出來?

    回覆刪除
  61. 文章裡有提到#menu {
    裡的margin:0 2%;設定最好和你的#header及content-wrapper 一樣,才不會產生左右不對齊,如果你不用margin來產生寬度,也是可以用width來定義,但是記得menu和頁面寬度要一致的。

    回覆刪除
  62. 你好,我最近在試新的模板,http://miolatest.blogspot.com/
    我想把最上面那紫色水平連結列刪掉,請問怎麼刪,可以幫我看一下嗎?萬分感激!!

    回覆刪除
  63. 我.我.我誤打誤撞好像自己搞定了,多謝版主的啟發,感激!!

    回覆刪除
  64. 不客氣,多試試就會成功。

    回覆刪除
  65. 版主您好
    我套用那個導覽列的語法在我的部落格
    http://yapoching.blogspot.com/
    我有修改部分語法符合我的標題列寬度
    但是把視窗縮小會跑到左或右邊
    無法固定在版面中央
    不知道是修改哪些地方?
    謝謝

    回覆刪除
  66. #menu {
    width: 922.5px;
    margin: 0 22.3%;
    裡面的22.3%可能太大了,你可以改成
    margin: 0 auto;
    看看,是否可行。

    回覆刪除

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