22 phong cách cho đoạn trích dẫn trong bài viết của bạn

Đăng bởi Admin | 11/10/13 | 0 nhận xét

Khi nào bạn muốn làm nổi bật một vấn đề nào đó, hãy cho nó vào trong dấu ngoặc kép. 
Vậy làm thế nào để bạn có thể tạo phong cách cho một đoạn trích dẫn trong một bài viết? 

Khi tạo một bài với một đoạn trích dẫn, các văn bản trích dẫn sẽ được thụt vào bên phải và bên trái để thiết lập nó đi từ văn bản khác. Tuy nhiên, nếu bạn muốn thêm phong cách cho bài viết của bạn, bạn có thể sử dụng Edit HTML tab để thay đổi chỉnh sửa các đoạn trích dẫn sử dụng CSS nội tuyến. Ví dụ, sau khi chèn một đoạn trích dẫn trong soạn thảo văn bản phong phú, bạn có thể bấm vào Edit HTML tab và tìm kiếm văn bản như thế này:

<blockquote>This is some quoted text.</blockquote>

Và chỉnh sửa nó để nó trông giống như thế này: 

<blockquote style="border: 2px solid #666; padding: 8px; background-color: #ccc;">This is some quoted text.</blockquote>

Điều này sẽ hiển thị đoạn trích dẫn của bạn với 2 điểm ảnh rộng màu tối xám, 8 điểm ảnh của đệm bên trong biên giới, và một nền màu xám nhẹ. Ví dụ: 

Đây là một số văn bản trích dẫn.

Để bạn dễ dàng thay đổi kiểu dáng cho toàn bộ blog của bạn, điều này sẽ cho phép bạn chỉnh sửa các màn hình hiển thị của Blockquotes của bạn mà không cần chỉnh sửa HTML của bài viết mỗi khi bạn bao gồm một báo giá. Cho kết quả tương tự như trên, bạn sẽ thêm phần sau đây trong weblog> Chỉnh sửa thiết kế> Custom CSS: 

blockquote {border: 2px solid # 666; padding: 10px; background-color: # ccc;}

Nếu blog của bạn đang sử dụng mẫu chi tiết, bạn sẽ thêm đoạn mã trên vào mẫu kiểu. Nếu bạn muốn biết thêm thông tin về tất cả các khả năng của các yếu tố phong cách với CSS, có một hướng dẫn hữu ích ở đây .


Dưới đây là 22styeđể tạo khối trích dẫn cho Blogger!  

Blockquotes một thực sự là một cách rất tốt đẹp để phân biệt một số nội dung với phần còn lại. Và nó cũng là một cách tốt đẹp để gây ấn tượng với người dùng bằng cách sử dụng một phong cách mát mẻ cho các trích dẫn trong bài viết này tôi đã đưa ra những phong cách khác nhau của Blockquotes từ các nguồn khác nhau chỉ cần kiểm tra phong cách. 

Phong cách 1:

Blockquote Code: 

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Phong cách 2:

Blockquote Code: 

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Phong cách 3:

Blockquote Code: 

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Không giống như dấu ngoặc kép khác phong cách này có một tùy chọn in đậm chữ cái đầu tiên. 

Phong cách 4:

Blockquote Code: 

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Phong cách 5:

Blockquote Code: 

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Phong cách 6: Blockquote Với biên giới Fancy và Owl Hình ảnh 

Blockquote Code: 

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl270spRViR6bwIo1G_agLeR-JjYRe6aJ05jeAlfIOsFIphBKJA_0K8YZmKv7EWVW7eXs9Vb_n5HVBXX_CoJA3V4XJrm9Gv3BzwhGgAtvU7fDfniVy9i0xS0o6SXzUdmMm5qf4ap_emIM/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Phong cách 7: Blockquote Với một nhãn Góc tím và biên giới ở phía dưới 

Blockquote Code: 

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi500QN98fkx70GcVKKYyYuzMyF346MDevISLmSYubHcKi04A9HnAaLUwmmG3MhlpZNxlpaB8mOrL6r5JWSFdiso7uFdo2D7pD-wJo4s_AMR378iHu_iRRhV2iSeKdE9NdatLAYx-3BfH4/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 8: Ghép hình Blockquote Với Một hình ảnh Tại góc phải 

Blockquote Code: 

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3rLJM-gJ4akUXPby8-4p_7ozt85ZbNX7_XxJRR0er-rL30D5ux7GFP-vnBEK9lDBjp9b8rsm-aP00-ruBWfgwb4JnH4btpgld-tZ-iVb0zbrRcv0vSKjHUq4VvbDLVN-Jeh6g7Uq1Gd8/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 9: Blockquotes Với biên giới trái cổ điển 

Blockquote Code: 

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xXcwwjiAbGGpVtYRJlD2e-kNVO3dMFHh3uqP0-cNm5Vx75iSOd7T67GlB6Ln4a-lCBRa8HSn9R4Frc-9U4NN_xUsIwnh_fXhwLG2QBoMi9sPSuM47ep1sjtcPbsSoxd_cFhLyuQgRrc/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Phong cách 10: Blockquotes lại mặt xanh đen 

Blockquote Code: 

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXcbXgJhg_phbRSbijQTZAVMx_8_khR40U3WrndE2GnYeHnVBba29Sruu3vWfUhGyWDj9YPjcE8IcjbHDArxYPmWAx6OVcUkDIzLldu5XYuKkQ0quVjBBsFaP_NJBSdtz9i2souQyY6E/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Phong cách 11: Blockquote Với Brown Góc Nhãn 

Blockquote Code: 

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrdSpw2l6-IeurtT14g8IxfmIjqcqkspDNS8ruSVPzJMHEcBXi5Wlk-0HWypbUAeueXTA5hf45AuZ9wi8s85daUuDMpkLMsSFTbsz9maSe5cMT_85_1Z3GaUd5adgNTL-n7HmXTlga2OI/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 12: Blockquotes Với dấu ngoặc kép 

Blockquote Code: 

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnuqmaWahMAzqhnpS2Luq5g826K4uJe9GyiEhAJSrxHegS6m8CRj4fVbEjewR2H98RDJPGH11zQQkvlxA-sClsQuWtzhobsVPhPQ83wSUSUzgMnzQPxMNnnypxzy_wvPfbj0do6tm3x6I/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxEGFqOFADJKQn0mF4uz9ExW89L3LOmKDAI3jQr6-g6o1levCZtnlcUkzE6JE868Ukc4Eb9BIH-bICoeyuqSFIs_L99FMZQtm8gSb7oRm3nX2h9ftFmxqUwDbguU_iN7qKor-KwBmvHaQ/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 13: Blockquotes dấu phẩy cam 

Blockquote Code: 

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3lOOWbmLeGZiWTIfPTwqK-dtxmj3qBjgbAeBOzGJnU1EO_OED3URVQkLqcRM9vTz42Y3VdAoCvMJ66X1_KTvX92RiDkCJxEgUhbgmwtWpnx8F5XN_xYNMsLDLee8FpoYyxfL6wEWLKo/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtfjKXmxCEOWc7nR5TU-iuh2p-3c6gBsqJV7K4C78y0wmJgmY3xdmXSGBqtJTv47RWMjWPQCxFRGGKl0fLsbDgIw8ncWJMAHnUQvZYVwKxSb4Lz8zplNTPR3vk4QT5vi5tW0XEOXZOfgM/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 14: Blockquotes dấu phẩy tay 

Blockquote Code: 

.post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoo8y8VeOrDIDcuHrB4gEty-2aL9y0GoaSVSWN-ZAok8rYDiEyvLJM6h8JGsGPd2wEKxlIyD2NTlZTE3zNHwAncAybMuwY3OVgZdmw8Yoqbwt6iepZYDAiVpviA1DXauPYi9PjQKjk2Y/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3XPIPEirqQcMvk_kUiGtfSb1oVaQ_wo9wPMqeF_FC5BWBOmMd1qgg1M4T2IONFMGztoLDs9fTd0Qj6XHwy6PSQf61QIHKzz_KlNb7g-lZ1XJZrUvm3gu_Taci6Azq432urIHUlYbWKk/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 15: Blockquotes dấu phẩy màu xanh lá cây 

Blockquote Code: 

.post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZmzvOsrqE4KwtLnMnWUpH4Rj-tyi4FlopjxN3gXO-m7riok5utCgCiKFs7BTXsiZ6wIeG4v8g-bWU72ScV5T_VJfbol_nXPzfLkesRvgKaESl1F4e7BWtb8edyjAQ_f1RuisrVWtiDUI/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6igSEEd3oKgjOUvz8gV6n9OfmW5ZpQcfBqmo9S1nJr9yrxIQWuNN0e3GY4otXbtnzaz80FqmHk01zPplR5it2YKLAQMIKFz26joz_PmXPXRKXCQHHzb1S3bvZ1uKSwfZ8RWNNEQYlEhY/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 16: Blockquote Với Image Vâng Phù Tại Lên trên 

Blockquote Code: 

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFlA85JhcPTfOxwkjTRG0ZRPJuVBI0WmB0dKDoemLsxVAURAh-5d4ikcEi13MdRD1TOUi359FDiUbZEbBumfHUrJg1wn7B20X1mgRIWFW15UpWON2ne0REUz692sSSokKVInPq9Memg8/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 17: Blockquote Với Canopy US Image Tại trên và dưới 

Blockquote Code: 

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyZcIk0Xs1mgl_mg4WbKmDB9zBORtu8GZvp0-iJms0JNU4yhkn6TI9XHmpATZGcc4eDldoKXjbgL6rJNOwTNm5r7bfECuSIu9AD-9pyjob7OYiE6rZr9h-PA32Srs8z3FUmci6q6CkWQ/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWZCoI_XFtcbIv54QTGr8zE2Ab5HIDx06Qvib8o7rnLVDhHnjms-_rLDT2_5jE3mhJUBRrTi5Zn0zTOmZj_NP-cLvrro96-7jrnt9jdNR89-iAWS_pws2EXUtnOjV-QG5MIXNnMotQ7M/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 18: Kiểu hộp Blockquote Được bao quanh bởi biên giới 

Blockquote Code: 

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kq2_N2MdCfKFyGB8-VAWVfNTodpfhyGMowaQ8KLHHqFKT6m828KhHPm-wLylEGTxQYS7C4wxCjzbosCTXNU343i1DD6OJqwMdrmQrv4ZpRv5nli9e5vYaC9M1ddwTWjvn9I0hK9zV-4/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }

Phong cách 19:

Monkey Man Blockquote! Một khi bạn nhận được một ý tưởng về cách sử dụng các Blockquotes sau đó bạn có thể tạo ra nghệ thuật và một số Blockquotes vui như hình dưới đây, 

Blockquote Code: 

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlVsk2lLwFFGckcD6PSvDctsP-Cx95JgDbctbPqhWNECyMbIYSAz8bYXdhhdv32Gn6QSo4RRxhZY4ugUsrAq2WEjZiNXxDozlBpcqtkUoD8beH68fGNQU1ld6g-VtjGkhuGksnM70Amos/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhedjlFhJvweO3zjGQkJICGO-t3p1viRVlrztZkBEPpHcLHlPjsn0uz3NQQA-YhbQBQSC1NS-vAzkcBjxhZ1uS01cZ7rDL5_0hP09u1okmjUzxWNoYhACcKtkW_SII5Q-ZZzrqD2VNclZg/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

Phong cách 20: vài cách ăn mặc các đoạn trích dẫn thấp kém 

Blockquote Code: 

.post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } blockquote { background:#EFEFF7; }

Phong cách 21: Lớn chunky báo giá đánh dấu blockquote 

Blockquote Code: 

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjBjeFyR63xnPdE8W6etRbUTeNkRHm5AUWZ5A62BhLrnTVAYtAP4P2JM98u4Bg7lRdHWQSnLei9LD9g5_2xBwdKyIhgIvByWe4B2QfnVSciITLIYXTLtJBQWCasTucn3IHogk3auCgl7-/s1600/quote.png") 5% no-repeat #FFF8DD; }

Phong cách 22:

Đây là một trong hơn. Tôi sử dụng nó trên bơ mây. Nó là đơn giản trong một cách ưa thích.Tôi đang thay đổi màu sắc ở đây để bạn có thể thấy một loạt. Những điều tuyệt vời về đoạn trích dẫn này là bạn không cần một hình ảnh để lưu và tải lên. Đó là tất cả thực hiện với khói và gương! 

Blockquote Code: 

blockquote{ background-color: transparent; border-top: 3px double#DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Nếu bạn muốn có một màu sắc khác nhau, hãy tham khảo các Bảng mã màu sau đó đặt mã màu thay cho # DC143C trong đoạn mã trên.

 Thực hiện và tuỳ biến: 

  - Bây giờ để bổ sung một trong những Blockquotes tuyệt vời và độc đáo vào blog của bạn , hãy làm theo hướng dẫn:

- Bước 1: Đăng nhập vào  Blogger , vào Thiết kế -> Edit HTML và đánh dấu hộp kiểm "Expand Widget Templates" và  Sao lưu mẫu của bạn 

- Bước 2: 
Bây giờ tìm (nhấn CTRL + F) đoạn mã này trong các mẫu: post blockquote  và xóa nó cùng với tất cả các lần xuất hiện của nó. Trong hầu hết các mẫu mã trông như thế này, 

.post-body blockquote { line-height:1.3em; }

Hoặc: 

.post blockquote{ bla bla bla}

Nếu bạn không thể tìm thấy mã như vậy thì thôi. 

- Bước 3: Bây giờ tìm kiếm ]]> </ b: skin> và chèn ngay trên ]]> </ b: skin> đoạn code mã cho một trong các Blockquotes yêu thích của bạn .

Ví dụ, tôi đưa ra một số mẫu mã dưới đây:

blockquote{ background-color: transparent; border-top: 3px double#DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Tùy biến:

Khu vực quan trọng cần được tùy chỉnh được in đậm. 

 # padding: Nó đề cập đến khoảng cách của các văn bản từ biên giới đoạn trích dẫn. Mà đi theo thứ tự -> Top Right Bottom Left  (Lên trên phải dưới trái )

# background : Điều này bao gồm màu nền Blockquote và hình ảnh được sử dụng trong nó. Sáu chữ số là giá trị màu nền và liên kết hình ảnh được chèn vào vị trí của văn bản in đậm trong phần-> này url ( Paste Link Hình đây )    

# font  : - Nó bao gồm font chữ style (phong cách) , size (kích thước) và type (loại) tương ứng. Phù hợp với màu sắc với các mã trên để tham khảo.    

# color: - Là màu văn bản. Bạn có thể sử dụng một màu chữ khác nhau, sử dụng Bảng mã màu   

 # border : - Là biên giới width (rộng) , style (phong cách) và colour (màu sắc) tương ứng. 

 Tất cả Blockquotes khác có thể được tùy chỉnh theo cách tương tự. Bước 4Sau khi tùy chỉnh cuối cùng lưu mẫu của bạn và xem trước nó để xem sự thay đổi mới thú vị. 

Hướng dẫn:  Đối với Blockquotes đề cập ở trên, bạn cần phải thêm một số thêm các thẻ trong blogger biên tập như giải thích dưới đây . Bây giờ Bất cứ khi nào bạn đã viết trong chế độ soạn thảo của Blogger biên tập báo giá chỉ đơn giản là chuyển sang chế độ HTML và thêm hai thẻ tức là <div> và </ div> giữa các thẻ blockquote như trình bày dưới đây, 

<blockquote><div>Trích dẫn của bạn ở đây</div></blockquote>

Chúc bạn thành công !...
                                                                                                     Nguồn: bdlab.blogspot.com