Blockquotes là cách để làm nổi bật ý tưởng chính của bạn giữa các nội dung khác. 

Các bạn có thể xem Demo TẠI ĐÂY 

☼ Bây giờ ta bắt đầu thủ thuật :

1. Đăng nhập blog

2. Vào bố cục (layout)

3. Vào chỉnh sửa code HTML (edit code HMTL).Ctrl + F : tìm bỏ các đoạn : 

blockquote {......}
.post blockquote {....}
.post blockquote p {.....}

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

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

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; } 

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

Style 5

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; }

Style 6

Code:

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2phjqHy3xxQYtKbJZwKL5Wloo4w-PcRvfdTAGjmVlur62LBXEpMrNIPZZA7EgzyZTad7oCB0j884faayZtfyjFiQZy80nOdONSQexZ-PafpNwPfcX8j9QYhYs7n4ei7MToo6x7GKK3Wc/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; } 

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhJQKYgBpfHEqEkxFKQKFzujmElFsMP1m4Vxs4CaHJhz4umwZ3S7RNLCZFoeYplvsZ8QJCv0YOZA8B8sir1GqSSujxzrvghWi8hCP11uh_V4MX8ek0mZIiaNi7I2NX_Y8qLRm71R9KOQ/h120/angular-purple-namkna-blogspot-com.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; }

Style 8

Code:

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqH78AZsGsmlRgvyAJBXE4tLYe8RPu3t2quVulZd0E8v1YIdRRLEAnHiHxvoMAp_mzh_3lQZm1IMn7FjXBnYeaGdPwARVNBdkycU62c1D7ROlVruGO0rWDamtqlHf3NGGaLp15ihnufQ/h120/block22-namkna-blogspot-com.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; } 

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiE5q18LKdVa_Z-QiqiB9aZxdVsB4nBZqWJQiiKzElsrqEZWlcdvasNn3eARTG14Mz0YT3ytLiNhRr8lQExpk9Zyn_qvl1a5haLWOmahBnaxrezVE5rqAmAVDVTA_2sN_tshbONYFrsJU/s1600/comma-side-namkna-blogspot-com.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; } 

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0Wfv2B-NW3nuM7-zVK2f_2Svi9PmyZb6c05RdJl9NmECAgKBdAkrXaiqmANtQIqiwmEWVLDasMj5m_EZeLLBy4v1oAuxzmnCgkqcnrVBJ73aWTBenCnjZvM_-R3PcULHQyDPKeaLJhs/s1600/green-black-side-namkna-blogspot-com.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; } 

 

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkqMmBktoa66fqoevxXEFe-ZADleYsrbu8hHkTDBtNdSKiRho_OkEbM_xt2RbXmSWY9R-ER2zIJrlDdvIRVoQmBuj4utPlyQOOCjDrDVNXIUcFgzRWn3UFnzBf2Z_6SwFcFUgs5MxHY1I/s1600/angular-right-namkna-blogspot-com.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; }.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJv6uuf6v6HN8-i3xnbzkNu4q8ntYNkolESxVFganGY1zhT_U4q641lld9HTHO3l_8V9k36Zx7ZmOHVbS7Wu-rafixREWAAOw6sb-6s86RHC9te8htIYobqbqaRQEF3mmtWUbVn1F0-M/h120/angular-right-namkna-blogspot-com-1.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; } 

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF89jSKFi2yaDQq62-KQYgh0jm0QkS6n7-I7avxv85a-MTT3L4bAxjP2OJDg2y5XfEsV-L8xKf0CqFcoUMZeZumd-uAgWBfXmb_p2cEyKBT4VEGRBkXDzww1Ds3YIyMoqskn8EKyQuQ8A/h120/comma-left-namkna-blogspot-com.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrBUHwsAt5oSr4hrx8NQIWF72WEq78tnONuB9qfjCu4r9Qp_qPz1dfSMj6c8WDq5O9RsPRf39linO0Zy-VUvh9_Yiva1CmUp2Dgmp0tuZsEDC3kq_L8FKBbtfXxBf7aAWdOOGhsju_FJM/h120/comma-right-namkna-blogspot-com-1.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Style 13

 

Code:

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiknlcgxz0-yMIJvldFm1osvpZBBtuCnwq-IoL1EoPyMtUvayi89r3LGdKViOxeLogu-IxyU3ROF0Cv04_nERrTZxkcKsnu_rlJuv2bL8i21qCoUpNPWHSt3Fr3ths3-paO-FWSAYRkPXI/h120/comma1-left-namkna-blogspot-com.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4C63hAXwTsf07NOd6vKM8k6P4Dm0tR1pho3Ug07yKmxnf3YDDGylOAg8CqLjnxO8D5DjI3A3mKBFQjEFgs9TFmi3rR_D5Q2yzpa51Df83mJXofDbt52kxoMFezEKdTMU8jIqNTn-adJg/h120/comma1-right-namkna-blogspot-com-1.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

.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/AVvXsEhfSolYd9Y-4p68PWpeF-LYuhrpgpr6bzZUirSHbLcsB1Bc96Fwlfq9AnNT9aGLGkhIVhCwpam3V-NoEh4_2DBpnfuMg0AePlSpAVl5fG90U6B_xT4JCIsIHHlQjyJjn9pdA81_Tq2IbKI/h120/left-namkna-blogspot-com.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhjG0RVXZ8-OveJcAqTN5btf20ffPErmU5bhwDRuQEAxIigYV9W2PdPGf1rPDDQ1DpEF28l5mYmLcuiJ7mWWjmZ-lP2Ag2VPlHHiORK_UAbcAYhqlZr_H9LNui0mfZQqg86FzjNjgOoQ/h120/right-namkna-blogspot-com-1.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Style 15

 

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/AVvXsEgmq7n14lT-S4cHaWIWaLp86jGLFJ8shE7JY0-6wa8BrUzxAKnU0ZfgQ9RFqx7l__PSMerjSW-DMxqaGlMK0ESBQXh0n2nHuqSdbgLflRLQXK-KE-IktbSBlwymJSDFxn58si1adfVfx44/h120/comma2-left-namkna-blogspot.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3LWcpG6t54-3LNvdCp5vYvdbAWz1ZG0yhA1cu57h0XCyogwnTahpcYIDqqv5UelufOADVxYEj-Ab-Zhmdinn_FSwTHkR0VIhyphenhyphennM5LM6RxObBpzxq5d9AtvcRUDuwZs_Okb5d6bD9f6A/h120/comma2-right-namkna-blogspot-com.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHlyCQ5E3n13XDV5Y4k4MLA1nTDBVYkiYJ4lBcu0OiOW8-6jMHbkK4h4xx4Ocfe5fHJ8D32cxTjfLQcK2tZlnmkbSdFLkxb-T5ZJue_4WTh9gS71nX5sVbrEj0XCcL36Qnh__VIAAPR6k/h120/block333-namkna-blogspot-com.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; }

Style 17

Code:

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZl9sEkRbKZ2VEsUtxvO8vWPNnoJ6J3ffmEvwZDIHjsT-6ZCLSLo1bGew1glvFrVAoKzJpzvgq_xN4gB7BTb9fQfPJHHDHmrfQAscln-ODYxCzmjN7u11yZFaSpuhDsXMKCML6mKlV3OM/h120/BLOCK1-TOP-namkna-blogspot-com.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/AVvXsEjl_nw1YpvABn3HyIbckVqduJYUhuRjp1Ck_UGJbju8fAOgNIFw8_j3jQeWL7zD-iWTevjfWHUT-ror9eyScJPtqrWNbdU0p_FiakvAcAcYxgyKIgoB-hYlKHgKJeuqI9BIKmwGYZ4wwt8/h120/BLOCK1-BOTTOM-namkna-blogspot-com.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Style 18

Code:

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHKaXAwE2angiQomTMkAptZfWN_g2bNsXEsJ8ZdVftSgsXAX-fxIQ1UD3oFdFw3YAHUeIeL_XYt6YJyvFqXiko7t_4EhTDR5uYc5VlpghgsW7Jl-TYlx1FwMOHe_XGg_zw3guARX0FKY/h120/block3331-namkna-blogspot-com.png) 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; }

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwMjyQSoJGZ-Cg9fCP02t_rtFfvpQEA8OPEjv2tcfe-SwNwNHDrFHPgfWO-G0ewpw0FyUMZNM-xeEVWg83yiGs_7sw75hqB3JApno8kthPiOIpQtCtc3xEGGJZ9KnGI8O4aQGA0aPM5E/h120/head2-namkna-blogspot-com.png) 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/AVvXsEi_I0ouvxrqXqrhNyD9BmV4ldyDx6kI8cxG33i4W_NAT07fw_EZy-ETLwD4ZLoVP3D5_2kTQR83G6AI_I_lXpTVbfI-q0KB4X27o2FUo600e73WebqdNOmjk0hdm6uT4kv-vzJBmw8XhxA/h120/head-bottom3-namkna-blogspot-com.png) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

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

Style 21

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/AVvXsEhs6KnV0nt3LYRYhpeDw6plODlnHh2RRX7HYFW3_cO6JwHIvR1Uul9aFsACkUtm9p2CNGJ0PMo0gSzhn_sGlfZ_6o5pGj9Rd0nt_Q940BVEZtiRQxeVcqzwk8bBpN43MiutLQrv-zcxZ1M/h120/quote-namkna-blogspot-com.png") 5% no-repeat #FFF8DD; }

Style 22

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%; }

Style 23

Code:

blockquote{color: black;font-family:Courier New;font-size:9pt;width:90%px;overflow:auto;repeat-y;max-height:200px;margin:5px 10px;padding: 4px 10px 0px 40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9gkJ107UyspCXl9X5mJwaLbGwjWg9EO2d9J9sa5wYzMHKZzHxcS4YbA15HBZRBEM5SkTAs0aM74eQmMhB3seocwZeLGk-f0wrcNRO41MTwXqrVgi8P2gMyfe2QJwag7SaSpMzv1eH88o/h120/pre_code_bg-namkna-blogspot-com.png) repeat-y left top;white-space: no-wrap;display: block;}

Các mẫu trên chỉ là tham khảo.Bạn có thể chỉnh sửa hình ảnh và code css lại cho phù hợp với cá tính của bạn.