2008年4月14日 星期一

如何將標題(頭)分兩欄,加入網頁元素

昨天綸太郎將另一個網站,東京封印,換新的模板,發現一個新技巧,和大家分享。

以Blogger一般的規格而言,標題(標頭)通常佔了最上方一列的位置,如下圖這樣,


但是總覺得可否有些新變化,讓標題只佔了一部分,其他部分可以拿來貼圖片或是放其他的網頁元素,以我而言,當然就是可以放廣告或是最新訊息之類的,因為很多模板設計都有如此格式,最近試了一些模板,但是都會出現黃色三角形的錯誤訊息,因為也找不到錯誤的地方,無法修正,只好自己修改原有的模板加以應用,參考了網路上BlogU(部落格大學)的教法,終於把自己的網站弄成可以在標題欄加入其他網頁元素的格式了。


如何做呢?首先找到#header-wrapper的定義,然後將他分成兩部分,一個在左,一個在右
記得原先的模板要先備份
原來的
#header {
margin: 5px;
border: 1px solid #000;
text-align: center;
color:#ccc;
}

以一般為1024*768的寬度而言,可換成
新的
#header {
width: 300px;
float: left;
margin: 5px;
text-align: left;
color:#ccc;
}
#header-right {
width: 600px;
float: right;
color: #ccc;
margin: 5px;
padding: 5px;
}


然後記得不要展開小裝置範本,不然會找不到下列語法


,然後將原先的
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>


改成
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header-right' showaddelement='yes'>
</b:section>
</div>

就是多加入紅色這兩段敘述

再儲存範本即可。

其中width的寬度可以自行設定,但記得如果你的元件高度不能超過header-wrapper所設的高度,自己再加以調整,如下方標頭分成兩部分。


我把他放上了博客來的廣告(如下圖),你也可以放上Google AdSense 468*60大小的廣告,隨時都可變動,但如果你的背景是圖片式的就不太適合,會把圖片擋住,視自己需要再做變化。



參考來源:
Add a Widget Beside Your Header

39 則留言:

  1. hi...淺水好久..初次留言
    去年我的blogger成立..
    可是看到你那篇緣起--blogger
    寫的很有感覺...
    從成立以來你有新文章..都會來看
    今天..終於忍不住想留言了
    因為..很感謝一直提供教學....
    也想讓你知道..你真的幫助不少人..(包誇我)
    也希望能認識新朋友
    以後能互相交流...^^

    回覆刪除
  2. To Macoto,這個教學對你目前的版面好像不太適用,下次你改版時可以試試。

    To 木白柏,我也是潛水一族,真的很謝謝你的鼓勵,動力指數再次衝頂。

    回覆刪除
  3. http://ggupup.blogspot.com/

    弄出來的結果 欄位無法跟標題平行
    是不是width的寬度出了問題的緣故阿?

    回覆刪除
  4. 第一,你的寬度沒有定義
    第二,你沒有設定float左右
    可能你要再調整看看。

    回覆刪除
  5. 寬度沒有定義 ???
    數值要跟outer設定成一樣嗎

    回覆刪除
  6. 你的寬度是760px,至少要設下面這樣
    標頭左邊
    #header {
    width: 300px;
    float: left;
    margin: 5px;
    text-align: left;
    color:#ccc;
    }
    標頭右邊
    #header-right {
    width: 400px;
    float: right;
    color: #ccc;
    margin: 5px;
    padding: 5px;
    }

    可是你的定義都沒看到寬度及float
    應該是這個blog吧
    http://ggupup.blogspot.com

    回覆刪除
  7. 不错哦 ~

    很羡慕你会改模板哦 ~ 真强

    回覆刪除
  8. http://ggupup.blogspot.com/

    這樣算是成功了嗎..
    有沒有辦法讓碎碎念更往右邊靠一點阿...

    回覆刪除
  9. To Crorts,我也是在blogger奮鬥了一年,最近才比較慢慢會改,很多還要再學習,你比較厲害,會用Ubuntu,以前買了一本厚厚的書,教我怎麼用Linux,最後還是放棄。


    To 電光人,你的twitter大概是330px寬度,你可以將
    }#header-right {
    width: 400px;
    改成350px左右看看。

    回覆刪除
  10. Hello 你好,
    初次留言,
    一直在你的網站裡收穫頗多,
    blogger只用了幾個月..還是很不熟悉
    想問一下,
    要如何在標頭欄那兒加入橫向排列的連結呢?
    像是東京封印裡頭
    Home 關於我 日本資訊等等的標籤呢??
    非常感謝!!!

    回覆刪除
  11. Linux 上次使用了近一个月最终还是放弃咯!

    前几天把模板弄乱了! 想和你讨教些问题!求助哦!

    我的QQ : 519509868

    对了!你的字体太小、需要大一号 哦!

    回覆刪除
  12. To 不拉山,那是模板裡面就有的,我只是套用而已,Skyvee.net有介紹很多改造文章,你可以參考這篇,在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)

    To Crorts,可以寫信給我,大家一起討論,我沒有QQ,謝謝你的建議。

    回覆刪除
  13. 挖!!謝謝你拯救了我!!
    用了超久一直弄不出來很不甘心...
    現在終於會了!! 謝謝!!

    回覆刪除
  14. 成功就好,如果喜歡改造版面,可以多看看Skyvee的文章。

    回覆刪除
  15. 站長 我按照你的寫法

    後端控制台有出來(有變寬),可是我要拖曳去左邊(新增網頁元素)結果不行...請問我是哪裡設定錯誤?

    http://img68.imageshack.us/my.php?image=73883775fm5.jpg (圖的真相)

    我的BLOG http://wwwashleyolsen.blogspot.com/

    回覆刪除
  16. 你的標題列
    header-wrapper只有660px

    左標header 300px
    右標#header-right 1024px

    加起來就超過660px,你應該是搞錯了,還有你要不要給header-wrapper設個高度,會好一點。

    以你的語法來說並不適合這個排列組合,因為你好像要設計將右邊欄往上提,以我在Firefox看到的是如此,還是因為語法錯誤造成的。

    回覆刪除
  17. 我是要設定左右邊都可以新增網頁元素,可是我要拖曳去左邊無法拖曳。
    所以只好先放右邊。

    header {
    width: 300px;
    float: left;
    margin: 5px;
    text-align: left;
    color:#ccc;
    }
    #header-right {
    width: 1024px;
    float: right;
    color: #ccc;
    margin: 5px;
    padding: 5px;
    }

    我改成這樣版面變大,哪要如何把左邊增加網頁元素@@?

    回覆刪除
  18. header-wrapper的寬度
    =header+header-right
    你的設定已經超過

    另外我想如果左邊要再增加網頁元素,應該是將
    class='header'裡的maxwidgets='1' showaddelement='no'改成2以上,no改成yes

    回覆刪除
  19. 你好~看了你很多文章~很實用喔
    只是這個主題中
    我找了好久的head-wrapper都找不到,可以幫我看看我的嗎??
    只有看到main-wrapper 'content-wrapper'其他的
    我是初級者,以後美化網誌就看你的教學了^^"

    回覆刪除
  20. 你的不適用我說的這個模版,所以就找不到,而且你現在的模板本來就分兩邊,好像也用不到這樣的改造。

    回覆刪除
  21. 板大您好....我是參考你這篇教學以後又發現blog buster有提供加入兩個欄位在右邊的教學,所以我目前是套用那邊的方法,不過問題來了,就是我的標頭的文字敘述格式都跑掉了,我有試著去調padding,不過一調整個圖就跟著文字一起跑掉,請問這部份該怎麼解決好?

    回覆刪除
  22. 抱歉,我不知道你用哪個Hacks,而且也不知你確切要的排版位置,這樣很難回答你的問題。

    回覆刪除
  23. 請問一下有的模板沒有像你這網站的 Home 關於 ...那一排,假如我想要自己加上去,請問一下也是用這個方法嗎

    回覆刪除
  24. 功能選單,我記得skyvee.net有提過,但是他的網站目前沒法進去,我找到一篇相關的,你可以參考看看http://life.fotologue.eu/2007/09/banner.html

    回覆刪除
  25. 好的~我在研究研究,謝囉

    回覆刪除
  26. 第一次來到這裡,感謝版主分享經驗!
    好想趕緊更新templates來玩看看喔

    回覆刪除
  27. 你好~更改#header的width後排版會壓縮
    若不更改#header,直接新增#header-right則是會在標題下方出現可新增網頁元素。
    如何才能正確在標題右方新增網頁元素呢
    麻煩你開釋,謝謝!

    http://weimemo.blogspot.com/

    回覆刪除
  28. 本來就是要減少header的寬度才能容納header-right,不然會被擠壓到下方去。

    回覆刪除
  29. 阿...我沒說清楚
    減少#header的寬度之後不止排版壓縮,新增的網頁元素也會被安排在標題之下,並未出現在旁邊。

    回覆刪除
  30. 你這個Showcase Light模板並不適用這個改造,因為header-wrapper裡面還包含了navigation-center及navigation-wrapper兩個元件及背景的調整。

    回覆刪除
  31. 對呀!navigation-center及navigation-wrapper實在讓我好煩惱,摸不著頭緒~"~
    請問我可以參考什麼資料去作修改嗎?
    我想把最下方的燈箱放到上面去,一直麻煩你,謝謝唷

    回覆刪除
  32. 其實最簡單就是把那兩個元素刪除,但是要修改的地方蠻多的,但最近比較忙,沒法幫你測試。

    回覆刪除
  33. 你好,看過你這篇後便嘗試修改template
    碰到兩個問題想請教:
    1. 若不在#header-wrapper先設定height的話
    header、header-right在網頁元素那邊會重疊在一起
    是否有其他方法可解決?
    2. 是否有方法可單獨設定某一邊header的框線?
    例如我只要左邊的那個header有框線就好
    (因為目前嘗試都會發生框線卡在中間、無法正常顯示的狀況)

    感謝!

    回覆刪除
  34. To Nan,1、可否提供你的網址,或是適用的模板資源,很多都是某個元素裡面的定義影響的,資訊太少無法幫你解答。
    2、設定某一邊的框線,可用類似 border-left: 1px solid #000000;
    這個Google搜尋一般的"CSS 邊框" 都可找到。

    回覆刪除
  35. 抱歉,現在補上網址:
    http://testofnan.blogspot.com/

    這是兩個問題狀況的圖:
    http://picasaweb.google.com/lehuang12/Test#

    我是希望左邊那個海邊的圖有個框線能框住他

    回覆刪除
  36. 測試後都是有height才能分開,你的狀況,我的方式是將
    #header-wrapper {裡的背景圖
    background: url('http://lh5.ggpht.com/_gGQV4K8DLoE/S-7Ku_gjlBI/AAAAAAAABow/IjO_q5Cw1NQ/background.JPG') no-repeat;
    移到#header {這區,然後修改
    margin: 0px; /* 邊界綜合設定 */
    本來你設5px
    然後新增
    height:370px;
    border: 1px solid #cccccc;
    不過會有重複線條的部份。

    第二個方式,比較簡單,但是要微調寬度,修改成
    #header-right {
    width: 217px;
    margin: 0px;
    height:370px;
    float: right;
    text-align: right;
    color: #ccc;
    padding: 0px;
    border-left: 1px solid #cccccc;
    }

    其實圖片有框線,可以利用修圖軟體加上右邊框也是可以的,這是偷吃步的作法。

    回覆刪除
  37. 你好,我剛申請了BLOGGER沒多久,我是用新版範本,我接著教學做時找不到#header-wrapper,是不是代表新版的改不到?

    回覆刪除
  38. To Aries,Yes,新版的不適用這裡的內容。

    回覆刪除

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