[Blogger] - Trình bày code bằng blockquote | Võ Quốc An

Bài viết hướng dẫn về trình bày code cho blog thì khá nhiều và cũng có rất nhiều mẫu trình bày khá đẹp. Nhưng đa số đều mắc chung 1 vấn đề là khi trình bày phải chèn vào trước và sau đoạn code 1 số thẻ mở và đóng. Đối với bài viết cần trình bày nhiều code thì sẽ hơi mất thời gian 1 tí. Hôm nay có 1 bạn gợi ý dùng button blockquote của blogger trình bày luôn thì sẽ tiết kiệm được thời gian. Nên mình viết thêm bài viết này hướng dẫn trình bày code bằng blockquote có sẵn của blogger.

1. Bạn vào Thiết kế → Chỉnh sửa HTML. Tìm và xóa đoạn code sau (nếu không tìm được thì bỏ qua bước này.)

.post-body blockquote{ ... }

2. Chèn đoạn code sau vào trước thẻ ]]></b:skin>

.post-body blockquote{overflow:auto;min-height:30px; max-height:200px;margin : 15px;padding : 10px;clear : both;list-style-type : none; border:1px solid rgba(0,0,0,0.4); border-bottom:1px solid rgba(0,0,0,0.2); background: rgba(0,0,0,0.15); background: -moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.05)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.15)), to(rgba(0,0,0,0.05))); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#999999')"; /* IE8 only */ box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); -moz-box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5)}

vậy là xong. Phức tạp hơn đi hỏi Mr Google ☺