如何在Yahoo奇摩部落格顯示code高質感語法框

玩樂家 | 2/20/2010 | Share on Facebook
本文 由 玩樂部落格大全 發布!文章引用須遵守 引用須知 ,轉貼時請勿刪除本行! 如何在Yahoo奇摩部落格中,顯示這麼具有高質感的語法框呢?其實這很簡單,這是利用CSS做出邊框效果並且加上背景圖片,就可以顯示出這麼好看的語法框,現在只要在CSS增添一段語法,以後發文的時候... 本文玩樂部落格大全發布!文章引用須遵守引用須知,轉貼時請勿刪除本行!

如何在Yahoo奇摩部落格中,顯示這麼具有高質感的語法框呢?其實這很簡單,這是利用CSS做出邊框效果並且加上背景圖片,就可以顯示出這麼好看的語法框,現在只要在CSS增添一段語法,以後發文的時候,要顯示語法框只要在文中加上code標籤,就可以自動顯示這麼高質感的語法框!只要你的部落格網誌版面允許你修改CSS,可以達成這種效果!像Blogger、無名小站、Yahoo!奇摩部落格等等都可以這樣使用!



喔喔~~你只能引用到這裡喔~~~引用時須知"引用須知"
一、修改CSS
在此之前別忘了備份你的CSS。首先把下面的語法(程式碼)複製起來,然後進到你的Yahoo奇摩部落格管理部落格=>面板設定=>自訂樣式,然後把語法框的語法放在最後或找個好地方,就可以按下"確定"

code, .code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 8pt; overflow:auto; background: #f0f0f0 url(http://img504.imageshack.us/img504/599/codebg1742178.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:200px; line-height: 1.2em; }





二、運用
以後在Yahoo奇摩部落格發文時,先勾選"觀看HTML 原始碼",然後把語法放在<code>......</code>之間,就可以顯示語法框了!別忘了要把"<"和">"轉換成&lt;與&gt;後,才能讓語法不會在網頁上執行,不過遇到一長串的語法怎麼辦?請點這裡,讓HTML Encoder自動幫你轉換。






三、完成圖
這就是語法框在Yahoo奇摩部落格上執行的效果!

我是高質感語法框~~



Share on Facebook

歡迎幫我們在玩樂家粉絲團點個讚!獲得最新好文!

玩樂家歡迎你加入我們,Google +1獲得最新好文!
Related Posts Plugin for WordPress, Blogger...

2 則留言 :

  1. 說是在話,,新手真的看不懂,,如果可以製作細節,,新手可以學習不會放棄,,,個人是新手說一下而已,,謝謝喔^.^

    回覆刪除
    回覆
    1. 請問您是哪裡不懂呢?歡迎提出來~玩樂+會針對您不懂的地方再對教學再做修正~

      刪除