CSS 語法：為Blogger 的 Quote 增添美化邊框

March 31, 2018
-
3 Comments
2018. 03. 31

用Blogger寫文章的朋友，應該偶爾都會用引述 (Quote) 功能來強調特定文字。如下所示：


想要強調的文字




然而在一般的模板中，其預設的 Quote 樣式十分陽春，因此本篇會簡單討論一下，如何為 Quote 加上像上面這樣的美化邊框。


Step. 1

 到 Blogger 後台，進入HTML編輯器。



Step. 2


搜尋blockquote，找到模板原本預設的 CSS 碼，並將其無效化。

P.S. 在語法中被    /* ......  */   夾住的內容不會被記入語法中，而是以一種純文字筆記的狀態存在。


Step. 3


找到 b:skin ...... /b:skin，並按小三角形將其展開。


Step. 4


在結尾處的正上方貼上新的語法，最後按下儲存。




底下提供一組基本的語法，會寫 CSS 的話，可以加以修改成自己喜歡的樣子 ~

blockquote{quotes:none;margin:1.5em 0;text-align:left;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}








YOU MIGHT ALSO LIKE

3 則留言:

Instagram