v 在部落格名稱下方放個水平連結導覽列 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...