Thursday, October 11, 2012

Trình bày code bằng blockquote

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.

HƯỚNG DẪN

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{
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #316903;
border:none;
background: #5aa80d;
background: -moz-linear-gradient(top, #55a10b, #94ce44 95%, #58a32b);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #55a10b), color-stop(.9, #94ce44), to(#58a32b));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#55a10b', EndColorStr='#94ce44');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#55a10b', EndColorStr='#94ce44')";
box-shadow: inset 0px 2px 5px #346c13, 0 1px 0px #d0e0c7;
-webkit-box-shadow: inset 0px 2px 5px #346c13, 0 1px 0px #d0e0c7;
-moz-box-shadow: inset 0px 2px 5px #346c13, 0 1px 0px #d0e0c7}