善用及改造 blogger 中的引用文字(blockquote)功能
blogger(blogspot)在建立新文章的介面, 有提供一個引用文字格式設定的快速鍵, 這是用來標示所引用的某段文字區域.
效果如下,
如果在這段區域加個背景圖, 也可以有不同的視覺效果.
可以先去找個 引用(blockquote)的圖, 或是下載這個圖
. 然後上傳到一個網頁空間, 取得圖片網址.
在 範本 --> 修改 HTML --> 可以找到這段 blockquote 的原始碼.
可改寫這段blockquote加張背景圖,如
blockquote {
margin: 15px 30px 0 10px;
padding: 20px;
background: #f0f0f0 url(圖片網址) no-repeat left top;
}
記得填入圖片網址.
儲存後, 在建立新文章時, 將引用文字先選取起來, 按功能鍵中的, 這段文字就會被<blockquote> </blockquote>包覆了.
效果就像這樣.
19 comments:
9/05/2007
多謝教學.
9/05/2007
这个好～谢谢你的无私分享 =>
9/05/2007
毛毛牙, Kahyan,
也謝謝你們的留言及支持.
分享的快樂, 其實也是一股自我成長的動力呢!:)
9/06/2007
終於等到這篇了
之前用別人家的版型用引用文字都看不出效果
另外可以請教一下
如果用"條列式"編輯後，發布在部落格沒有效果是否也可以自己寫出碼來顯示呢?
PS我說的"條列式"就是像
1. ....
2. ...
3. ...
或是
‧ ...
‧ ...
‧ ...
這樣子
9/06/2007
莊傳魚,
編寫文章的頁面也有 條列式的選項, 不然你也可以在 "修改html" , 自己加入以下的程式碼.
ol 是以數字編碼.
<ol>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
9/08/2007
谢咯!嘻嘻!
9/08/2007
Suwan, 不客氣. :)
9/21/2007
感激萬分，我是個初學者，好高興能找到這麼好的學習blog。再次感激。希望我也能很快成為別人的資源。
9/21/2007
Blue@sky, 一定可以的,因為我也是這樣一步一步過來的啊! :)
9/28/2007
我找不到blockquote =.=||
如果要新增的話, 要價在哪裡啊?
9/28/2007
如果沒有, 那就加一段試看看囉! :)
12/15/2007
這個教學很棒喔！
我也改好了...
12/16/2007
davin, 恭喜改成功囉! :)
8/11/2008
感謝您的分享，小弟也改成功了！
8/12/2008
阿厝,很高興你也改成功了,歡迎有空再來坐坐. :)
9/01/2008
請問一下喔，我套用後用Firefox看一切正常，但是用IE的話就會有一點問題，在圖片的地方感覺是顏色重覆了，我對這不熟，是否可以指點一下，有問題的樣子我捉成圖片了，如下的網址：
http://www.filedropper.com/2008-08-31235100
或http://flickcabin.com/public/view/4063
9/02/2008
Nicky,這個可能要看到原始碼,我才知道問題在哪? blockquote {}內的程式碼都一樣嗎?
5/16/2009
至今使用blogger，Skyvee 您的許多教學幫助我許多，現在在將過往曾添加的功能一一用文章筆記，特來此感謝。
(文章有提及是參考您站上教學)
5/19/2009
小玉,謝謝你特地來留言. ^^
我要留言
謝謝您願意在此分享心得, 讓文章內容更豐富.
這篇文章被引用到...