13 kiểu Blockquote đẹp cho Blogger!

#1 - Chọn kiểu

Lấy code tương ứng của một trong các mẫu dưới.

1. Fancy Border and Owl Image

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

2. Purple Corner Label và Border ở chân

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

3.  Ảnh ở góc bên phải

.post blockquote { 
margin : 0 20px; 
padding: 10px 20px 25px 20px; 
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0mmn_AVUTXwZogPOxXLVr5DZaQ5TJpg-400vviMV2TOzu90eZEHLTWkbY4bqojo0vLEnMvnAg1I0dVxTk8uJG7jVnCbvhtfRs7MLA1pQB9HIB4HYF086AJN-GshZK-ITwPn9GXkWYuXA/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; 
}

4. Đường viền cổ điển bên trái

.post blockquote { 
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfB4zPCB2d-UK8lrSD_bJGA5z79LUHc3fxX1C3fndAXoXBjDxw5pyQJ1GTb3CHh5BgnybHjSixkJ3fQrL5qCC8wEKkYHTVA4uzPg8jIzlWrsJdPv1_0Fx9XYfaBTb2TbwIhEjslAq6yA/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; 
}

5. Nền đen với viền xanh bên trái

blockquote { 
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-JNyTlqToYfB5mjAfERb7U8rD9IQvUkiHIUkm4UyhIvZn9aevqNlWCQNEj_vNari99i80kN709Gpuo1QzndWh_F49BcmDioclznZub4PHR-r2ZUNJUVtiR0ATTLAWhrBH5eJK6hyqT4/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; 
}

5. Nhãn màu cam ở góc phải

.post blockquote { 
margin : 0 20px; 
padding: 20px 60px 80px 20px; 
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJuEeoXrpizksEdh-M8DXme2nW5eLD8zeG2xufxWWQ-nvzS5rncE2eOh_SlmgZesKgxAXxgmDn8e9Xkl1lMfdmvMgwEiqSHy_0eza4Rj5okcv9weCEeLQTrsUG4kGGJtkyg3H0XU4Qws/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; 
}

6. Dấu nháy kép màu xanh

.post blockquote { 
  font: 18px normal Tahoma, sans-serif; 
  padding-top: 10px; 
  margin: 5px; 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGg4cWtuJgTQoonYrqR9ukZToeb3aBR8S4hOubpYrXk5gsRtlxXdLl4ewEvNKxEy76Zv44NeOiT8RYMUjY2jvDj98_cyBHbrUMacW5ghsoR-qje_1M1taA5ZKLdchbELU6hGbk5r8ftFk/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/AVvXsEgoR-7HWLQGqXR4-hi1phc7wgexkWnvU3r-ZIE5z8xNxyRDXqT4FOrzqdYL1vNjlZqJMuLgnJehEMs5fMNnNjAcQ0snpSj8W_cXaomrVKRbA1RjeJnLzamtDxUlQa7IbnIMGbxncc2RJOc/s400/comma-right.gif) no-repeat bottom right; 
padding-bottom:10px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

7. Dấu nháy kép màu cam

.post blockquote { 
  font: 18px normal Tahoma, sans-serif; 
  padding-top: 10px; 
  margin: 5px; 
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxptOBTCNqTAUu9q_GHW4ykcbdF2bnhDqriLx2Ba29TmJ51Uq_ZFmR3Sxf0cC4vZEIprxjAgk4jE9FRlL26ZyfCuvjh180UWU6FsFd38yB_d9btb29pDQLBWjMSdqgZB0mpiI0D3f1qDM/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/AVvXsEgjA_m2Y9FJ_unkHZvX-VtK063LiJ9r6yO8aaWhCp9YGIyLgJnsWeWutyGwX6o1xlnasykJvQ39t3NoNvU9OaGTKkhfJUaTNu8UL89YF_30ZTxaElrjnfBvAmZKfJ56EpW5DDIrIbhXNcA/s400/comma1-right.gif) no-repeat bottom right; 
padding-bottom:10px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

8. Bàn tay màu xanh

.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/AVvXsEhD1WwoJvpMf5OOqnm8VU691TuJhQFEMNh8ShUsGY89zWxOdsTweYJyNx6j1fc-i7K1bc1rDCDXOwR-Ht1OpgABi4Pu9M05xUgPcD-RAkcal7Jz4WWXrtQMMw9EbjKUXaPQnImOGoL4EBM/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/AVvXsEgR_JMK0axHy391JwHmQa8aQeDtASNw4v1E_-Gls8UOvVQJ_LsZzaI6OyRimnUT__9uaNb4azoMoWC8mWar1YlHjTXEhw9RyizUC5BJxdoOLSw2w6M1A4hKMYedpcYHpaQ5FymGwilf8GA/s400/right.gif) no-repeat bottom right; 
padding-bottom:30px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

9. Nháy kép màu xanh lá

.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/AVvXsEiwKQWu-vRoe6m4CoMRjsg7YrOxiYKC7wXs4FjSk6A2KCG8yaWGEOlMmh2caLDUfwjwfudcbgzOUCJe3u5qK5PvF3apzTNZ-BmZlSdnyxdem8lxw2DHgCAj9XilccClnxiHtyo9WykB96k/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/AVvXsEib8VsYbzIMl6dkoGHOL-X_AUcX9ve_9WVob4djl7kEmWDkK6UrpZrKTt6laFG7joQCX3KaAYBDG5Hd0mlNq3kR9mYcINWUAyEQtNc_zUhkUjwCGMYutn_LgqCkyzIPpfDrFnWjnYh2S_k/s400/comma2-right.gif) no-repeat bottom right; 
padding-bottom:10px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

10. Ảnh ở top

.post blockquote { 
margin : 0 20px; 
padding: 70px 20px 20px 20px; 
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FSDiClV-a4VnXSsiDnueJUxduYHd3dL2fI2ukm2kdPYOx2Wsw8NuOO3Wvm2a2AmLtr9Qd6vClbNWrDR2QCPVditJN5VXgb1pYYE6x70Vfw311JvmXuf1FPa3JASDAmJldBJuEd3Xs2M/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; 
}

11. Ảnh ở trên và dưới

.post blockquote{ 
margin : 0 20px; 
padding: 50px 30px 50px 30px; 
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyoXNWpzYD3uWih-uj6uUCn5EOBNVR7Nodt3n0IvqS_Lu9cAppyqAfUyS9iLV7otm3vPreh47tnAEpNiUGRv81IJuvxCVJEhGZIn-j-TW_3Q33PRk98v5YotsE7ZKTwAH7FqZntuk5lUI/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/AVvXsEiRaIZZ8KOu0H8el42LDuih5JHFj7IYmw9VD5ml8fGoWpGxvb_H3Bd75GUZZ8HcWGxQohvobw1b5qSFlWGrg59Hd68-PRZx4SmtliP6wQYFS0OPIfcK_4Ors_l5-e0na7hipMTLY0Fad5k/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; 
padding-bottom: 50px; 
}
.post blockquote p { 
margin: 0; 
padding-top:10px; 
}

12. Viền bao quanh

.post blockquote { 
margin : 0 20px; 
padding: 70px 20px 30px 20px; 
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY85XEsLroVtQktgwq43YdSCzh7ERzcaC6zWNhy5rtKY-FgimP1wHSzu_BcirqsdKgVkKyskLjamK9o1UbTwIXyr4uwerHGISFQ1WlwPXTxIOXsmpdaVHPQg4ikP7Kx3lszMOmjh-4H6o/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; 
}

13. Chú khỉ

.post blockquote{ 
margin : 0 35px; 
padding: 80px 0px 0px 0px; 
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2dmB1rgtGSe2ZZk4-y-RqWK2drNzUSkcblOFmfHrioY134rQr6s8X-2Ga_-YLdXkHZVkGat4Wc5oMFOtgOehDsEohXl8ktuilHUHAHjoSlpIROLFuSr7vW7tT7WJxNnhrm4W7cCYAeO4/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/AVvXsEjVpzSLLh-z6Qal-C4uY9kOWU5Jw7ViQHZr1DlOTpLrRL0HNkDHOFw4VBUYgfLmLJun3au5cM8bWeL_eOFmtoYiSGdJcjjAANAo4pokwK_YoixyTR4tqOrUroHXXw9ncja1XIl3ocwZ1sg/s400/head-bottom3.gif) no-repeat bottom; 
padding-bottom: 50px; 
}
.post blockquote p { 
margin: 0; 
padding: 20px; 
}

#2 - Thêm vào blog

1. Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML

2. Tìm thẻ ]]></b:skin>

3. Dán code lấy ở #1 vào trên thẻ vừa tìm được
4. Save

#3 - Sử dụng trong bài viết

1. Đối với các mẫu dấu nháy kép, Chú khỉ , Ảnh ở trên và dưới thì sử dụng như sau:

<blockquote><div>Quote ở đây</div></blockquote>

2. Các mẫu khác

<blockquote>Quote ở đây</blockquote>

Nguồn MBT