2013年9月25日星期三

Blogspot教學:為文章加框線


一般Blogspot的範本,並沒有為文章加框線,只有用日期、文章標題把文章分開。如果博客一天發幾篇文章,單靠文章標題分開文章,未必夠清晰。




大家有細心留意《豆丁主義》的版面,就會發現豆丁在每篇文章加了外框。如下圖,9月14日,豆丁發了兩篇文章,都有框線把文章清楚分隔。


要加框線,有兩種方法:



方法一)使用有文章框線的範本

最簡單的方法是使用別人設定好的範本。

到「範本」,按「自訂」。

選擇「浮水印」版面,就會立刻看到文章有清晰的分隔。

簡單方法的代價是你要重新調整你的網誌版面,而且你不能選擇方框的顏色、線條等。




方法二)修改網誌的HTML碼

注意:修改HTML碼前,請先作備份!
>>閱讀《美化Blogspot,備份要緊!

請到「範本」,按「編輯HTML」。

進到HTML頁面,隨便按一下文字部分,然後按Ctrl+F,尋找<b:skin>。大家就會看到<b:skin>與</b:skin>中間部分都關起來了,請按數字列的黑色箭頭,開啟所有有關skin的HTML碼~



注意:由於大家使用的範本可能略有不同,HTML碼的排列也未必完全相同、使用的代碼名稱也會有所不同。(豆丁太忙了,未能幫大家找出每個範本的HTML碼,請見諒......)


豆丁使用的範本(Simple Template),<b:skin>內分成不同部分,我們要找 /* Posts

然後往下滾一點,嘗試找出 .post 部分的HTML,就會找到這樣的:

請大家在 margin行下面加入以下HTML碼(藍色字):

  border:5px #FFA62F;
  border-style:solid;
  border-radius:10px;
  background:#FFF5EE;




豆丁來解釋一下吧:

  border:5px(<--這是框線的粗幼) #FFA62F(<--這是框線的顏色);
  border-style:solid(<--這是框線的款式);
  border-radius:10px(<--這是框線的圓角有多圓);
  background:#FFF5EE(<--這是框線內文章的底色);


顏色的HTML碼

要參考顏色的HTML碼,可到:
http://www.computerhope.com/htmcolor.htm

注意:顏色碼都以「#」開始~




框線款式的HTML碼

為了方便大家選擇框線款式,豆丁把它們全列出來吧^^


solid
double
dotted
dashed
groove
ridge
inset
outset






設定距離

豆丁上面雖然加了框線,但是文章底部的灰色部分正好踏在框線上面啊!

所以,大家想要更美觀,就要在剛才的HTML碼(藍色)後,多加這兩行(紅色):


  margin:30px 0px 30px 0px;
  padding:10px 10px 10px 10px

上面的'margin'與'padding'都分別有四個數值,是順時針方向﹣﹣上、右、下、左的數值。

Margin是文章與文章之間的距離。豆丁把上、下數值定在30px,大家可以自行修改。

Padding是文章內部與框線之間的距離(紅色箭頭指着的地方):

你看,調整padding後,灰色部分沒有再踏着框線了^^

修改好HTML,記得儲存啊!



>>閱讀豆丁的其他《Blogspot教學

52 則留言:

  1. 嘩!正野啊!多謝分享!

    回覆刪除
  2. 真係find 一日得閑就整整佢先得

    回覆刪除
  3. 你真係好 pro! 超勁嘅豆丁老師,多謝妳!

    回覆刪除
  4. 咁啱我當初揀咗watermark template, 唔駛改了.
    發覺轉咗嚟blogger之後, 真係要去學啲html先攪得佢掂.

    回覆刪除
    回覆
    1. 其實,我覺得Blogger的基本設定,已經很不錯~^^ 只是可能大家太習慣Yahoo! Blog,想Blogger可以做到大部分Yahoo! Blog的功能,那就需要一點HTML。

      刪除
  5. 多謝分享!!我跟住你整左啦~!!!:)

    回覆刪除
  6. 非常感謝豆丁解決我嘅問題,再一次謝謝你。

    回覆刪除
    回覆
    1. 已跟足豆丁咁打,儲存完唔知點解唔成功呢?

      刪除
    2. 那應該是因為不同範本的HTML碼不同,又或是「自訂」範本後出現HTML碼改動。

      你可以嘗試選擇新的範本,重新設定網誌的版面,再做上面的步驟。但這也不能保證成功(要仔細看看是哪些HTML碼導致問題)。

      刪除
  7. 你真係好有研究精神.

    回覆刪除
  8. 豆丁,你過咗weshare啦!果邊環境感覺如何?

    回覆刪除
    回覆
    1. 我沒有真正過去,只會偶然把Blogspot文章貼到那裏~^^

      暫時覺得Weshare版面有點亂,但是他們應該還在處理吧,應該十月左右就會知道他們辦得怎麼樣~^^

      刪除
  9. 謝謝大家喜歡這篇文章^^ 開心~~~~~~

    回覆刪除
  10. 謝謝豆丁!
    小禺下次改版面時會加入html~ (暫時都係用住範本先~~^^)

    回覆刪除
  11. 豆丁老師,我係新手,正考慮搬家去何處的疑惑?我剛剛申請咗googleblog,新增網址要填的地址,我不知要什麼地址,是居住地址嗎?

    回覆刪除
    回覆
    1. 不要填住址,Google不會問這樣的問題。你是說「設定」的「新增網址」嗎?你不是已經有""http://angelbaby20120530.blogspot.com/嗎?除非你另外再買了一些網名,否則這部分毌需再填。

      刪除
  12. 回覆
    1. 這個HTML尚算容易的~ 照着做,一定成功啊^^~

      刪除
  13. 豆丁, 您好! 謝謝您提供了咁詳盡ge資料, 會跟資料慢慢去摸索.

    回覆刪除
  14. 回覆
    1. 我去了你的網誌那裏看~ 有的啊~ 記得:進到HTML頁面,要隨便按一下「文字部分」,才按Ctrl+F尋找啊~

      刪除
    2. 有很多 ".post", 但都無你個句一樣的

      刪除
    3. 因為範本不同,可能HTML代碼也有不同,可以試試.post-body {吧(或類似的)〔一邊試一邊預覽,不成功就按「back」,再試另一個~〕。記得改之前要備份啊~

      刪除
    4. 火火妹,今天,我幫魚兒看了她的HTML碼,發現只要找到 /* Posts那一行,在下面加下面的HTML碼即可(再參考文章的教學以更改數值^^):
      .post {
      margin: 0 0 $(post.margin.bottom) 0;
      border:5px #FFA62F;
      border-style:solid;
      border-radius:10px;
      background:#FFF5EE;
      }

      祝成功~

      刪除
  15. 豆丁老師你好...魚兒只搵到這...找不到一樣樣的...不知在何處加....請賜教...
    /* Posts
    ----------------------------------------------- */
    .main.section {
    margin: 0 20px;
    }

    body .main-inner .Blog {
    padding: 0;
    background-color: transparent;
    border: none;
    }

    .main-inner .widget h2.date-header {
    border-bottom: 1px solid $(widget.title.border.bevel.color);
    }

    .date-outer {
    position: relative;
    margin: $(date.space) 0 20px;
    }

    .date-outer:first-child {
    margin-top: 0;
    }

    .date-posts {
    clear: both;
    }

    .post-outer, .inline-ad {
    border-bottom: 1px solid $(widget.border.bevel.color);
    padding: 30px 0;
    }

    .post-outer {
    padding-bottom: 10px;
    }

    .post-outer:first-child {
    padding-top: $(post.first.padding.top);
    border-top: none;
    }

    .post-outer:last-child, .inline-ad:last-child {
    border-bottom: none;
    }

    .post-body img {
    padding: 8px;
    }

    h3.post-title, h4 {
    font: $(post.title.font);
    color: $(post.title.text.color);
    }

    h3.post-title a {
    font: $(post.title.font);
    color: $(post.title.text.color);
    text-decoration: none;
    }

    h3.post-title a:hover {
    color: $(link.hover.color);
    text-decoration: underline;
    }

    .post-header {
    margin: 0 0 1.5em;
    }

    .post-body {
    line-height: 1.4;
    }

    .post-footer {
    margin: 1.5em 0 0;
    }

    #blog-pager {
    padding: 15px;
    }

    .blog-feeds, .post-feeds {
    margin: 1em 0;
    text-align: center;
    }

    .post-outer .comments {
    margin-top: 2em;
    }

    /* Comments
    ----------------------------------------------- */

    回覆刪除
    回覆
    1. 如果找不到「.post」這個,就自己加吧^^

      刪除
    2. 豆丁老師...魚兒唔識...要加在邊度...賜教...賜教...

      刪除
    3. 那是因為不同範本的HTML碼不同。魚兒,我找不到你的網誌… 不知道你的情況如何… 覺得太難的話,就使用「方法一)使用有文章框線的範本」吧~

      刪除
    4. 豆丁老師你好...好開心回應...多多指教...
      也試過套用範本..排得整齊..但橫隔線底...出現一片白色..很不靚...請賜教...
      在谷歌很難找到自己的網誌...這是魚兒的網誌...好歡迎你...
      魚兒 愉怡詩詞...谷歌
      http://trtreyty.blogspot.hk/2013/09/blog-post_26.html
      魚兒 愉怡詩詞...隨意窩
      http://blog.xuite.net/yw2013910a/blog/111479936

      刪除
    5. 魚兒,請找出 /* Posts,在它下面加下面的HTML碼吧(詳細數值更改,請再參考文章的教學):

      .post {
      margin: 0 0 $(post.margin.bottom) 0;
      border:5px #FFA62F;
      border-style:solid;
      border-radius:10px;
      background:#FFF5EE;
      }

      刪除
    6. 豆丁老師你好...好開心回應...謝謝賜教...
      問清楚.....是加在...直線上...還是直線下...
      /* Posts
      ----------------------------------------------- */

      魚兒蠢笨...別笑..我備份後...點解內沒有嘢睇...

      刪除
    7. 試加....
      /* Posts
      .post {
      margin: 0 0 $(post.margin.bottom) 0;
      border:5px #FFA62F;
      border-style:solid;
      border-radius:10px;
      background:#FFF5EE;
      }
      ----------------------------------------------- */

      或這樣加...
      /* Posts
      ----------------------------------------------- */
      .post {
      margin: 0 0 $(post.margin.bottom) 0;
      border:5px #FFA62F;
      border-style:solid;
      border-radius:10px;
      background:#FFF5EE;
      }

      或另樣加...因魚兒在谷歌撞了好多板...唔敢亂動了...勞煩勞煩

      刪除
    8. 豆丁老師你好...有問題請教...
      發覺整了多篇後...網友在不同的網誌留言...本人是不知的...不可能篇篇去瀏覽...應點設計......網友最新回應......請賜教..賜教...
      魚兒問題多多呢...

      刪除
    9. 在直線下。你想備份後看什麼????

      有關留言的問題,可以看看《【留言】教學:留言通知?回應通知?檢視?設訊息?》
      http://seeddauding.blogspot.com/2013/09/blogspot-comments.html

      加油啊,魚兒~

      刪除
    10. 豆丁你好...好開心收到指教...魚兒忙搬家...驚加錯...有排攪...
      好彩...你這裡有好多教學...幫了好多蒙查查的網友...功得無限...
      謝謝你叫魚兒加油...好有動力...

      刪除
    11. 豆丁你好...你教學也睇過了..謝謝分享...
      是想如何在卜的左邊...設定...『最新網友回應』..你卜也沒有..這樣不用睇電郵也可知...因為電郵多到沒法睇..全是網友搬家的新舊網誌通知...
      魚兒也要去搬家了...

      刪除
    12. 有關『最新網友回應』欄,請看:
      《最新留言欄(不含網主回應)》(2013.10.01)
      http://seeddauding.blogspot.com/2013/10/recent-comments.html

      魚兒,你說的檢查留言問題,就在上次我給你的文章內:
      《【留言】教學:留言通知?回應通知?檢視?設訊息?》
      http://seeddauding.blogspot.com/2013/09/blogspot-comments.html

      你開始搬家了?加油啊!!!!!

      刪除
    13. 豆丁老師你好...好開心你回應...謝謝好有份量的教學...
      會慢慢學...暫忙搬家..想將雅虎自己搬來谷歌...前些的文章格...搬來會變了又要重新撿過好忙碌...
      原來谷歌...不是谷丁要落腳的家...因何是這樣...
      這裡好嗎...http://seeddauding.blogspot.hk/2013/10/from-yblog-to-weshare.html

      刪除
    14. 雖然開了WeShare帳戶,但是豆丁還是比較喜歡blogspot^^~ 因為這邊的速度和穩定性都很好~~~~~~~ 所以,豆丁只會把某些文章貼到WeShare呢~^^

      刪除
  16. 我加左呢個都出唔到
    /* Posts
    ----------------------------------------------- */
    .post {
    margin: 0 0 $(post.margin.bottom) 0;
    border:5px #FFA62F;
    border-style:solid;
    border-radius:10px;
    background:#FFF5EE;
    }
    請問如何解決??

    回覆刪除
    回覆
    1. 我去左你個網誌度睇,發現你用的範本同我用嘅唔同,所以代碼也有所不同。我用的是Simple Template… (你或許可以試試改範本,但這樣要重新改動你的版面設定… 抱歉,我太忙了,未能幫你看如何修改你的範本的HTML...)

      刪除
  17. 你好:請問一下我用這個方式成功完成,如果我希望連日期的區域一起圈進來應該如何改??另外,側邊欄的小工具我可以改哪個區塊來達到一樣的效果??先謝謝您
    http://www.hairblog.tw/

    回覆刪除
    回覆
    1. 想把日期圈進框內,理論上把框線內文的底色調成透明(background:transparent),然後調節"padding"和"margin"(負數值)。但是,我在測試版試過,當日期進到圈內,padding怎樣調較也不再有變化,最多只能重疊。

      至於側邊欄的小工具,你看看你的HTML有沒有以下這一項:
      .sidebar .widget {
      我沒有試過,但理論上修改方法跟這文章的方法差不多。

      記得修改HTML前要先把現有的template備份啊!

      刪除
    2. 我後來改用新增一個.date-outer的方式就可以連日期一起框進來了
      另外,你所說的側邊欄,我也用你說的.sidebar .widget 已經順利成功
      謝謝你!以套用到我的部落格了^^

      刪除
  18. https://trythebests.blogspot.hk/
    做到了多謝

    回覆刪除

Related Posts Plugin for WordPress, Blogger...