Tình cờ lướt Web mình kiếm được cách tạo khung bài đăng có dòng kẻ mới nên mình giới thiệu cho mọi người. hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger.
Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng
Cách 1
Bước 1
thêm đoạn code sau:
.pre-formatting{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
}vào trước ]]></b:skin>
Bước 2:
Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:
class="pre-formatting" style="height: 100px;">Nội dung code
Bạn thêm thẻ Pre vào đầu và sau đoạn code trên nha. Do mình thêm vào là nó k hiện code nên các bạn thông cảm Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng?
Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!
Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: <thành < và > thành > );trước khi đặt giữa hai thẻ trên.
Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.
Cách 2
Bước 1
Làm như bước 1 ở trên thêm thẻ pre hoặc code
pre, code{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
}
Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:
"code"... nội dung code ... "/code"Bạn thay " bằng <> vào code nha. Hoặc:
"pre"... code ..."/pre"
Bạn thay " bằng dấu <>
Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeoZIKG13Co9JvvydYJXKlQQbnRZqQq0Cq_qGba9xfDTz18dToiDm5Vhm1VpSCiUFjPCY9WvNRN5SdzAC5Ql8fT5vAzVme43GdnSohvd0-i3Cr4AEy-7KnL7AEXSQxIkn2kPO-xkOyGo/s1600/prepb3-namkna-blogspot-com-1.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}
-Chúc thành công!
0 nhận xét:
Đăng nhận xét