2007/07/20

在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)




當部落格成立一段時間後, 文章數量及分類標籤變多, 加入部落格的小工具也增加, 此時對讀者而言, 想找些資訊或文章, 可能會不知從何下手.

可以考慮在標題列下方, 文章上面加入一列的功能選單. 選單就可以設定其他網頁連結,把一些原本放在側邊欄(sidebar)的資訊, 移進來.



這個方法, 對沒有特殊版型的部落客來說, 只要兩個步驟.



不過, 首先要先確定你的樣板是否可以在標題列下加一個網頁元素? 如下圖.




如果不能的話, 請參考這篇文章.新增Blogger Header及Post的網頁元素,可加入圖片或Adsense

記得先備份樣板.

1. 範本--> 修改HTML

#header-wrapper {..} 之後, 加入以下程式碼

#navmenubar{
height:25px;
line-height:23px;
margin:0 1px;
background:#1B90DD;
color:#ffffff;
}

#navmenubar li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
white-space:nowrap;
}

#navmenubar li a{
display:block;
padding:0 10px;
font-size:12px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenubar a {width:1%;}

#navmenubar .selected,#navmenubar a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}


如果想改背景色或字體色, 就自己調 background 及color 吧!

2. 然後到 範本 --> 網頁元素

在標題列下, 加入一個新的網頁元素. 加入要連結出去的程式碼.如下圖, 紅字部分是網址, 藍字部分是顯示出來的文字.



或是直接copy下述程式碼, 再自行修改吧!
<div id="navmenubar">
<li><a href="網址">文字</a></li>
</div>


效果像這樣..

相關文章 :

201 comments:

«最舊   ‹較舊   1 – 200 (共 201 個)   較新›   最新»
Roy 提到...

我試了一下,發現我沒辦法做出水平的效果,
只能是垂直的Menu,
是因為版型的原因嗎?

Roy 提到...

哈哈....
查了半天....
是我自己把Code放錯位置....
現在要來調顏色了!
謝謝你的秘訣喔!

Skyvee 提到...

roy, 很高興你成功了! XD

Husky 提到...

hello,我可以問一下flash slideshow作banner問題嗎????

我在這網站http://www.slide.com/main, 給我的相片作一個slide show. 我也是在blogger的標題例下加html/java script,貼上我slide的code. 但問題是preview一切ok, save後sidebar就會擠到body來...

我要到哪改html呢??? 3q3q

Skyvee 提到...

Husky你好, 有幾個可能性.
1. 你先找一下 #header-wrapper是否有設定 height? 如果原先就有設定height, 那麼新增一個網頁元素, 一旦超過這個高度, 就可能擠到body了.

2. #header-wrapper 是否有設width? 同樣也是超出範圍的問題, 你可以先比較slide上的width, height 是否超出header wrapper的範圍? 再去調整一下. :)

星子 提到...

hello,
我在另一篇文章裡照你的方式改之後
可以在標題列下加一個網頁元素
但是仍然沒有#header-wrapper
這個關鍵字出現
請問你的程式碼應該放在哪個section後面呢?

Skyvee 提到...

星子, 試看看放在這段
body #layout #header {
XXX} 之後. :)

星子 提到...

改好嚕!(放炮慶賀)
這個功能我好早就想要了!
謝謝你啊~~~
感恩

Skyvee 提到...

星子, 恭喜囉! XD

楊大鵬 提到...

我已經成功加好了功能列,但我想像你的一樣,功能列可以蓋在標題列的照片上,要如何做呢?
版主你的排版真是賞心悅目~

Skyvee 提到...

謝謝楊兄的讚美. 其實我使用的方式是用絕對位置, 這會依不同版型, 而會有不同的設定, 所以我才沒有在文章中提到. 如果您有興趣,可以參考我的程式碼, 再調整寬度,及顏色. :)
#navmenu{
width:390px;
top: 473px;
position: absolute;
text-align: center;
font: bold 11px/11px Verdana, Lucida Grande, Helvetica;
line-height:23px;
margin-left: 75px;
color:#ffffff;
}

#navmenu li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
background:#27408b;
white-space:nowrap;
}

#navmenu li a{
display:block;
padding:0 10px;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navmenu a {width:1%;} #navmenu .selected,#navmenu a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

* +html #navmenu a {width:1%;} #navmenu .selected,#navmenu a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}

楊大鵬 提到...

Skyvee 你好,我發現若是將你整段碼貼上,標題列會變成垂直,而非並排。
像這樣:

●blogger小玩意
●blogger技巧

若是只改貼這段
#navmenu{
width:390px;
top: 473px;
position: absolute;
text-align: center;
font: bold 11px/11px Verdana, Lucida Grande, Helvetica;
line-height:23px;
margin-left: 75px;
color:#ffffff;
}

可以達到我要的效果,但我的sidebar就被擠到最下面了,並且功能列變成透明的,無法改顏色。

其實有點想放棄了,蠻難弄的,必竟自己對這些語法是一竅不通。

謝謝Skyvee的不吝分享與幫忙。

Skyvee 提到...

我剛看了您的部落格, 目前這樣子挺讚的啊!

我的那段code, 應該還要調整top位置, 寬度的, 有可能是因為這些值, 導致您的sidebar被影響了.

楊大鵬 提到...

終極目標是想Skyvee你的那樣,不過目前我功力還不太夠,等我更懂些了再來做修改囉,多謝Skyvee的鼎力相助。

Skyvee 提到...

好的, 楊兄, 到時候再一起討論. :)

xs 提到...

站長您好,我已經順利加入水平列功能選單了,感謝。
但我想讓各方塊選單不是左右緊密連在一起,而是留有一定的空隙,要如何做呢?

Skyvee 提到...

xs,請調整 navmenubar li a 內, padding的值!

雙羊 提到...

skyvee, 拍謝,又來叨擾了 orz
我想要請問如果我想要做成兩排按鈕,不知道這樣的可行性如何?(我是程式麻瓜,只會自己看教學學習而已)
我會有這樣的念頭的原因是因為我的部落格主要是寫旅行記事,將來會有很多新增地點,我剛剛有試著增加很多,但是他自動折行下來,卻也造成下排全部變成背景色,而不是依文字多寡去自動調整。(我這樣講會不會很模糊啊...orz)
簡單說就是我希望可以做成兩排按鈕,這樣有可能嗎?
非常的感謝你 <(_ _)>

雙羊 提到...

skyvee,
哈哈,我自己試成功了!
剛剛跑去洗澡,邊洗邊想是不是有別的繞道方式可以達到我要的目的,於是我增加了一個新的指令 #navmenubar1 然後就成功啦!哈哈,只要把 top 位置改一下,然後網頁元素標題改一下就 ok 了,不過目前這樣設定的版面有點醜,還在找最適版型。 :-D

Skyvee 提到...

有時候就是這樣, 換個事情做一下, 就突然有靈感了! XD 雙羊很有創意呢!

雙羊 提到...

所以我說我的部落格是拼拼湊湊出來的,就是這個道理 XD

lifemirror (笨貓) 提到...

您好~~您的教學很棒很實用~~
笨貓在拿回去修改時, 沒辦法讓bar置中,
就算在網頁元素裡,
加上<div align="center">也沒用
這該怎辦呢??

Skyvee 提到...

貓, 在navmenubar內, 用margin-left 的方式調看看?

lifemirror (笨貓) 提到...

skyvee大哥:您的建議成功了, 但是我不明白, 為何使用
margin : 0 auto 0 auto ; 以及
margin-left: auto; margin-right: auto ; 無效呢?
參考CSS指令上, margin的左右設auto時, 會自動置中滴呀... 

skyvee 提到...

貓, menu bar 置中, 似乎要採其他作法. 這部分, 我就沒深入研究了. :)

小雨 提到...

如果我想把Google Search放左去要怎樣...
我的變成這樣><
http://rainlesss.blogspot.com/

Skyvee 提到...

小雨, 試看看把height, line-height的數值調成大於30px.

Eatin 提到...

不好意思,請問skyvee,我試了一下,
但怎麼沒辦法改字體的顏色呀?
還有,請問長度要怎麼調呢?
嗯,我也照skyvee的方法做了標籤雲,
成功了,很開心,多虧了skyvee,謝謝!
但標籤雲有些標籤的字卻會被切到,請問這是怎麼回事呢?
skyvee有空再回覆,謝謝唷!

Eatin 提到...

啊..哈...我亂改改好了...
但標籤雲的問題還在,如果skyvee有空再幫我回覆吧!
謝謝耶~開心

skyvee 提到...

eatin, 看來是你的sidebar設定與邊框間矩的問題,不過在標籤雲格式裡也可以修改, 將margin:0 0 0 3px;padding:0, 其中0的部分, 改成數字 如 5 以上 看看.

Eatin 提到...

skyvee我改好了,最後我把有0的地方都改一改,就OK了欸....
哈哈,謝謝吶!多虧了你的幫忙!

Skyvee 提到...

eatin, 不用客氣, 恭喜修改成功囉! :)

JengE 提到...

在下腦殘漏掉整個步驟1,不過發現反而更符合小站的需求(因為原本就只打算加一個連結而已)...^^a
我已把這篇文章的連結分享在小站了,謝謝skyvee~~以後等我有很多資訊可以連結的時候一定再來好好學習。

skyvee 提到...

Jenge, 別這麼說, 第一步驟主要是 設定格式, 如果你只加一個連結, 其實就像是加入個網頁元素, 反而讓你試對了! :)

小E 提到...

耶我也成功了,也修改了喜歡的顏色。
我是最近才加入BLOG的新手,您這裡真的很多實用文章呢。

skyvee 提到...

小e, 別客氣, 我只是把自己改部落格的經驗記錄下來, 大家互相研究交流囉! :)

kansasray 提到...

Hi! skyvee兄!

我照著您的心得教學也為我的部落格加上標題列了,多謝您提供的寶貴資訊!!

Skyvee 提到...

kansasray, 不客氣囉!我們一起交流囉!:)

木白柏 提到...

skyvee請問一下
我試了之後..用IE瀏覽時下方怎會多出一條藍線..而且標題列跑到中間去了..不過我用firefox看..就是我要的樣子..沒多出一條藍線且沒跑到中間去..你可以幫我看看嗎??謝謝!!

木白柏 提到...

呃...好像亂搞搞好了..
應該是ok了= =..

Skyvee 提到...

木白柏, 有時候不見得是亂搞的囉!改部落格, 就是這種樂趣, 自己試出來的成就感應該很過癮吧! ^^

KING YAU 提到...

我失败了。

可否帮我看看。。

Skyvee 提到...

king yau
您是否已把程式移除了呢?因為我好像找不到相關的程式碼呢?不知道您的問題出在哪了?

KING YAU 提到...
作者已經移除這則留言。
KING YAU 提到...
作者已經移除這則留言。
KING YAU 提到...

哈哈。。。
我成功啦。
但好像有点丑,请教我该如何改进?
谢谢

skyvee 提到...

king yau, 可能是在header的框線中, 又加有框的標籤 , 感覺線多一點, 或許把border color 調一下?

KING YAU 提到...

该怎么把它放得跟你一样?请赐教。谢谢

KING YAU 提到...

该怎么把它放在线的下方?

Skyvee 提到...

king yau,可以參考我回答大鵬的語法,有詳細的程式.

在 #navmenu{ ..}內,主要是加入top: 473px;(代表與頁首的距離)的參數,及改 position: absolute;(指定絕對位置)

黑人 提到...

初次留言,感謝你的熱心分享,沒想到新浪也能套用這個水平按鈕,用這個會比起找文章分類還來得輕鬆,感謝你。

skyvee 提到...

黑人您好, 很高興認識您, 也謝謝您的留言及心得分享.^^

Olly 提到...

嗨嗨
我想請問一下
我在使用這個語法的時候
因為HTML裡沒有找到#header-wrapper {..}跟body #layout #header {
XXX}這兩個字串
所以我就直接放在 #header { 前面

但是我發現所呈現出來的效果
並不是像你blog那樣
我並沒有跟標題的區塊那邊結合
而且我的背景顏色(綠)似乎就一直延伸到全部

不知道如何修改
請您幫忙一下
謝謝

http://olly69.blogspot.com/

小E 提到...

想要調整位置的話請參考上面Skyvee於9/12回復楊大鵬的程式碼。
以下為我的程式碼,供參考。
#navmenubar{
width:650px;
top:154px;
position: absolute;
text-align:center;
height:25px;
line-height:23px;
margin:0 1px;
background:#none;
color:#666666;
}
重點是要根據自己的版面調整width和top的值,想要越靠近標題top值就要變小。

Skyvee 提到...

olly,我的版面就像小E說的, 在回覆大鵬留言中的那段程式碼.是採用絕對位置的方式, 才能設到header區塊, 請參考一下囉!

小E,很感謝你抽空幫忙回答呢! 好感激!真的! ^^

小E 提到...

呵呵,沒什麼啦,舉手之勞而已,我也常常從你這裡撿東西回去啊。

Olly 提到...


感謝樓上兩位
我弄好啦 ~

另外我想再請問一下
要如何讓點選後視窗是開在新分頁呢 ??

謝謝

Skyvee 提到...

Olly, 開新視窗的語法, 是在連結語法中, 加入 target="_blank" , 如<a href="網址" target="_blank">XXX</a>

小E, ^^

驕傲的自然捲 提到...

Skyvee大~
在下試過好多次,都無法解決小弟的問題!
小弟是使用mac,在sarfary瀏覽器上觀看一切正常...
但只要用win上的ie觀看,格式就會跑掉...(使用您的程式碼在header的地方放上HTML,文章會往右偏移,放在sidebar就正常...)
目前是放在sidebar...請Skyvee解救!

驕傲的自然捲 提到...

還有就是在mac sarfari上是水平效果,但是在win IE上就變成垂直﹦﹦是我程式碼放錯嗎?

驕傲的自然捲 提到...

歷經測試,上述的問題有解決方法...
連結自述不超過三個中文字,文章部份就不會跑掉偏左,文章至中...
還是想了解,問題點在哪...請教Skyvee~

skyvee 提到...

謝謝自然捲的留言.

目前我用FF看你的blog, 格式還是跑掉了, 文章會擠到右邊去...IE下是OK的.(你目前還是放在sidebar?)

如果放在header下, 會不正常,這個問題有可能跟你的header 區塊所設的margin, padding, 長寬度有關, 因為menubar超過了header的長寬限制, 才會不正常. 可試著調看看header部分, 或是menubar的font size 改小一點, 如 font-size:10

驕傲的自然捲 提到...

感謝你!上述問題我已經解決。
我現在想把MenuBar居中,試過幾個元素都沒辦法,不知道是否要加入其他語法元素呢?

Skyvee 提到...

自然捲, 在 navmenubar內, 加入 margin-left: XX px;

其中 XX 是數字, 來調整到置中.

電光人 提到...

不曉得我的步驟有沒有弄錯,後來弄出來的功能選單是垂直的,而非水平的。這..........??

skyvee 提到...

電光人, 有可能是寬度超過原先header的寬度?

plumpbear 提到...

想請問要如何在每個標籤上加入對話泡泡呢?
我看了您的對話泡泡那篇教學,可是看不太懂,可以就在這個標籤列上怎麼加對話泡泡再說明一下嗎? 謝謝您

Skyvee 提到...

plumpbear, 在加泡泡框的那一個步驟加完後,回到這裡的步驟2, 將 a href="網址" 改成 a href="網址" class='smallnav' 就可以了!

plumpbear 提到...

謝謝回答,成功了~
想再請問一下如果我有對話泡泡的圖檔,
要怎麼加進去呢?
謝謝您

Skyvee 提到...

plumpbear, 接續上個回答, 在IE下,會有錯誤訊息,我看了一下你的原始檔,有出現一個image的框, 但沒有圖,程式碼應該要改成{a style="border:0;" href="http://plump-bear.blogspot.com/" class="smallnav" title="回首頁"}首頁{/a} (因為在回應區, 不能輸入<>, 所以我用{}當括弧). 至於你說要改對話泡泡的圖檔,我想確定一下, 你指的是圖一的對話框嗎? 如果是,要改圖有點麻煩,因為圖檔是在js中的css檔. 另外, 你的泡泡框好像沒出來? 要把這句 window.onload=function(){enableTooltips("smallnav");}; 改成 window.onload=function(){enableTooltips("navmenubar");};

plumpbear 提到...

搞定囉,也成功變更了對話泡泡的圖案 ^_^
您的教學說明對新手真的幫助很大!
太謝謝您了!

skyvee 提到...

互相交流,別客氣.plumpbear的泡泡框好可愛, 像小水滴!^^

γειισω (矛今) 提到...

沒錯,您真內行,skvee乃是新人殺手...開玩笑的,放形浪的部落很樂於分享,且作者認真不吝的教學使大家的blogger都美美的,甚或有問題一一解答不留餘力,(馬屁拍完了等下問問題去哈哈)

Skyvee 提到...

這樣就想要問問題, 不夠, 不夠! 哈哈! (開玩笑的, 已回你囉!)

CA通讯部 提到...

Skyvee,你好,谢谢你的分享,我用了你的方法,在firefox就可以呈现出来,但在ie却走位了,是那里出问题了,谢谢!

Skyvee 提到...

你好,看來是main 寬度不夠, 所以目前你設的這些連結超過寬度,加上IE對 white-space:nowrap;的支援很差,所以FF看起來是沒問題, 但IE就出錯了, 你可以試著先移走一個連結(如相片集),就會看到正常了. 如果你有許多連結想放, 或許考慮一下用雙列, 就是再加一個網頁元素, 重覆第2步驟.

九头侠客(也称无聊的黑猫〕 提到...

不知为何我设定不到,抱歉我是初学者,愿您可帮忙~~

Breezy 提到...

大大您好,想請問為什麼我一直做不出水平面的功能選單,我做出來之後居然變成置中且垂直的功能選單了.....可否幫我看看..Orz

Skyvee 提到...

黑貓你好, 抱歉,今天才發現漏回您的訊息, 我看了一下您的原始檔, 似乎已沒有這段程式碼?不知道您的問題出在哪了?
Breezy的網頁,剛連過去看,已正常顯示, 想必您已自行調好了!^^

Breezy 提到...

昨天調整了很久,最後用一個跑CODE的軟體直接跑出水平的CODE才解決了問題。呵呵不過我現在一直想要讓照片幻燈片可以自動跑出來播放,目前都要去點它他才會播放,可以請你幫我看看ㄇ?謝謝。

Skyvee 提到...

breezy, blogger 在新增網頁元素的頁面,有提供一個 新增投影片的功能, 就可以直接播放照片了!你可以參考看看!

Just Music 提到...

你好,謝謝你的教學,我學了很多^^,我想請問怎麼把標籤雲放在menu上呢?>"< 我弄了很久都弄不好,我想要弄成像版主你那樣的方式,就是按下開關可以開啟/關閉標籤雲,我之前標籤雲也是參考版主你的做法,謝謝你了>"<

我的blogger
http://azuregreenemerald.blogspot.com/

Skyvee 提到...

你好, 謝謝你常來! :) 試看看,改成==> 在 div id="navmenubar" 中, (li)(a href="")LabelCloud(/a)(/li)改成

(li)(a href="#" onclick="new Effect.toggle('LabelsCloud','blind');return false;" title="點一下,展開標籤雲")標籤雲開關(/a)
(/li)

Just Music 提到...

真是感謝阿,我一用就成功了^^,另外我原本的labelcloud按鍵可以隱藏嗎? 我原本想說就不要加html,不過後來才想到用html才能有"按一下出現"的效果,也試過用dispaly的語法讓它不出現,結果卻是整個labelcloud都按不出來>"<,怎麼會這樣,這該怎麼弄呢?謝謝你了

Skyvee 提到...

把labelcloud網頁元素的標題,清空 就行囉! ^^

Just Music 提到...

我剛剛把標題清空了,可是還是會有一個小點出現耶,我還試著把它移到網頁最下面,結果整個版面都跑掉了>"<...
不好意思,我好多問題,我才用blogger一個多月而已,還有好多要慢慢玩...

Skyvee 提到...

小點?是不是你的sidebar 標題部份有特別的格式?我現在連不到你的blog,所以看不到.照理說是不會, 你也可以試著把標籤雲的程式碼加到別區塊的網頁元素, 如 在post上方新增網頁元素, 跟在sidebar區新增, 兩者的格式可設定不同.

Just Music 提到...

我把圖捉下來放在這裡
http://0rz.tw/cc491
, 那個小點好像是原本就會出現在語法打上的標題,因為我在標題上並沒有打上小點,另外我也試了用別的區快的網頁元素,但是還是會出現,不過奇怪的是,我的"Music links"那個區塊,我把標題清空,整個就會不見了,可是我的標籤雲的程式碼也是用那邊的網頁元素就不會消失,好怪...

Skyvee 提到...

我想,可以改兩個地方. 一是在navmenubar區塊,有一行程式 a )labelcould href="#" ==> 請改成 a href="#" 就是把)labelcoud刪掉,二是把這行(h2)Label Cloud(/h2)移掉, 那麼在出現label cloud時, 就不會看到了.

Just Music 提到...

我已經改了第一個地方了,我不知道你說的第二個地方是哪耶^^a 不好意思又麻煩你了

Skyvee 提到...

我想我知道問題在哪了, 請勾選小裝置範本後, 將這行 <li><a href="#" onclick="new Effect.toggle('LabelsCloud','blind');return false;"></a></li>中的<li>及</li>這兩個標籤移除, 就不會看到這個點了.至於上一段的回覆中的第二點, 不用改也沒關係.

Just Music 提到...

真的是這樣耶,我改完後就沒有小點了,不過整個版面卻大移位,就像之前我試著把那個網頁元素移到最下面一樣,是不是我的menu那一排太短了,所以整個都移位?謝謝你了

skyvee 提到...

可以請你把網頁元素那一頁截圖下來嗎? 順便標一下label cloud及menu bar位置 ?

Just Music 提到...

http://0rz.tw/7e48l 我放上來了,blogger版面移位可以看上一張圖,也可以看我的blogger,我會覺得是menu bar太短是因為我如果按出label cloud,整個版面就會回到正確的位子,是這樣嗎?

skyvee 提到...

1.從menubar 到labelcloud , 這三個網頁元素,看起來是跟sidebar,main,newsidebar同一區塊, 請問這三個網頁元素, 是你的範本原本就存在嗎?
2. 你多了一個網頁元素, 請把中間那個html/javascript的網頁元素移除
3. 你的版型我不是很清楚,要花時間研究.不過我想先建議你參考這篇 http://skyvee.net/2007/05/headerpostadsense-for-blogger.html, 自行在header區或文章區上方, 增加網頁元素, 然後你再把labelcloud那塊的程式碼搬到main上方.

Skyvee 提到...

再補充一下(洗完澡回來了!)其實你的三欄寬度是超過你原先的設定, 建議你可以先把menubar及labelcloud統統移除, 應該會發現移位的問題, 不妨將main-wrapper寬度從500改成450,看看! 等三欄都正常後, 從上個回應中附的那篇文章,修改設定, 讓可以在header下方或文章上方新增網頁元素, 然後再把menubar放到header下方, 而labelcloud看你要放menubar下方或文章上方.再分別新增網頁元素.
從你的截圖看起來,menubar,labelcloud及另一多的labelcloud這三個是加在header區, 但是從source code看到, 是屬於三欄區.

Just Music 提到...

感謝skyvee大大的細心回答,我當初開始用blogger的時候,是隨便選一列在下面的範本,那個範本上方就有網頁元素,所以說我跟本就不知道基本的blogger上方是沒有網頁元素的,只有左邊是我自己加的,至於網頁寬度我本來是設450的沒錯!不過後來覺得有點窄,才改成500的,我上方的圖片就是當時用450改的,可是我不會算如果我改到500,圖片的寬度要怎麼改才好,所以一直都沒動,是因為圖片影響到版面嗎?另外,我有發現labelcloud按出來後尺寸會在一順間變一下,我想會不會也是這個原因...
我原本的menubar是用你說的絕對位置(我覺得那個比較好看XD),剛剛我改了用內文中的語法,果然版面就沒移位了,不過還是有點手養想亂改XD

skyvee 提到...

如果你有設padding,或margin, 那圖片寬度還有再加上這些值才是真正佔的寬度.
要調版型,真的要花很多功夫,不過我覺得可能你自己找問題會比較容易,因為你改過哪些部份, 你比較清楚,像你就找出絕對位置的menubar影響了版型(拍手),而我只能在旁敲邊鼓大略猜方向哩!你不妨,再另外開一個blog,然後將想改的東西先在那個blog試,等沒問題後再移植回來, 或許會比較方便.(一個gmail帳號,可以開3個blog)

Just Music 提到...

blogger對我這種新手,剛開始還真的有點難,但後來還蠻有趣 哈!不過一些還在建設中,自己看版面覺得還有點亂亂,以後還要大大多多指教啦! 原來一個gmail可以開3個blog,這是test的好地方!!

γειισω (矛今) 提到...

關於貼那個水平列的東西, 我是參考雙羊的文章才學會的, 不過skyvee很親切且熱於助人, 問他你真是找對人了!!

Skyvee 提到...

其實我覺得, 就算本身是寫程式出身,想要改blogger版型,還是要花時間研究,如果我完全不懂程式,我或許不會考慮呢!所以我很佩服各位願意花下時間去研究,以just music不算接觸blogger太長時間, 卻已開始摸出方向, 真的很厲害哩. 雙羊,矛今也是,都很令人敬佩.

Scottie.Liao 提到...

大大您好
看了大大您的文章
我已有做出下方menu了
不過我不知道該怎麼把想要的分類的文章擺進去
就像大大您這樣
點一下menu就會跳到下一個
希望大大您可以指導小弟一下

抱歉,小弟是初學者
對blogger沒甚麼概念
若有打擾之處
小弟我深感抱歉

Skyvee 提到...

Scottie,你太客氣啦!!本來就是一起研究分享嘛!你指的是像我的'部落格玩意'嗎? 我注意到你沒有加上標籤耶!就是在撰寫文章時,下方有個空白列, 可以自訂標籤, 如'funny',只要有加'funny'的文章, 就會被分類成是funny這個類別.那你就可以把這類別的文章連結(如http://liaoscottie.blogspot.com/search/label/funny?max-results=99 放到menu了!

Scottie.Liao 提到...

太感謝Skyvee大大的指導
終於做出我想要分類的感覺了
看來得再花點時間
好好的在Skyvee的blogger裡面挖寶了

blogger真的很自由
可以讓使用者好好發揮自己的創意
只不過需要一點基礎功力
現在的我還只是個初學者
功力還有待加強
希望有朝一日,我可以建置我想要的blogger..^^

skyvee 提到...

Scottie,別客氣,改版是長期的事,經驗多了,就更容易隨心所欲了!

ang ang 提到...

我依照您的教學來做,但標籤雲還是無法顯現。請問是哪裏出錯了?麻煩您幫我看一看。如何將發佈文章或最新回應放上?如何找出發佈文章或最新回應的網址?請指示。謝謝!

Skyvee 提到...

安安,有關於我的部落格所有改板的教學文章,可以參考這裡部落格改版.你指的標籤雲是指那個開關功能吧?在這篇讓部落格頁面也有開開關關的效果!,最新文章及最新回應,參考這裡.

ang ang 提到...

我跟着照做了,就是無法顯現。請您幫我看一看,問題出在那裏。謝謝!http://cy-ang.blogspot.com/

skyvee 提到...

ang,請檢查一下你標籤雲開關的語法,與第四步驟的差異, 你貼成\'LabelsCloud\',\'blind\' ? 你不是用windows?

ang ang 提到...

您是說以下這一個語法麽?我將您這個語法加入

<li><a href="#" onclick="new Effect.toggle('LabelsCloud','blind');return false;">標籤雲開關</a></li>

卻變成

<li><a href='#' onclick='new Effect.toggle(&apos;LabelsCloud&apos;,&apos;blind&apos;);return false;'>標籤雲開關</a></li>

還是無法顯現。暈!錯在哪裏???

skyvee 提到...

如果你直接在裝置元件裡 修改程式碼呢? 不要用複製貼上的方法

ang ang 提到...

還是一樣,而且圖片更爲難看。這是否跟之前更改標簽雲有關?該如何解救?

skyvee 提到...

這是瀏覽器解譯的問題, 請把 new Effect.toggle('LabelsCloud','blind');return false; 改成 這樣 new Effect.toggle("LabelsCloud","blind");return false; 把 ' 改成 "

PS.很好奇你用的是什麼瀏覽器?版本是 多少呢?

skyvee 提到...

也就是把 &apos; 改成 &quot; 其中&改成半形

小玉 提到...

添加此效果,如同之前留言者遇到狀況一樣,變置中效果外,連結是垂直樣。
試了很多次仍無法變水平模式,再來就是想問,連結的底線可以消去嗎?!

或者該說清楚點的是,
如想文章內文的連結是以虛線顯示,但是上方選單是以沒底線的方式顯示,這部份語法是要從哪裡改。

還有一問題是上述您有提供了標籤雲添加方式,但是仍有點看不太懂。

:) 其實我加入Blogger還不到一星期哩!不過靠著網路上google搜到你的blogger還獲得了不少知識,真是再此謝過。

ang ang 提到...

還是失敗。我是用 opera 操作,用 IE 試了也無效。就是那標簽雲無法顯現。唉!

ang ang 提到...

糟糕!怎麽連右邊原有的標簽雲(部落類別)也不見了,請大大幫我看一看。

Skyvee 提到...

小玉應該本身有一些程式基礎,幾乎已脫離blogger一般格式,很厲害!想改內文一些格式,可參考這篇 http://skyvee.net/2008/04/blogger-css-layout.html. 標籤雲您看不懂?? >< , 很少人這麼說哩! 還是說你指的是標籤雲開關?這兩個不一樣哦!

Skyvee 提到...

對了,小玉提到變垂直,應該也是寬度不夠,你可以先試著只在水平列中加兩個連結,去調寬度.

ang ang, 哇..加了之後變這樣? 我沒有用過opera啊!如果你用IE改,就不用將 ' 改成 " .(標籤雲在開關中,預設是先關掉的,這一步驟你改對了!).所以你有IE嗎?能麻煩你用IE開一下你的blog, 將 標籤雲開關這行 程式,貼給我嗎?(如 a href='#' onclick='new Effect.toggle(...)

ang ang 提到...

這是我貼在 #header-wrapper {..} 之後的程式碼

#navmenubar{
top: 160px;
position: absolute;
text-align: center;
font: bold 14px/14px Verdana, Lucida Grande, Helvetica;
line-height:20px;
margin:0 1px;
background:#e1771e;
color:#ffffff;
}
#navmenubar li{
float:left;
list-style-type:none;
border-left:1px solid #eeeeee;
border-top:1px solid #eeeeee;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
background:#e1771e;
white-space:nowrap;
}
#navmenubar li a{
display:block;
padding:0 17px;
font-size:15px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #e6e6e6;
}
* html #navmenubar a {width:1%;}
#navmenubar .selected,#navmenubar a:hover{
background:#inherit;
color:#e6e6e6;
text-decoration:none;
}


這是我貼在網頁元素的程式碼

<div id="navmenubar">


<li><a false; href="#" blind labelscloud onclick="new Effect.toggle(" , );return>標籤雲開關</a></li>


</div>

Skyvee 提到...

ang ang, 在網頁元素那一段, 用IE開,加入<li><a href="#" onclick="new Effect.toggle('LabelsCloud','blind');return false;">標籤雲開關</a></li> 再存檔看看(全形<改半形<)

ang ang 提到...

還是一樣,什麽都沒。唉!您還沒告訴我如何讓右邊原有的標簽雲(部落類別)出現。

ang ang 提到...

我嘗試再植入一個標簽,卻出現了長長的一系列,怎麽無法像之前的標簽雲。

skyvee 提到...

ang ang,想讓標籤雲出現,在這行 div id='LabelsCloud' style='display:none', 將style='display:none'移除就可以.開關這個功能,看起來沒辦法幫到你忙了!拍謝咧!

ang ang 提到...

謝謝大大!您已幫了許多。在點按選單時,如何讓外掛出現在部落裏頭。就像您的《部落格聯播》及《推薦優格》般。我如沒開新視窗,原有的部落就會被取代,開新視窗效果也一樣;沒有功能選單,HOME 就起不了作用啊!

skyvee 提到...

其實我不知道為什麼你加上雙引號,或單引號後,會變得如此複雜? @@ ,我只常用IE或FF,倒是第一次碰上這問題.如果你希望《部落格聯播》及《推薦優格》不脫離blog,建議你可以用發表新文章的方式來做.雖然會有日期,不過還是可以達到不會從部落格跑開的目的.你覺得這樣如何?

forcandy 提到...

你好!請問一下為何我的水平選單的底色會一條這麼長呢?該怎嚜把後面多餘的底色用掉呢??

Skyvee 提到...

你好,請把#navmenubar中的background:#7f7f7f;移掉,搬到#navmenubar li中.如

#navmenubar{
height:25px;
line-height:23px;
margin:0 1px;
color:#333333;
}
#navmenubar li{
float:left;
list-style-type:none;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #777D85;
border-bottom:1px solid #777D85;
background:#7f7f7f;
white-space:nowrap;
}

forcandy 提到...

好神奇!成功了耶!! 高興高興~YA!謝謝啦!!

skyvee 提到...

:) 別這麼客氣.

Waverly 提到...

謝謝你!!!!
成功了!
請問您有e-mail嗎?因為要來追蹤自己的留言怕會找不到.

Skyvee 提到...

waverly 你好,果然用了新功能,還是會造成困擾.我的email,點一下我的留言大頭,就可以看到囉! 剛已改回原來的留言模式,可以email追蹤了.

QQ冰冰 提到...

您好,因為我想要把標籤分層,找到一篇介紹如何將標籤分層的教學,但只能完成第一步,第二步都試不成功,會出現:XML 错误信息:Attribute name "label.name" associated with an element type "data:" must be followed by the ' = ' character.

看到您的部落格有類似的功能,可否請您幫忙看看呢?
教學文連結:http://oyee.blogspot.com/2006/09/bloggerbeta_28.html

或者,有其它方法可以將標籤分層嗎?

先謝謝您了..^^"

Skyvee 提到...

你好,看起來您出現的問題,有人在那篇文章也碰到.這段hack 我沒用過,沒把握能找出問題.只能建議您從原作者文章去看看有沒有什麼解? 分層標籤其實有蠻多hacks的,可以試看看在google上面找看看.

柚子飛 提到...

hello!Skyvee.我看了大家的留言做了很多修改,不過MENU還是垂直的,字體的顏色也不聽使喚,希望大大幫忙看一下,新手上路,想幫外公的店做部落格,還請多多指教!! 真的很謝謝你!

skyvee 提到...

柚子, 只要一組
<div id="navmenubar">
</div>包住<li></li>就可以, 所以請把這段
<div id="navmenubar">
<li><a href="http://cowperwang.blogspot.com/2008/07/converse-9580.html">開始介紹</a></li>
</div>
<div id="navmenubar">
<li><a href="www.yahoo.com.tw">首頁</a></li>
</div>
改成
<div id="navmenubar">
<li><a href="http://cowperwang.blogspot.com/2008/07/converse-9580.html">開始介紹</a></li>
<li><a href="www.yahoo.com.tw">首頁</a></li>
</div>

柚子飛 提到...

hello!Skyvee.我照著改了HTML的語法,不過電腦變得好像無法接受,是因為版型的關係嗎?還是因為我用的是套論的三欄式版型呢?
不好意思,又再麻煩!謝謝!!

skyvee 提到...

柚子,抱歉,我忘了告訴你, 上則留言裡的程式碼,全形 <要改回半形< , 因為受限blogger留言時不能放上語法,所以我把半形括弧用全形取代.

Pourquoi 提到...

你好 我想讓功能選單選到的時候會另外出現別的文字 例如"Design" 選到之後會出現中文 "設計" 該如何在程式碼改呢??謝謝喔

Skyvee 提到...

以Graphic design來說,加入title="設計"就可以,如 <a title="設計" href="http://y-pourquoi.blogspot.com/2008/10/after-dream.html">Graphic design</a>

kenmis 提到...

你好,請問為什麼我的blogger裡都不會有新增欄位或者是新增網頁元素呢?
而且大家的都是控制主頁我的卻是資訊主頁?
謝謝

Pourquoi 提到...

Cool~~ok了!你好厲害!
那我可以在問一下嗎~~
我進入修改文字和顏色裡去更改文章標題的顏色和字型,
可是儲存後還是沒有改,我想說是不是程式碼有問題
是不是要在HTML修改呢?
不好意思謝謝喔!!!

Skyvee 提到...

kenmis, 因為你在的網頁不對,資訊主頁要再選版面配置 -->網頁元素 ,就可以找到囉!

Skyvee 提到...

Pourquoi, 文章標題應該也是可以在那邊改, 如果不行, 那你就要進到html裡改囉!

Pourquoi 提到...

嗯嗯 因為我不是很會語法
我不知道程式碼哪一段是改文章標題的??可以貼給我看嗎
感謝你..........:)

skyvee 提到...

看起來你的文章標題字型並沒有設, 如果從HTML模板進去加, 可以將這段 <Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 120% 'Trebuchet MS','Lucida Grande'"> 百分比及字型你再自己調囉!

Pourquoi 提到...

哈囉~~是另外加進去的嘛?
我加了之後還是沒變
也不確定我放的位置對不對
它上面有一牌是整齊的Variable name
和下面是比較亂的Variable name
我兩邊都有加進去看看 但還是沒改變~
文章標題還是黑色的 字型也是小小的~

順便再問一下
功能選單選了之後底和字型會變顏色
是要在HTML裡哪段修改呢??
謝謝喔!!!!

skyvee 提到...

Pourquoi,抱歉, 我忘了註明,由於blogger留言限制,上一個留言裡的全形 <,你要改成半形< 再貼回去, 你現在貼的位置OK, 只是半形< 沒有出來,變成 < 另外我不懂你指的功能選單, 底和字型變色是什麼意呢?

Pourquoi 提到...

<Variable name="titlefont" description="Post Title Font"type="font" default="normal bold 350% 'Trebuchet MS','Lucida Grande'" > 
哈囉我改成半形後,網誌文章標題還是一樣黑色小字,我是貼在上面整齊的Variable description那裡,
怎辦...還是沒改變,我是貼在
<Variable name="titlecolor" description="Post Title Color"type="color" default="#bebbff" value="#dfddff">
的上面 那這段是改文章標題的顏色嗎?
不好意思..又要麻煩你了><

Pourquoi 提到...

哈囉補充一下
我說的網誌文章標題不是最上面那各Design Art那裡喔!
是每po一篇文章都會有一個大標題,你看我的網誌就可以發現都是黑色小字顯示 我是想改那個部份...謝謝喔~~~

a.u.g 提到...

呼...放語法進去並不難,
但是選色花了我將近半個小時阿~XD
謝謝教學,很容易上手喔!

Skyvee 提到...

選色真的會很花時間. :) 恭喜你成功了!

小釀 提到...

您好,看您的文章真是受益良多。
我是想請問一下,
要如何才能像您在頁籤上顯示出泡泡呢?
拜讀這篇文章後:
http://skyvee.net/2007/11/blogger-navigation-icon.html

我只有在<head>後面加上:
<script src='http://bloggertips.googlecode.com/files/BubbleTooltips1.js' type='text/javascript'></script>
<script type='text/javascript'>
window.onload=function(){enableTooltips("navmenubar");};
</script>

並在希望顯示處的<a href= 後面增加
style='border:0;'、title、class='smallnav'等語法,

還有哪邊需要改的呢?
麻煩您了^^

Skyvee 提到...

小釀,這行 window.onload=function(){enableTooltips("navmenubar");}; 請改成window.onload=function(){enableTooltips("smallnav");}; 應該就行了!

小釀 提到...

感恩感恩~真的可以了!!
感謝版煮的熱心,
才能讓我這種愛亂改有不懂的人能得償所願呀~

Skyvee 提到...

其實你只差臨門一腳就成功了 ^^

甲寅 提到...

請問選單的長度樣怎麼改呢??
可以讓它短一點嗎??
謝謝你!!

Skyvee 提到...

在#navmenubar{}內,加入width: xxx px; 其中xxx是數字,就可以調了!

關於吉拉米代 提到...

你好,在這裡我學到了很多!!!呵呵
今天有個疑問,為什麼我的選單已經結束了,後面還是有顏色
不知該如何用掉呢!!!
還有,請問你的水平選單,怎麼可以放在圖片上
我也想把我的選單往上移一點!!!!
請幫我解答吧 ><"謝謝

Skyvee 提到...

你好,我的寫法是用絕對位置,你可以參考這篇文章的第11篇留言,我所貼上的程式碼.另外,你的HEADER 寬度似乎不夠,所以我用ie7下看到你的版面像這樣喔!

福摩爾沙海鮮餐廳 提到...

您好:
感謝您的分享...!
blogger雖然對於不懂程式碼等等東西的使用者,
顯得較為麻煩,不過,卻是一點也不死板的網頁,
尤其是在你的教學之後,
不過,我的選單跑到圖片上了,
要如何移到跟你一樣的位置呢?
請你指教,謝謝你
(哈,我是超極初學者,請見諒..)

Skyvee 提到...

抱歉這麼晚才回信,剛看到您的blog,選單已移到圖片下了, 問題應該已解決了吧? ^^

Wing 提到...

我見有些人可以加 archive, label 等在 link bar 上. 我想問如何加入那些 blogger 已有的 link 呢..?

我只serach 到有關 <$BlogArchiveURL$>

Skyvee 提到...

你意思是想加入你blog裡,同一label的文章嗎? 如 http://wings-design.blogspot.com/search/label/blog, 其中blog,就是label name

Lustral Boy Team 提到...

你好!謝謝你的分享,很厲害!但我只做好一半就不知如何做了。

我懂得如何將其他網址連繫到功能選單(如:http://facebook.com),但卻不知如何將自己的網頁元素移到功能選單。

請問可否到我的網頁看看,教我將主頁中的圖片移到"Be Lustral, Be our model"呢?

http://www.lustralboy.com/

Skyvee 提到...

Hello,您好

您的二個問題,我不太明白,所以想請教您一下.
1.網頁元素移到功能選單 ==> 指的是在功能選單新增網頁元素嗎?不過,功能選單本身就是一個網頁元素呢!剛連到您的blog,目前您新增的功能選單是正常的.
2.主頁中的圖片==>其實我不知道您的圖片指的是哪一個呢? 還是說這個問題您已經解決了?

提到...
作者已經移除這則留言。
提到...

您好,最近剛使用blogger,還在排版面當中~
想請問一下,
".selected,#navmenubar a:hover"是滑鼠經過時的顏色,
如果我想要"正選擇該頁面中"讓該功能選單變成另一種顏色,該怎麼做呢?
例如這個網站,雖然它是wp的→http://www.meisanmui.com/

剛才異想天開的試了好多種,像這樣...
#navmenubar .selected,#navmenubar a:active{
不過由於都是亂試的,所以當然都沒成功...

請問正確的作法到底是什麼呢?希望您能教教我~
謝謝!

skyvee 提到...

您好, 你想要的這功能很好,不過這不是只用CSS就可以解決的,必須用script,將所在頁面傳回標籤,這樣才能讓當頁的tab,以不一樣的顏色出現. 我會找時間研究,有試出來就會跟大家一起分享,討論.

提到...

謝謝您的回覆~^^

提到...

您好,我想再請問一下喔~
我的BLOGGER的水平列在我家裡電腦的FireFox以及IE看都是正常的,
但是換了一台電腦的IE瀏覽的時候水平列卻變成垂直的?
這跟我的版面沒有固定寬度,是用百分比在跑有關嗎?
希望您請您幫我看看是哪邊出了問題,非常謝謝!

Skyvee 提到...

這可能是跟瀏覽器的解析度大小有關,是可以設固定寬度

匿名 提到...

好久不見啊~skyvee~ 我發現我現在的部落格水平列是成功了但後面多出的顏色框要如何刪除呢?

http://www.emotoc.com

Skyvee 提到...

是矛今嗎? ~,~ 沒看見你的水平列?

矛今 提到...

哈哈哈~ 吼~ 你好久沒出現了~ 剛好改版去了
那麼可以教我現在左邊menu列為什麼會顯示不全??

Skyvee 提到...

好像你外加程式進去的小裝置,就會出現寬度不夠的問題....我目前還沒找到問題

γειισω (矛今) 提到...

那麼需要提供模板給您嗎?先感謝您的回答 : )

skyvee 提到...

矛今,我明天就放長假了,過年沒有機會用電腦,可能要年後才能幫你看嘍!

γειισω (矛今) 提到...

skyvee, 沒關係,那屆時再勞煩妳了。新年快樂啊!!

Pretty and Elegance 提到...

怎樣都加不到..

蔡旻辰 提到...

版主不好意思,希望您能幫忙解決語法的問題
我對語法一竅不通,參考嘗試好幾天,還是不能達到理想的呈現
這是我在知識+發問的
http://tw.knowledge.yahoo.com/question/question?qid=1010081809759

若您不方便幫忙也沒關係,不好意思打擾了

rinkoe 提到...

版主好
我的問題
我有先修改
新增Blogger Header及Post的網頁元素,可加入圖片或Adsense

我沒有
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='yes'>

看到留言說 找
div id='main-wrap1' 這段也沒有
小的就先省略

跳到 #header-wrapper {..}
小的也是沒有 所以就找 標頭的圖片位置下方
加入版主的css語法
應該是失敗了 沒有css的效果
只有陽春的連結

rinkoe 提到...

版主 如果跟版面同寬 要修改哪裡?
我摸了一個下午 慢慢的解決問題
很打擾版主

skyvee 提到...

Rinkoe,不知是否可提供您的blog 網址 ? 要看一下您的blog CSS ,才能跟您一起討論.

rinkoe 提到...

抱歉skyvee 大大
現在才回 我的樣板 搞壞
現在連格主 的功能 上次放哪成功 也忘記了


在Blogger的任何位置加入網頁元素
這我OK了

我的blog
http://javshowcase.blogspot.com/

麻煩格主了

猴子把戲 提到...

您好,我想請問一下如果要怎麼在首頁以外的子網頁發表文章呢?我怎麼試都只能在首頁發表,其它的網頁都只能直接在上面打字,無法用發表文章的方式呈現

Skyvee 提到...

rinkoe,我進不去你的blog了~

Skyvee 提到...

Dear 猴子,其實我不太確定您的意思,文章都是按時間發表順序呈現的,如果您首頁設定只出現一篇文章,那麼您每次發表的最新文章就會出現在首頁,還是您指的是Tab裡的網頁功能呢?

猴子把戲 提到...

您好,我的問題是像"PTT內湖卡-官方部落格"(http://ptt-neihucard.blogspot.com/)像它那樣每個網頁都能發表文章,因為我每次按發表新文章,都只會直接發表在首頁,像它那樣每個網頁都能發表文章是怎麼做到的呢?

Skyvee 提到...

發表文章時,下方都有個標籤列, 可以自行設定, 如 "旅遊", 這個標籤就等同於分類, 只要點旅遊,就會出現曾經標上"旅遊"的文章. blogger 比較適合喜歡自己DIY的人使用, 如果您本身對html語法, CSS語法不是很熟悉的話,要翻修成您想要的模式, 會花比較多的時間.

您提的這個blog,他的每個tab,其實都是連結到某一個label的文章,如 http://XXX.blogspot.com/search/label/XXX 他的版型並不是blogger原本提供的範本.

猴子把戲 提到...

謝謝你,你的部落個真的好多好東西阿~~
學到了好多!

Skyvee 提到...

要熟悉一個部落格平台的功能,真的要花很多時間的,一起加油囉!

なえぎ 提到...

^__________^ 你好..
我剛申請了.部落格..但一頭霧水..
不知從何下手..
我想問..
1.如何把臉書的名片貼用上去..
2.如何放上照片和音樂
目前有這二個疑問..對你而已會是白痴的問題嗎??

なえぎ 提到...

還有一個問題..如何在部落格上..
放上屬於自己的標題照片..

Skyvee 提到...

您好,在部落格上放上屬於自己的標題照片,可以在 設計-->網頁元素裡, 選擇 標頭那個小工具,裡面就可以 直接上傳照片了. 剛使用blogger, 是需要花些時間, 您可以先參考一下 http://www.skyvee.net/2008/04/blogger-css-layout.html, 大概認識一下基本版型,文章有些久遠, 不過應該還是有點幫助. 要加照片,音樂, 臉書名片, 可以在 side bar區, 加入小工具時, 選擇 html/javascript, 然後將外掛程式碼放上去. 您可能要花些時間,先找一下google 上的文章,看有沒有正好符合您需求的介紹文,會收獲很多喔!

Poya Lin 提到...

您好,我的blog現在是用新的template改的 想加入nav bar但是
我在edit html裡找不到 #header-wrapper {..} _
這個程式碼是只適用舊版的template嗎
謝謝

Poya Lin 提到...

我有試著用用看這個author的程式碼 但用出來 就只是白白的一行
http://www.bloggerplugins.org/2010/01/blogger-pages-are-finally-out.html

Skyvee 提到...

Poya, 這個做法不適合新版的blogger template, 我曾寫過一篇文章介紹做法. http://www.skyvee.net/2010/10/blogger-tab-menu-bar.html , 可以參考一下. :)

Poya Lin 提到...

哈囉 謝謝你的回應 我照著步驟用 還是白白的一塊耶>.<

Poya Lin 提到...

哈囉請忽略我剛剛的留言~我剛剛把字體改顏色可以了^^謝謝喔

«最舊 ‹較舊   1 – 200 (共 201 個)   較新› 最新»

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.