2010年6月5日 星期六

為部落格文章加上色彩繽紛的重點底線

http://blogger-script-study.blogspot.com/2010/06/put-underline-on-your-blog.html

瀏覽別人的部落格時,有時會看到有些部落格主會在某些文字底下劃上色彩繽紛的畫筆底線,讓人知道格主想要強調的重點在這裡,可是我的部落格怎麼沒有這些特效,到底這是怎麼做到的呢?

其實這一點都不難,只要你擁有下面幾項技能,那你也可以擁有這些特效,但也不是那麼容易啦,下面我們就來介紹一下如何擁有這些「色彩繽紛的重點底線」。

1) 取得底線的圖檔,也可以自己畫。

要 gif 格式喔,而且要設定底色為透明。這裡先提供一個粉紅色底線的圖檔,有需要的可以在這個圖示上面pink1_underline按滑鼠右鍵另存圖檔,也希望你可以自己畫出你自己的底線。

2) 將圖檔放到網路可以讀取的地方。

我是放在 Photobucket,這裡有 1 GBytes 的免費的圖檔放置空間,部落格文章可以直接連結,一個月的流量限制在 25 GBytes,不像 Google 的 Pisasa 限制只能用在自己的部落格,外連很難,而且還要讓自己部落格的文章連到Pisasa還要好幾個步驟。只可惜全是英文,但應該還難不倒你。

3) 稍具修改 Blogger 的 html 能力。

因為需要修改 Html 的模板,所以要稍微有點基礎。目前方法好像只適用在 Blogger 及 WordPess 這類可以自行修改模板的部落格平台上。

照例我們還是以 Blogger 為例,進到 Blogger 的後台,不會進去就參考這裡【如何修改 Blogger 板型】,選取【版面配置】或【設計】,然後點選【修改HTML】,記得先下載備份完整範本。

然後在「修改範本」中找到【body{…}】,在其前面加上一段程式碼。

  • 其中 【PINK_UNDER】就是關鍵字,可以自訂,這裡的大小寫必須完全正確,也就是說後面引用的時候,必須跟這裡所定義的大小寫一模一樣。
  • 【http://…】所跟著的網址要指到底線圖檔所擺放的網路空間。
.PINK_UNDER {
text-decoration: none;
background: url(
http://i607.photobucket.com/albums/t7/BlogScriptStudy/pink_underline.gif) repeat-x 100% 100%;
padding-bottom: 0px;
}

draw_underline01
記得要按【儲存範本】。

4) 以後在文章中遇到要加底線的文字,必須切換到 HTML 格式,然後在其文字前面加上<span class=”PINK_UNDER”>,並在其文字後面加上</span>。

挺麻煩的,但這是我目前所知道的方法。比如說這段文字的【粉紅色底線】要加底線,就要寫成

比如說這段文字的【<span class="PINK_UNDER">粉紅色底線</span>】要加底線

接下來就看你自己如何發揮了,  如果你在操作上有任何問題,歡迎留言討論。


延伸閱讀:
回到 Blogger 部落格技巧總整理

8 則留言:

Tiffy 提到...

謝謝你的教學,我正想找關於這類的 :)

工作熊 提到...

Tiffy;
很高興多你有幫助!有空常來。

新竹瘋浪客 提到...

這篇文章真的是很有幫助....非常感恩您的教學 ~ 為了學生上課方便,小弟已略作修改... http://jainan.blogspot.com/2010/08/129-blogger.html

傳說中的路人甲 提到...

請問一下,是用"PINK_UNDERLINE"還是"PINK_UNDER"

工作熊 提到...

唉訝!的確是【PINK_UNDER】而不是【PINK_UNDERLINE】,更正一下囉!

傳說中的路人甲 提到...

我最近用IE看才發現這語法在IE上會有問題,就是當底線出現在因視窗大小改變而自動換行的文字時只有最後一行才會有underline,其他瀏覽器都正常,不論IE8還是IE9都會這樣,好悲劇,你可以用IE和其他瀏覽器看看我的部落格上方聲名的紅字就知道了http://zslg.twgg.org/

工作熊 提到...

傳說中的路人甲;
這的確是IE的問題,我的解決方法是盡量縮短底線符號的長度,或是用多個底線符號來克服。

傳說中的路人甲 提到...

過了1年多,我再次回到這裡使用這語法遇到了一個問題,我想要讓h3的文字都有底線,但是發現套用後會變成h3整行都有底線,請問這有沒有辦法可解?

Related Posts Plugin for WordPress, Blogger...