Code box từ css đẹp cho blogger

Posted by on
Khung code là một thành phần khá quan trọng với các blog chuyên thủ thuật Blogger, nó giúp bài blog thêm phần chuyên nghiệp và người đọc sẽ không nhầm lẫn với các phần khác trên bài blog. Hôm nay mình giới thiệu một mẫu khung code khá đơn giản nhưng đẹp mắt

#Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm được

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

#Sử dụng khi viết bài

1. > Chuyển sang chế độ viết HTML
2. > Dán code dưới vào
3. > Thay đoạn màu đỏ thành code mà bạn muốn chèn vào khung và tất nhiên là nó đã được mã hóa
<div class="code">
Code Here
</div>
Hoặc
<code>
Code Here
</code>
Để thao tác nhanh hơn với mấy cái khung code này, bạn nên tham khảo hai bài sau:

Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.