2007/09/05

善用及改造 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>包覆了.



效果就像這樣.



相關文章 :

21 comments:

毛毛牙 提到...

多謝教學.

◤kahyan™◢ 提到...

这个好~谢谢你的无私分享 =>

Skyvee 提到...

毛毛牙, Kahyan,
也謝謝你們的留言及支持.
分享的快樂, 其實也是一股自我成長的動力呢!:)

莊傳魚 提到...

終於等到這篇了
之前用別人家的版型用引用文字都看不出效果
另外可以請教一下
如果用"條列式"編輯後,發布在部落格沒有效果是否也可以自己寫出碼來顯示呢?
PS我說的"條列式"就是像
1. ....
2. ...
3. ...
或是
‧ ...
‧ ...
‧ ...
這樣子

Skyvee 提到...

莊傳魚,
編寫文章的頁面也有 條列式的選項, 不然你也可以在 "修改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>
 

SuwaN 提到...

谢咯!嘻嘻!

Skyvee 提到...

Suwan, 不客氣. :)

Blue@sky 提到...

感激萬分,我是個初學者,好高興能找到這麼好的學習blog。再次感激。希望我也能很快成為別人的資源。

Skyvee 提到...

Blue@sky, 一定可以的,因為我也是這樣一步一步過來的啊! :)

Li Yumika 提到...

我找不到blockquote =.=||
如果要新增的話, 要價在哪裡啊?

skyvee 提到...

如果沒有, 那就加一段試看看囉! :)

Davin 提到...

這個教學很棒喔!
我也改好了...

Skyvee 提到...

davin, 恭喜改成功囉! :)

阿厝 提到...

感謝您的分享,小弟也改成功了!

Skyvee 提到...

阿厝,很高興你也改成功了,歡迎有空再來坐坐. :)

Nicky 提到...

請問一下喔,我套用後用Firefox看一切正常,但是用IE的話就會有一點問題,在圖片的地方感覺是顏色重覆了,我對這不熟,是否可以指點一下,有問題的樣子我捉成圖片了,如下的網址:
http://www.filedropper.com/2008-08-31235100
或http://flickcabin.com/public/view/4063

Skyvee 提到...

Nicky,這個可能要看到原始碼,我才知道問題在哪? blockquote {}內的程式碼都一樣嗎?

小玉 提到...

至今使用blogger,Skyvee 您的許多教學幫助我許多,現在在將過往曾添加的功能一一用文章筆記,特來此感謝。
(文章有提及是參考您站上教學)

skyvee 提到...

小玉,謝謝你特地來留言. ^^

湘琴的老公 提到...

先謝謝您的教學。

想另外請教您,如果是想再加上右下角的引用符號, 是要把right bottom加在哪裡?

skyvee 提到...

您好, 不知為什麼昨天才看到您的留言,如果想要右下角出現引用符號,那麼做法會不太一樣, 除了文章中的程式碼外,要再加一段程式碼.
blockquote div{
background: transparent url(圖片網址) no-repeat right bottom ;
}
然後,在引用時, 所引用的文字要放 <div >與</div>之間.

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.