v 如何將標題(頭)分兩欄,加入網頁元素 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

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

Related Posts Plugin for WordPress, Blogger...