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{
...
}
...
}
.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}
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}
Save template lại là xong. Sau này mỗi lần trình bày code bạn chỉ việc cho đoạn code cần trình bày vào thẻ quote là xong.
Không có nhận xét nào:
Đăng nhận xét