2016年8月13日 星期六

[BLOG] 如何在Blogger自訂引言(Blockquote)區塊

   [Web][Blog][Blogger][CSS][HTML]
        在Blogger中提供一種相當好用的功能==> 引言,這篇主要就是介紹如何制定引言(Blockquote)的格式,利用這樣的功能來提升我們撰寫Blog的速度,本篇僅僅做個引導,並不特別介紹CSS的語法,有興趣的同好可以自行研究加以變化。
        1.Blogger引言(Blockquote)功能:











        2.接著新增CSS點選 "範本" ==> "自訂"==>"進階"==>"新增CSS",加上下面的程式碼:
blockquote {
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size: 20px;
padding:12px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
left: -20px;
align: left;
}
        3.選取所輸入的文字,點選 引言(BlockQuote)功能,如圖:












        4.這樣就有我們想要的結果囉!!









沒有留言:

張貼留言