2008年5月25日 星期日

幫邊欄的網頁元素(widget),自訂不同的漂亮圖示

每次看到自己的邊欄(網頁元素)都只有標題文字,有時候會加上背景顏色或是加框線,但總覺得有點單調,想起前陣子BlogU有教到「Unique Background Images for Widgets」,幫你的網頁元素加上獨特的背景,於是這次改版我就套用這個方法,將自己的網頁標題加上獨特的ICON,請注意,是每個網頁元素都用不一樣的圖示,而非在邊欄的標題列設定共同的圖樣,如下圖顯示。


如果統一在邊欄的widget加上圖樣,應該很多人都會了,就是找到
* Sidebar Content這一區塊,有的模板可能沒有特別標明,就是定義sidebar區塊這段的程式碼,如果真的找不到可以留言給我,我再幫你找。

通常這個定義名稱會是 #sidebar h2 {
h2代表標題,而有的可能會有#sidebar1、#sidebar2甚至#sidebar3,你都可以分別為這些區塊定義不同的背景圖片,加入的語法如下:
Background:#背景色6碼 url('圖片網址') no-repeat;
記得調整你的margin及padding來配合你的圖示。

而要將每個邊欄標題都設不同的背景圖樣,有一個不方便的地方就是,每次刪除網頁元素都會影響他的定義與template,如果你是常修改邊欄的版主,我想自己使用上要費心點。

譬如我新增了一個html/script的網頁元素,標題命名為「隨機文章」,產生後你可以到你的模板裡去找這個元素的程式碼,按下ctrl+F5,會跑出尋找的選項框,輸入'隨機文章',就可以找到這段語法,如下圖


你可以看到隨機文章的定義值為 id='HTML9',這就是我們要的東西,然後在sidebar的定義區塊新增一個名稱為HTML9的描述即可,語法如下:

#HTML9{
margin:0;
background:url('圖片網址') no-repeat;
}

如下圖 ,

這個定義視你新增的網頁元素為何,如果是html/script語法,就是以HTML為名#HTML1,如果是新增連結則是以#LinkList1,而新增文字則視 #Text1,新增索引就是# BlogArchive1等等,不同型態的網頁元素,名稱都不一。

注意事項:
‧ 新增的HTML文字大小寫要一樣,例如#HTML9就不能用#html9,這樣系統會找不到。
‧ 如果把這項隨機文章Widget拿掉了,記得#HTML9這個相對定義也要拿掉,不然儲存樣版時有時會出現錯誤,或是有時你後來新增的元素會套用這個背景圖示。
‧ 如果有套用摺疊標題Hacks的可能就不適用了,因為我自己也沒使用這Hacks,所以不知結果如何。


我用的圖示ICON是20px*20px的GIF透明圖,可以套用在各種背景顏色,因為考慮到IE6對PNG的支援性不足,以後改版完成應該會改成PNG檔,其實如果可以的話,建議使用PNG圖,會比較漂亮,不會出現鋸齒狀。

另外的邊欄的標題文字 #sidebar1 h2,我就會調整為
padding: 0px 0 0 25px; (距離左邊25px,因為我的圖示20px,中間有5px的間距看起來比較美觀)
text-align: left; (靠左邊)

這些可以視你自己的模板配置再作調整,當然你也可以幫整個widget弄個背景圖,我的方法是只有在標題欄位,也可以用個較大的圖,像下圖這樣,不過自己要把位置調得漂亮就是了。


其實一路走來Blogger的自由度真的很高,只是都要慢慢努力,今天能夠這樣改版面,也只是從基礎慢慢磨練的,也感謝很多網路上的高手,改版不用急,常常改就知道訣竅在哪裡,而且切記一定要備份,多看些Css語法的書籍或是參考網路上的資料,都是對改版有幫助的,而且從中學到的也都是自己的,如果不熟語法,弄個簡單清爽有基礎功能的網誌也能快快樂樂的寫部落格的。

2008.6.8更新
感謝純白色-龍,網友提供邊欄標題加上圖示的方法,因為綸太郎寫的是在單獨的網頁元素加上背景圖片,如果想單獨為網頁元素的標題欄加上圖片,可以多加下列語法
#元素定義名稱 h2{
background: url('圖片網址') no-repeat;
}


參考來源:
BlogU:Unique Background Images for Widgets

延伸閱讀:
Abin's Tech Note: 在版面格式中放入小圖示
WEB2.0 立體 icon 圖案蒐集

42 則留言:

  1. 這篇超實用的XD

    好想改....


    但要用又好麻煩XD"~~

    回覆刪除
  2. 是很麻煩,等你版面固定好再來玩比較好。

    回覆刪除
  3. 感謝你的鼓勵,熱血男兒。

    回覆刪除
  4. 不知道為什麼

    我在設定

    #Profile1{
    margin:0;
    background:url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;
    }

    時,就行不通了...

    我也找不不到我的sidebar設定標題距離在哪...

    回覆刪除
  5. 你的語法有問題,冒號變成css碼
    我看到的是這樣,
    #Profile1{
    margin& # 65306;0;
    background & # 65306;url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;

    回覆刪除
  6. sidebar設定標題距離,在這區設
    .sidebar h2 {
    margin: 0;
    padding: 4px 5px;
    background-color: #333333;
    font-size: 100%;
    color: #cccccc;
    你可以在padding裡修改。

    回覆刪除
  7. 變CSS語法部分,

    這個我有請教KA大過(回應區教學作者)

    他說這是正常不會影響的...

    因為我的語法很多段在儲存後會變那樣..

    我也不解是為什麼...


    我再試試看好了..謝謝

    回覆刪除
  8. ..原來是我忘記把全形的冒號改掉了


    不過出現後,卻在後面被黑黑那條檔住了,有什麼辦法解決嗎?

    回覆刪除
  9. 你只能選一個背景,要去掉sidebar h2的background的敘述。
    background-color: #333333;

    或許在定義你的profile1{
    background:url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;
    可以試著加入背景,如
    background: #333333;url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;
    看可不可以出現橫條,我是都沒有用背景顏色,只有貼圖。

    回覆刪除
  10. 語法錯誤多了一個分號,正確如下
    background: #333333 url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;

    回覆刪除
  11. 我原本在sidebar h2的背景語法是這樣寫
    background: $sidebarTitleBGColor;

    我就照你的方法

    將sidebar h2的背景去掉
    將profile1改成
    background: $sidebarTitleBGColor url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;


    卻發現,他指定的profile1是整個區塊,
    無法只讓標題出現背景

    我就想到,那改成指定標題就好啦..
    用了以下語法就成功了~XD

    #Profile1 h2{
    background: $sidebarTitleBGColor url('http://lonyice.googlepages.com/disk_jockey_32.png') no-repeat;
    }

    忽然覺得自己好像會寫CSS了~XD
    可以建議有用標題背景顏色的這樣改...

    回覆刪除
  12. 其實兩者選一種會比較好,不過你也很厲害,融會貫通,很棒!最近在忙獨立架站的事,有空再補上你的教學了,感恩。

    回覆刪除
  13. 您好^^

    之前就是因為我選用的內建模板並沒有列出連結列標題區塊的程式碼,所以那個部分我一直無從修改,直到看到您寫的這篇,真是幫了我一個大忙..!!

    我是最近一個禮拜才搬到Blogger來的,雖然一切都要自己來,但是我還挺喜歡的^^...

    還有,我一定要說的是,我真的很喜歡你的Blog喔!目前看了很多篇您的文章,都對我很有幫助,也看的出來您是很用心的在寫,很用心的在經營。繼續加油^^~~我會常來看看的!!請多多指教^^

    回覆刪除
  14. 不好意思,剛剛有個問題想問忘了問...
    請問您是否知道"張貼意見"這個字樣的標籤名稱是什麼?因為我想將這個字樣的位置稍微移動一下,但是一直找不到這個標籤。

    回覆刪除
  15. 你的模板上這個部份CSS沒有定義,你必須展開小裝置,找到"張貼意見"這部份(有兩個,前面那一個就是了)直接在張貼意見用空白來調整,空白的語法為 看看行不行,歡迎常來,你的部落格很棒,設計的非常有自己特色。

    回覆刪除
  16. 很抱歉,展開小裝置後的部分我就幾乎看不懂了呢,也不確定自己找的地方對不對...所以剛剛的測試都是失敗的。

    嗯,謝謝你的誇獎,我也還在學習,一起加油吧。

    回覆刪除
  17. /* Posts這區,找到
    .comment-link {
    margin-left:.6em;
    }
    裡面加上一個敘述
    padding-left:55px;
    看看可不可以。

    回覆刪除
  18. 剛剛照您說的下去試試看,"張貼意見"還是不動如山,看來好像也不是.comment-link ...

    回覆刪除
  19. 如果變數都不對,我只好實際測試了,不過是針對你這個模版Minima,展開小裝置,找到<data:postCommentMsg/>應該是下面那一個沒有用h4包圍的那一個,在這段語法
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    前面加上<span style='padding-left:55px;'>最後面也要加上</span>把它包起來,寬度你可以自己調整,這樣應該就可以了。

    回覆刪除
  20. 這次成功了唷!~!
    謝謝你的幫忙^^!

    回覆刪除
  21. 還是要實際測試,這次學到了,有的東西用看的也不準。

    回覆刪除
  22. 您好
    您的blogger教學,讓我學到很多,
    我有時遇到裝修部落門面的問題
    都來這學習..
    但我有個疑問..
    不曉得能不能請問您,
    我的sidebar是可摺疊的,
    但要怎樣弄成這兩個blog一樣
    http://imsuperbad.blogspot.com/
    http://2fish.nobody.jp/index.html
    用圖檔代替id='HTML

    我曾嘗試用..試看看
    #HTML9{
    margin:0;
    background:url('圖片網址') no-repeat;
    }

    但弄起來並不是我想要的那個
    請問,我要在那改

    謝謝您

    回覆刪除
  23. 你的意思是要標題列是用圖片代替吧,我文章最後有提到,加上h2的定義即可,不過像雲淡風輕,就要一個一個設定標題背景圖就是了。

    回覆刪除
  24. 謝謝您
    這麼快回覆~
    讓我想到在折疊的元件語法後加上改成圖片了..
    太感激..

    回覆刪除
  25. 想請問一下,我下載的一個模板,置於右邊欄最上面的網頁元素,會很靠近表頭圖片(和左邊內文不齊平),然後標題的字(Blog文章)會被切掉一些,我把表頭圖片縮小也沒用。請問這該怎麼改動?也請教我一下網頁元素標題的文字怎麼改尺寸和顏色。此模板的預設實在太大有點嚇人。另貼出來的照片下面會有一條虛線請問該怎麼去掉呢?謝謝!我的測試網頁為http://mayblog2.blogspot.com/

    回覆刪除
  26. 找到#sidebar {
    加上margin-top: 10px;
    距離自己可以微調。

    圖片不要有虛線,加上
    img {
    border: none;
    }
    其他可參考http://01mistery.blogspot.com/2008/08/blogger-template-css.html
    或是
    Blogger模版CSS語法細部介紹(下)
    http://01mistery.blogspot.com/2008/09/bloggercss_27.html
    這系列的文章,可能你會對模板裡的元素較為了解。

    回覆刪除
  27. 謝謝,大部分問題已解決。不過我在img{裡面加了border:none;後,貼圖最下面還是會有條虛線耶!游標移到圖片上時虛線還會變實線…另有個問題…貼圖時選置左對齊,但實際圖片和文字卻不是和左邊界齊平而有點內縮,我試著加margin-left: 0px進去,也沒改善,這該怎麼改呢? >.< 謝謝!

    回覆刪除
  28. 你找一下語法裡有dashed;的,試著把它拿掉看看是否有用,我猜應該是
    #content .entry a:link, #content .entry a:visited
    {
    border-bottom:#963 1px dashed;
    }
    這裡的
    border-bottom:#963 1px dashed;
    作怪,因為你的img有兩個定義,所以可能無效。

    另外#content p img.left {
    裡面的margin及padding調整看看,可能影響到對齊。

    回覆刪除
  29. 這陣子忙沒什麼時間測試我的新模板,想說先來謝謝你之前的幫忙。

    貼圖下面會有虛線的問題,我是把#content.entry...visited和active這二個語法都刪掉後才正常。不然只刪visited的話,會變成一條實線在下面。

    貼圖會自動內縮,和文字不對齊的問題,很詭異的,我什麼都沒調動的情況下,新po文裡面的圖片就是正常的,該不會是blogger有點秀逗吧…

    總之非常謝謝你熱心的幫我解答。讓我這個不懂程式的人也能把手上的模板按自己的想法改到目前的程度:)

    回覆刪除
  30. To May,不客氣,我也是在學習中,有些模板真的是要自己親自測試才知道問題在哪。

    回覆刪除
  31. 你好,在以龜速的方式修改模版時,我又遇到幾個問題想再請教你一下

    1.我這個模版側欄的各個網頁元素上下間距都好大,我試改了幾個地方都沒有反應,想請你指點一下。

    2.我試著想在網頁元素間加上分隔線,我在 #sidebar ul這裡加了border-bottom:#ddd 1px dashed; 後,竟然有的網頁元素下方會出現分隔線,有的又沒有,尤其是有幾個java scrip語法貼上去的東西都沒反應(但有的又有),我實在搞不懂

    3.因為一有sidebar字樣的地方我都有加分隔線語以去試,發現了在#sidebar li { 加上border-bottom:#ddd 1px dashed;,我的每個條列項目下都會有底線,我是覺得不錯,但若搭配第二項的動作,最下面一個條列項目的底線會和網頁元素底線靠很近,看起來很不美觀,網頁元素的底線和最後一個條列項目的底線之間的距離能調嗎?

    4.在我表頭圖片上我有用一個標籤,原本的模板上的標籤和照片左邊是對齊,因我加大了內文和邊欄的寬度,表頭圖片也跟著加大了,但標籤位置卻沒跟著動,就變成離左邊有點距離。請問這標籤該加什麼語法讓他能和照片最左邊對齊呢?

    我的測試網頁http://www.mayblog2.blogspot.com

    謝謝!

    回覆刪除
  32. To May,1.新增一個
    #sidebar .widget {
    margin-top: -15px;
    }
    距離自己調整,記得#sidebar或許也會影響到,所以sidebar有必要時也要調。
    2.ul li是清單的定義,所以要你的widget內容是清單才會顯示那個作用。
    3.你可能要弄清楚ul和li的不同,通常排列是這樣
    <ul>
    <li>物件清單1
    <li>物件清單2
    <li>物件清單3
    </ul>
    所以你只要定義li的部份,你再試看看,不用重複。
    4.#navigation {
    width: 760px;
    這裡也要同時加寬,看你版面container加多少,一併調整。

    回覆刪除
  33. 呵呵~你好~我想问下东西...
    www.sotsothyre.blogspot.com
    我想把那个Tab和标题稍微贴紧
    还有走马灯和Tab也贴紧
    并且和下方的Post比较贴近

    请问要如何编辑这样的Css呢?

    回覆刪除
  34. 你給的網址錯了,
    找到.tabs-inner {
    margin: .5em 0 0;
    padding: 0;
    }
    將margin改成margin:0 0 0; 看看,就是調整邊距
    調整跑馬燈,新增一個
    #HTML2 .widget-content{
    margin-top: 0px;
    }
    這在文章裡都有提到,自己要試看看。

    回覆刪除
  35. 作者已經移除這則留言。

    回覆刪除
  36. 我用同一個模版改了是有效的
    margin:0 0 0;
    你的語法是
    margin: .5em 0 0;0 0;
    怎麼還是有.5em,而且語法錯誤
    其實我覺得中間有點間距比較漂亮
    微調用px或是pt都可,0就不用單位了。

    回覆刪除
  37. = =抱歉啊錯手= =
    那個.5em是修改前,
    不過后來行了=)

    謝謝你哦 A_A

    回覆刪除
  38. 你好, 關於邊欄加背景圖的問題, 已成功改了, 但是不知道為什麼, 我的背景圖只顯示了一秒, 下一秒就消失了, 謝謝!

    .sidebar .widget h2 {
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }
    #Profile1{
    background: transparent url('http://i17.photobucket.com/albums/b89/lolitaxcc/Sozai/imgf0631bcdzik4zj.png') no-repeat;
    }

    回覆刪除
  39. 會不會是因為 transparent這個單字造成的,去除掉看看會不會正常。
    或是定義為 #Profile1 .widget-content {
    background: url('http://i17.photobucket.com/albums/b89/lolitaxcc/Sozai/imgf0631bcdzik4zj.png') no-repeat;
    }
    你再試看看。

    回覆刪除
  40. 成功了, 真的非常感謝你呀!!!
    好厲害!!

    回覆刪除

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